{"_id":"@material/banner","_rev":"1115-312bc7108e92f1b5d159f475a80c3423","name":"@material/banner","description":"The Material Components Web banner component.","dist-tags":{"nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"8.0.0-canary.e1bc84d10.0":{"name":"@material/banner","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e1bc84d10.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"446e4a9487e29f37197c077ed41d6460aa356c3e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e1bc84d10.0.tgz","fileCount":41,"integrity":"sha512-A6Qd0fGcpZbrRrtJqBuoQvBGkQnFIAS7xfayQxCpn57yA0Ab8pO++CgQs6QBv1JrnCEPurUSFJy4gKNPPtgPAw==","signatures":[{"sig":"MEQCIB2Axy5DA0XcKwL3anI3q9CRSD6CajBsaTvG1swlKe1WAiBoz6Xr1xK3PXWK2FKkkXvrXG8NfuyjFXRYhtpXMx4XOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE61CRA9TVsSAnZWagAAzHUP/jcLzyXGuGkGTL8faypF\nhLn5xIpQ+P1PPsPz+Z9lJ54NfTIBW60j1cG5XsUhdY+2+UnbiNkdxTlwzJSH\nkNYIJlAj6fzdSlfAjbmCoKC08PB7Hm6KXM+YG71VHnPEJGkJksfotaQpoVqa\n6W+4OszMxbH51ICY2gNw0almrKtUxdZbIdki+xuY5IxITn/6zjIjb59py0hg\npfiMGezf6qMiijSFB0bOKfKw5TOP6ePrIAu4DvPXevSrrIEKyhWRLFdQ466z\nGOz5J2DyKHELu88+VWwuF9u/5REm1Y3Ro2sFBikCuJe6w5BmcvKQpF9f39az\nyOxM/BFv3dgDECSDgp15DYw+v0eRE6HUm9ZZOVLzehJ6j1xE+vwUJg8dbCrV\n861FcKTZGXYPV6N33E1FQYTpxurtFDPnvtPXWYWM4uctOdhzWqjGS6F2w6lv\nCy2UUJ1hV2sSeJnm2wM5AxAe4wjl0qw6SqMiO0Ct8cYLIfqvE4A8tmvKoBX6\nVdBVNOJ1KFkvl1J6fjoXAnYvwLubUBs5srYlNTma+TIUn+i6XAf6CSnjW0Y9\n7RBLtZHDydFmghvgF6XapR+8H2T7EaV5Hzuh/dwscuCGngKXqaJxy91bbCYo\nKnoW6CK58BlciclewhzhTMfeWPKO8GO0AB7G5tdnd38lVx7IVq/QsmQYYoRR\n2fAr\r\n=UlYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","gitHead":"4752dcadba6adfeb006ee3689e295db016f4bea3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/rtl":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/theme":"8.0.0-canary.e1bc84d10.0","@material/button":"8.0.0-canary.e1bc84d10.0","@material/ripple":"8.0.0-canary.e1bc84d10.0","@material/typography":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e1bc84d10.0_1596477108647_0.6043095338016287","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/banner","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.096a7a066.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d98be614402aeffe4498cc01c6a699672e749fd6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.096a7a066.0.tgz","fileCount":41,"integrity":"sha512-Aui/wJs8ttzYWXi+Ycw5h8nBgEZ3tBn2XI2aVkxudL3bcQnRpf7+GZBKpP0qxdSFiD3PEt8+1JGQYLGDjL4Weg==","signatures":[{"sig":"MEQCIDUQcz/06vVohmKeIs3ASTc9usxC3XWnugXztqXVau5GAiA8UDc/MxjSgApesq6m/zGoZBKvbybBovzfxKUwTOf65Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE9yCRA9TVsSAnZWagAA2O0P/0pDHN+oj87Cphbp+OMf\nQ6PhfsA+lE+f/eXuUNb8+j2PNHwlPCX8w0uXRdBY1ERFEEVGQF8Ru5sp0j8L\n3cD7SpLt2DnFnKXz/xI+8N92/e+iLXqBDyIhPexkVD3UD3M9zlabaOiw8ale\nMspswZg4bmYt4q0OYASAwigaUweQMXdLHpp1Pi3ax/d8u0ybWcC89tUhxRXG\nyp7NCmBkwtjXwaAHsQflUyk/2qA7Gk/VQ++6M8+zaouIDumxzpH4O9vCgQuM\nGALpoQwu2f/R8gMrv3ZIUFByNC/CNcW+3TJOLkhCwxmUVUEHGshn6LUmsmvE\nwyqSpYkI78LhruS7wZBJPI68ITDP6h9t7s/LQ9g61BomEoOEhSQcILR8ZHV4\nv8+tRFwVv/cuSXhku+PZKeezmoyA0RZ5UTjqSb0itoJ9G5kX7ZIb1JkfG3fi\nAagVx4rwnT3Mpdg50jDkxSnhRFixGuhhtO6Fxdy/WKsbhiOyD5r5fNXzv88e\nu5OPP1UBaSFynqUQfDxn9e1hu+M/k0uwxLGFSVQroEIn3NxbtPQsPbObZ24q\n2tVZ0r9kx2A5uugid4OH1PP2b0UHMtUHoAJfjqggFx1oqNIl1N48hM06gCdF\nu66i2o2HDyPCQzVJDPt6PJ1jwKl94f7nOk8j9nLifk/RTAc2SFcOuKEITdg2\nOjgP\r\n=rcov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c1f4491c464cef40f62d03f687af7b443805fb7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/rtl":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/theme":"8.0.0-canary.096a7a066.0","@material/button":"8.0.0-canary.096a7a066.0","@material/ripple":"8.0.0-canary.096a7a066.0","@material/typography":"8.0.0-canary.096a7a066.0","@material/feature-targeting":"8.0.0-canary.096a7a066.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.096a7a066.0_1596477297826_0.8043637743643495","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/banner","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.aa3a3e5a4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"680d35df34dc8fa50968c454354acc87130d448a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":41,"integrity":"sha512-l/TrPokfE0XblKHPe3su4+5Kv9i69lZwY036mwMh1hwvVtVzIni4052XJiSqSlPe1q0GzO0g+BsOZ/Qywbnjwg==","signatures":[{"sig":"MEYCIQDYOY5WG9ZcWTO58a70XSmLmSndaJRR49Fx1u7bxX/uCAIhANv/gdI6kCXlrYLbAqQgNV+2Gpov+714tm0cz8YckBua","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+aCRA9TVsSAnZWagAA3GAP/0AtLxVOc/OpeuIrovcQ\nqmieIB458TqiXcwXv+I+21kyLLnPQeVQqd94n4tn3gfmhe7VtQBSSRGnbXQf\n2a/2413pko77cx0xrhQ2iQCofJhCKUKw4nUmFF6MBDa3TourH6QnfQX/f4K5\njTCjERJ3t8tj1Z/GKlA2gq412E+Ayl5wcQ2XbQpF6vMC6uhz1n38MG9mJ6x2\nRz5qQFMgFzItls9xL/brpUX2IPeO7T7Q/n1sUJmLHK9YZCgNBfMfEEzcJqlR\nXH0wi9d0SEEZOeHz4OviyfxGaktnKyHRLRAFQnS0kbfO8GgzIWSv0y7vFIoD\njIlUlDYukdS3RbFisxpSIzfVp2P6NcqeiEcpmtFQMs9y8URgiXtKSfem1g4W\nnqvA8XlRZ+w5IUVWcZPvFWRP3HeJyj4k78yCVH9UQpUr1KUHNfozcgJPaNck\ngP6X6SWM8uOBg3YNC3mLWHve8gOTuXJoshVWKW9XwEHRI2xOMvPWqoQecMcI\noNwSQaloKOB9/WRcphRtGn+RPXBrvnNpDBqCG8yfZwMPBt0l7D/eEXRUsOzg\nd3PxmQ7q8U4MpPVqc3cusguA9M4qLqIYULUXk8bpgMjRw+fDsClSlKivjvdu\n9Hl8eHsayR4RmypSy32hoP+p85WM/FexVtAl2AnryMk/JRVuA5m7O4ee2hJr\nGhx1\r\n=ee56\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8e25515e9c171e19310cbb58630a760408b78c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/rtl":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/theme":"8.0.0-canary.aa3a3e5a4.0","@material/button":"8.0.0-canary.aa3a3e5a4.0","@material/ripple":"8.0.0-canary.aa3a3e5a4.0","@material/typography":"8.0.0-canary.aa3a3e5a4.0","@material/feature-targeting":"8.0.0-canary.aa3a3e5a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.aa3a3e5a4.0_1596477337581_0.7754780156692074","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/banner","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.5903d39af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4e074f561240b008ad0ebad8d32736cecbefd67","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.5903d39af.0.tgz","fileCount":41,"integrity":"sha512-n0L8I0hIwVWH2uE1iKtVuGqkGIa6QYy2cJrBegEt3dxmINZdSJZbqDzkc7gAeDj/X59k/ghc3FLVNgXO8b8D7A==","signatures":[{"sig":"MEUCIAyO+hL0iYNqsEvYvFYXecvmdOSw69N9dgE6tgmTQ59wAiEAxQtdhIUa5HCmt9iR3rf3VW97VSDzkZRpsvuanF6sLJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+wCRA9TVsSAnZWagAAdN0P/0b+B0GTm6NPo6OenhKN\nB+h0Gwerw9eotus6dSACzkHdRp3oGPMue/Uhh8hg4irlUXemEaOtIpC6+kzI\nOKKssrf42MIWhCkF5dJ76OytW+50ef/D60IkSgdNS9SBvFu7ybQ1WtRL6nwy\nBRRYH+1fG4Nn8qRLHg5sp0irKiPxu9XRvKF+tDE2+vUg3pieJucU9Gvb9lm6\n9rZqdqYrr20ZfJ7eI611/fZSYcxL7zZkQE0VuNzQeN4krrEMEXI8ajhsEV8N\nYeYSZYpp/7XNCri3gNytXcwuhM5v8pUSQ3mk+uY+wtudb4v2GcI9jB9MHlwF\nhtbX841kTkzo/ZXOvsDkTQZfPZXbfmg4aRCImHVXzrlPIrSs2Hs+pKQVmQbW\ntRRYxGf+p7XVjozkr1foDL3dE95aIm7UTq/OT/uavxzILQvSObbGABKbsxwJ\nLE/zFqnJbE1/jlRgTxF0WSbT5meGwFb3e7CpLB15xh1N3NO5nEukWTQpRvvz\nGIJ7zEa0mJ+9zRlhtV5f97g4lzGLOclqTj8ADcFjqtInin+/ejXQV607teh4\n/zlFooXmbUonoYSGrsqHjKZtmxIJrjZvoTwYYPU6htXjOekIJCHvg1kh2Z7T\n+tFFEFkuBwfWH+YPrZVkF4WX0kDpiYpqivt4jmbjpCbOL2kxhcrRvqoM5gA3\nrF/B\r\n=Fxz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8a4f2eea8ac8483e7e0a1c93b141ea9dfaebaf4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/rtl":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/theme":"8.0.0-canary.5903d39af.0","@material/button":"8.0.0-canary.5903d39af.0","@material/ripple":"8.0.0-canary.5903d39af.0","@material/typography":"8.0.0-canary.5903d39af.0","@material/feature-targeting":"8.0.0-canary.5903d39af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.5903d39af.0_1596477359932_0.517491258787091","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/banner","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.72258f898.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9a40bef024edb7b5e661da2723d8b9e3435cd81","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.72258f898.0.tgz","fileCount":41,"integrity":"sha512-ZybONs2uORVvj9B7q5BoWp1KAgGNZPvBVe7FTMYeROzS53nZ40Bi6y+BFbyclFnIwJP6PmtpDRY+WsYt97VbIg==","signatures":[{"sig":"MEQCIEx6M8KXrXu83mVd+I0MvAFWAcSs2w/RnCBssf+jULHBAiBSsUqFr4qLPWQjIk4w91dh6donkcmfa6M/sPyUlRIY/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdkCRA9TVsSAnZWagAApj8P/2VIldoAgxK07yA/l8X1\n9x0JmYIVytJ+/0RvWSo2khZEdmT8X3v7JUWad+STPvjJVll2CjNEq6pIKGbO\nwb/hZOWSC6ACilZNUfhACR9CQ+VJMUlMQr3AfwIfhupJEKz5XhnfADm4sI1o\nXpMy/UWOg0/zDgW3qmadnV/7J1c1MC48p+0qFAbQ7kU054qj+vPUcbudnWQJ\nfWHr+steQulMOxDk17ndGZrGq6wDoM34zIixF5ctPmsB78NNXjkl3a04KLIy\nRaBsmo1blgTFSv9a2ra/YkjfCpfGTneTUzK2TdQEOUp79QNrLdWZ9+dlGGEY\nlFi9XmrC55TZWemzarA1OH1s9lmY9Ubdff8smZM2g84lf1C2ps4bgRSqDlhE\nuj7NfB5Ks3jy3jVA+oCURhbEoXBPmW45TOHuvpLbywKXsJL80ky2EF2JEHHr\nRJuTc9VyRLjCxVX3e9Wt0butgekYW2VXtby1/Cu27NHJ0rH1P15cPpj6cVGw\nryhbhL4Disn//uULAGeXAjLzJJTf9PM6AXEMLu6V88pntfy+heW1WpJjR7Ki\nv3EbTO0MofbNdy9CUzdtHAJtc7u3wSuwD04HJtx0Gcd/bLc1aUH5ksbTG1Q9\natT424eXI6eDbLpf973eWnJuvYyfHWD5GqdE1lVJYh+AoI5etsmCj8r67r50\nEkgX\r\n=bz0s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ff2c64799ee2d684ba36b9cebd15fbe0d0ed17df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/rtl":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/theme":"8.0.0-canary.72258f898.0","@material/button":"8.0.0-canary.72258f898.0","@material/ripple":"8.0.0-canary.72258f898.0","@material/typography":"8.0.0-canary.72258f898.0","@material/feature-targeting":"8.0.0-canary.72258f898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.72258f898.0_1596503907606_0.5259474554383392","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/banner","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.1b44b43c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e13232e36145b5e34db1c9465e0bfed92ef84f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.1b44b43c8.0.tgz","fileCount":41,"integrity":"sha512-+KB/fpoVZGIKLF113RlH9j+OPV0Z91ehquROWGr8UUyT14IHVG+9e1cWV+qO8pzup8ZnSwpMQ0aqthEhXrlQ7w==","signatures":[{"sig":"MEUCIQDFSflMAqE+qmesKlJSfNH6/W6W8lbIIqr1I2aUbYbLUwIgMwNuXKChKQrK/pH+Y4fk1RpMDWwHAx2CpoDVfoTpQG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZGhCRA9TVsSAnZWagAAmAUQAIUkqs8ioRRGWfczhK4W\nlRs8naCPrFA+A5RMDbGmHP0bVx3gUH1/z2z/TcfORs1iksnwVCetklaTWhgS\nijZi0X9h5DmCjQHDTwTmQv6QiVXtERDg0MgnbiNicpIJNORvA7pW2Q9Ixtct\n1YZ0WbBvbWCWtaxdm33IRQgumQ5iJKuoQjxnF2S3ka5jZdG/keO/iuvmetoq\nNC1ZQf6XTYnCS7mAIAh1OX5RErsHrpvxMbuHEaBJxc3TA99f9TgWrH/DWCui\nwXCn6wRpL+O+ZiOn52Yn3FXhdE9mFf1sTS+Ee3s2qMBrZCrP1oobWRjQRSFT\nU9RNaa0i97vRD0nw/KPQ52B0Z3NAAgFN4nykbqKqJIvXVPBi3Xa+IZiEldIG\nToFwHySM36qDOhFnq3K10mWaO89nsh81xmvgfUJQ6q17fwc/fKW8kfx7L+vl\nhNcJ9puXZ27Ijj5SH2lGA/eeq1yuTYzNshMsQeFhLtHN+8pPnCdDH8Cpy2pM\ni83CdRvq9jdzv9z9oSiQ/nJKe7rBDBKshPMl1rnrkjKEu8NXXa5C8u4Bcg+P\nqrqTiuqTXS0I1kTLQn/TRvjz5nHbiVr724lirRDiP5ne7DQTYmWDx40s6kS9\nY7TWN1RUvv4zs4gxz+APS9A+NWEZDWPnRDgoKH1dN0bVB0IeEGMs7oa9BS+2\nfB09\r\n=92If\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"69ee70c646249b45b57e59e958f1ca6d8332dec7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/rtl":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/theme":"8.0.0-canary.1b44b43c8.0","@material/button":"8.0.0-canary.1b44b43c8.0","@material/ripple":"8.0.0-canary.1b44b43c8.0","@material/typography":"8.0.0-canary.1b44b43c8.0","@material/feature-targeting":"8.0.0-canary.1b44b43c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.1b44b43c8.0_1596559777241_0.29824765333501113","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/banner","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e9d2e2f96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4514c25957611c57fcbbb54e589ae3f8b768c68","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":41,"integrity":"sha512-xbAHTLu/JKfcPSy0mnAOS74FEt1QzwcTLdgU2btZKKK3J3C+/IZoZ2snzVvMMEtDeLWhK5vjCMmwopFxW7anIw==","signatures":[{"sig":"MEUCIQDKDPFUteT2HKP5VbiFBGAINTJ9Z7tnNccq+tELrfeZsQIgabNTG5Y5lPRdiIVZ9LkmG28moeSqCjLYvQnoaun9/Ng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQsCRA9TVsSAnZWagAAq50P/2h8HTgKLSyAXTbaNhzb\nuFAlYPUTQ4qSlYKrgEKj85RQ9yLA5E9oZ+lK+GDpAJc6g5B6t6xxwX2UjI+r\nCBCi6r2OMoq8t5lb7DpcawSpq9qlbcpJ4fZxcXy2jd8mWSop2TfTNwWfXwhU\nDW9bkSnEL28qIZ3dKc5gshLFVNiM8SVEw27yLfYvsxrBaT0a6p+kkHcysXGk\nIs00gJYnlGlZZcJPvXAELswXQ3JActPbX0W6baeg40Xn07NmFQH81owdMUf3\nbVocEZm+hg6L4RmBq8RPsh2z7I/2vtaC8pvjSjl5yZxf0vVThOWyxK1n/c2s\nBZRxCb4wmGVZy2ft6Wk5Ztvo4kTJiwA/F/AoEYxFt5XC7KcN05/z3SJG8dDR\nG5xB29rTfsT6w+IIPhKCXQgybFsfpw8zCgElHute7xOrLCJkxVkKy/XMU66l\nivplxDbWfo1w4Sio3jD1BBKJMEPbnDbAQCXZ6QZxxmX3Au1xkDC7IF2dvqKa\nxD+p/PTzdcxbh2471PCdwrCFHRHrd2TFZONKq5rt/QpWRReB6v+VNZVlFfY3\nSbyf9dFPJ1MOqrJUU9+4JMSIOULgWMfkLVQPSZ2hI5q8mAlSnq9Iu+SVAvVv\ndognF9TG2qkICm+9G08rm3msKUvi5b2TkX2DIijRWPpOeRSKzD33w49zfTL3\nlXz2\r\n=sTHP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f6bf51788bc1f39067fcceced79dcc12b2c59caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/rtl":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/theme":"8.0.0-canary.e9d2e2f96.0","@material/button":"8.0.0-canary.e9d2e2f96.0","@material/ripple":"8.0.0-canary.e9d2e2f96.0","@material/typography":"8.0.0-canary.e9d2e2f96.0","@material/feature-targeting":"8.0.0-canary.e9d2e2f96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e9d2e2f96.0_1596572716338_0.12531559940051173","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/banner","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.b9dff0a19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54b51fea8f4b5b9aa1fcca8cc8d1a1d4806e06c6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.b9dff0a19.0.tgz","fileCount":41,"integrity":"sha512-aIxduTiHnLFQXtcRhb6Xja70n0Sq8MeojfMKcY0Smos1FnR3VhuXqbwHNYTnub/AAg3Cagowo4K7AbixplWcDg==","signatures":[{"sig":"MEQCIATIQfPoyxM2e2s/RMcjpS/5kgu1rjizlZdzBHEYnz9OAiA1aQbDqmJMxtzNTgamc3Wud9oPAInivsZwITDcThNjmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKixpCRA9TVsSAnZWagAAs4AP/1bXN5hKAcZ7CRrddaei\nVTx9mD6bCs6kfU50l7oTbg/11a8Q4ACdJg5CZX4O+fJL2kC015kg0MxZQEYO\n+GoJs67U8pd5INdhzlqPa5gwjRqEO1dLAJEWKB90Wa3sY4+z1FXC7TQkiLsW\nCVcPSS7iPZzLRJjOQDxIPYD15vnAZQVpva7meV86UZZkSZUwgyKLQi26+gal\nb6l1ycBjrYEtzzoAAb5lDKQKZEmYKKCLRvjSBymPiAPrVcNHS35ghkEk4Ge3\nRYJkgbjODDpk6VpICCI7fbNtHHj2iTorKo9wWHYhx/lKTASwHEM8RnC+Ttt3\nqRfG9yM4QfMROjbNOSGAyjqRSgrGot3dbQgz0mi4PaIuR7POqaxigxh7IZ6h\n3rJ8cFCJsG+JrvpoAvX1/RLt5Uf/LTjCjsjiHwBnf47GC8f4/t5T1QUp4k56\nMCq0OE/c/P5nv6eiqYBIoRD4sM0evcEBJGBUu+ry+rGcnp7+lBug2lBgBrwR\nX2h/Wc29HQF+nGxpB4Jce4HCFrU7pB4iboEAlb3XEa98m/oydPflahwkViM2\nGNGxDnUap1kgiAfaXAQDmGSLVk45fl9TYi/yDjrxO8+7C1RdqsNm0ZSP45gT\nkKB9rAq3Vz1J8NPpiALnEfzvpJ6KlAEWQAPD6psVsa7vv56mnJHtbql54e+H\nwCI+\r\n=Tzyu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dec2f9fa4c83e98bee860646fc2a65b134a7900d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/rtl":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/theme":"8.0.0-canary.b9dff0a19.0","@material/button":"8.0.0-canary.b9dff0a19.0","@material/ripple":"8.0.0-canary.b9dff0a19.0","@material/typography":"8.0.0-canary.b9dff0a19.0","@material/feature-targeting":"8.0.0-canary.b9dff0a19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.b9dff0a19.0_1596599400614_0.7636144831170728","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/banner","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.2bd09a706.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c6e18a53496bbbdd270473b8e725c8ac99deb91","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.2bd09a706.0.tgz","fileCount":41,"integrity":"sha512-WQz8LeJAl37+Qt05/wtY1MrdQQrIFIFgHm3BZjll7SOK+kpJoqHVEv/OTfLkwEjVQBj8T/lotzHuSXU70COOfw==","signatures":[{"sig":"MEYCIQCojgpHQlakebTHjjoDX2M0rMr+w+WbJscHaaC5KdMRrgIhALbe7jWdWoUr0F4kcv5g212v7OW/gP79ZQBi5wUV7sEY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2fCRA9TVsSAnZWagAA784P/jcgG/rzIQgh1T5TBVGX\nrqnqpB4eaaAPjy5SnXMqTSRp4uCfpPKHjtzBbpp6pWpNGX6YSksmgdlY/HV2\n1doNzfDfOBb9ZaexEydYZB/7gZTy84ohFoWg7FHvGbzYhtKwZx/AxVWDBipG\nTMHTgwS6CTkbIi44SL8sPCIlnJbA5Sa6JyT05EilwYcUlGuDbP/TOET3d+Kp\n63BX3ndTsk3sdxL06qocFd+6XdytCe8ClKnK2CuJJMYvmkitQynvwN4nIR1b\nseIxZZ4OZ89LMXm3dKyst3lmXRl2n4GMOJoCR5ro9SqTW/qZ4/YZmaQrN/pe\ne5jMvTLbWLees5BC5hX/KFdE1/CtwqM821+aRc+jXsjo3xVdNJa5p9UZIkvr\n8LCkaE7+w2yd6RlopPgIcl1nOAuqKKDbDmQl/13NfdSinZHNrc3K5GT5Es9h\nmxe8BAloP2CRXgEKpmO3+XkZ/JN4dzhFI+1khxrhBrBg+11HwtqWpHk3rYEj\n98RK5nitYWf82ap4bDl8xbSJxkrFtoqaMfjuMwerSdp/NCTNSQUvZzFlFJkB\nNiBdDIir06A5jAJMdqQCNRu0a5YQKZftRHFGpMuRctreV/7gX8Ji1toTDKeu\n33HeQyrt8bBnuy6PqpsakjD2kf2HK0h4Urk0Hm2ZhymJVbqoIeFGarqDDuIW\nbxN7\r\n=9RuI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c8b061f3fa8ffaf5214e79fe44f6c575216a1808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/rtl":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/theme":"8.0.0-canary.2bd09a706.0","@material/button":"8.0.0-canary.2bd09a706.0","@material/ripple":"8.0.0-canary.2bd09a706.0","@material/typography":"8.0.0-canary.2bd09a706.0","@material/feature-targeting":"8.0.0-canary.2bd09a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.2bd09a706.0_1596599711334_0.49486013596878564","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/banner","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e0560522f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ae078a5ef478f2829695d951cb2a3799a5804b6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e0560522f.0.tgz","fileCount":41,"integrity":"sha512-R9bZfXSLq8w6cbkC17uhXyxm0XqU/PsGKhZhZ6bhT6gxyUXCHKsXjD2HTr1ZuE5njqBGFqVweBt3zBkSEViBYg==","signatures":[{"sig":"MEUCIQDXPa/77Bi4BibJpP0xYe7aOz7Nmuz5Z0GaTOwMbf0cjQIgHrsf6UP1CcHKJ0G2j0AElGItfxtpJmrUE+AOOA1RlPU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuqECRA9TVsSAnZWagAAnacP/i+R/rAr9fiSxB0lKG1s\nNLEB3YpHAk8UR1uYOTW7Ts/MJWHPVlGK4fKtBX+kkB1evKJF6e745JXiryi8\nObHsHngSjHQKexT2GJ7PedCFomt7t9p+rAK83EqwkTaCYfzJ7N1i+TO+5NZJ\ni6+XaVkepvJHvWwpS+1NE81Rj10wtnMvjQG37IjkTcCTAybldy1osgr69xNe\ngiCr81pF0t+FCAH/ZbS3CW5jG68l4fKqQ+6Ujytm5k61mhX6t8+Q+vfOExb3\nhEuuzQioHhMc//tJgXavxuT+MvKzJGRZpXszTdP4yiJi2wXIhBtzN9i1JHX/\nHOPcgWg24WAQkpzmYZh2u8FzS+/YF5cg/YJGOUfoUge94aooasdmrmg8qXrP\nalJZoXmoFUjUV5nGYOZGKJ5nOSmCaTu3g1Lu1HLdPCK/b1QlNsBtVDAEeHfp\nXEN4GEKomDrWRwMDXh8NjBTSpAFUtU69BSlJkP54zxb65KZ4UaNGcuEP6BUj\nCcJlSAWw5asANb534cfop/JsjuAEeBNazhW8n2JKPQgEDU/4HeVzA43cfzmY\nP0WiQjx02uChSHsH+QK64hwtUD5O/spJBOUFGEKL891IRCpFT/5imfNK75tx\nlHdJ/K3ubD5Fq/R3FD03jhpWX/raen+wT2TNMPi8PmIxkemAnfmXpL4gNUFp\n/PgV\r\n=SfCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f4f71f168da3435c5dd1bb74e7ae0c54fcc45746","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/rtl":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/theme":"8.0.0-canary.e0560522f.0","@material/button":"8.0.0-canary.e0560522f.0","@material/ripple":"8.0.0-canary.e0560522f.0","@material/typography":"8.0.0-canary.e0560522f.0","@material/feature-targeting":"8.0.0-canary.e0560522f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e0560522f.0_1596648067876_0.6531263705076993","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/banner","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.08ca4d0ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc88fc5ec4e6c90f931ea5c254b43d3bfb3f556c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":41,"integrity":"sha512-pZKPs+bhux4L7MZYNMIfBob4lbJhmJKNfoseydtlacQYFtUy7FkBZwWgVuMjsXL5JqYdKXDwy9tKR98RU/TcZw==","signatures":[{"sig":"MEYCIQCM7EqKPeUPVhjt5eEuya0ikq5Hc2bSJuSVqOyORJ1jLQIhAK14I3q1LZdJxxzZctvFoSSajJtz9cCTSN9O0y8bTY0U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu8ICRA9TVsSAnZWagAANd0P/i+aviu05N6y5oOQaXSB\nTMTG6X2Bnr+cMOK7ccYfe769hBmYh9gs3ypJvGlXYtGti71j0KTOhgAbK3Me\n5HFj37IfUsGqTt4nkRMBaWSytC7wEdd5WvrvVNQbpdHwt+cXei/sbLWxo77M\nEUYA817Puzt8yJZHbdO7jzolHKnq+N8GAd1ERTLox1dLUGxyMu49OmOjW1j3\n31ropuA0z7wKCxF64DchdFnAHmFbFyftJKvo9rQ5nMq1dzPd4OIv4qFqkgyN\nQbwknSC9zxL1MbDwP3viGDccZVQevX/Vph6A4Xhj92D6QZ+tOeL4lvpFs5aX\ngODgtx75MtxJuQY4hRl2jnuCrwtZmeAI8u4+3qJl8BpLRIWEG8wXXFkQ7Mb7\n+M3+VjY0m7IoFpn6T0A/qfpnqyF5eMT1uGiLp5RYK7WtemN6WUF7xxp2Jubn\nZWSlCYWoDSNqNXRJC4eohPep8+PqmQbDb+iox1/1gDKbgMbEMjyfCxateD1c\nF7P3vYCCMMelKxJvGDzqFyhhBZjbdPoSBA6pZazcVbaw4jw9Jq4v+WHE7lvy\nAxb1wZI2oxzv3mxynv3E4ufUAZbczsyjLLtBNnw0VAGEclB+2AG8SdJgLQVg\nhV1SUfedx+i1uDB29R3whn7Qpjwz626XaQJQZPZENx89nvAfLnGhkqMlFSkR\nQwO5\r\n=AOaK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e525a44ae67401224e06885b43f10017ae70f9af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/rtl":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/theme":"8.0.0-canary.08ca4d0ec.0","@material/button":"8.0.0-canary.08ca4d0ec.0","@material/ripple":"8.0.0-canary.08ca4d0ec.0","@material/typography":"8.0.0-canary.08ca4d0ec.0","@material/feature-targeting":"8.0.0-canary.08ca4d0ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.08ca4d0ec.0_1596649224156_0.6500122169779303","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/banner","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.08090126b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ac52401f366f725e3673eb8287784edccbe42a2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.08090126b.0.tgz","fileCount":41,"integrity":"sha512-MJfd8yn+r7fdM/ddhUeOyCxPzzTj5+J38oXQ/zG+dMyxGasfBbsvvNvkiptmZ8MOUSTe2mvlygXoueyy6BDDDw==","signatures":[{"sig":"MEUCIAN7aDsJxleJeqFKy0BTCcqCM7mk4Vp3FmgYFmij5d0GAiEA9XOStibvv1g6nnC2EiKhRtDL/nLZ+u7jjyPFgR0VT4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFsUCRA9TVsSAnZWagAALQgP/2gv0JJ3JRxgeifqRPJQ\nkMmARLVabVw3w0FHhpc7f2cjMGvHwMNA9YsuPgwSw+oi9jCkZc3N1TW716+H\n1C5SPibqCtdBjJ0zkaFlD4aS4bJ5miKWY6t+qTV4Udl7Cw5sa0VcHh7n90xZ\njel4uR2/LQ9CrUF+h50Ix5x/nS/B3AGM2NRQa42wBARQVNGB2soDG0In6rWk\nQbWjbejfrvp/9mcqvUi0/PAhLsP/80gapRyZwcZok/qso4yCOUEtjf29DpNV\nR2npwB4L+jQeC/McvqzuIIOFcdm4832MaM93+fZEbKiXYwDH0aWT23XpZgqO\n2pxHWHPDwftcMv+df5DJs256O9MPXcD2z/9cQRJnpgWbbXK3l6rSqzAlklJf\n1Zf+Xc1Ms+fS4LoCD1K90rTZxvMQzbrzPV6737IwgEPXBgVZQyb6Sr2h7Nbw\nzCzBbP5rwHhhfL+AFFgcLtk3up4DP73fCi2hQhzNsNj+JjJZ9/kALulZVNjb\nj5m6eAwVI7l0/6vvByvUtIlers7tTllSddSqrz3P7bpnCsT++EgYWg1vJ21H\nh9GonYu2RrOTOe5OiAgc/yrD6DMKXKuKBLQ6Cl8gYYcKVxQ252TXtDy/pPq2\nDHBCB5TvxZWGylPm5p3pAHnI+jDbV90ITHeFcCAfMfZ8f+mSnm8BG6Xzv9sA\nCuK+\r\n=ugQ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"92703c0a9dad96887725176e28a4ac83640a3b34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/rtl":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/theme":"8.0.0-canary.08090126b.0","@material/button":"8.0.0-canary.08090126b.0","@material/ripple":"8.0.0-canary.08090126b.0","@material/typography":"8.0.0-canary.08090126b.0","@material/feature-targeting":"8.0.0-canary.08090126b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.08090126b.0_1596742419527_0.9743708878808202","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/banner","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e8bf5b2ac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c229b55b3cbf4fca0036c6b30e00db07f9c9727","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":41,"integrity":"sha512-ya8Zk1opzOvp0cESk5rb6QGIRhgtvoeFSVkaJE4I9yPBE9+y1G34tAw/W3YLsa4nP7Xgz5KbnMJ6/PuxOKREuw==","signatures":[{"sig":"MEUCIQDKng/ctQNt95MlUpFrEeQWEvbx15ZIbbcuxWFtAJr5XAIgKQ52FXodyiIT8rUhC4mdU+tAEvp+S0m77BDB74F6l0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHtJCRA9TVsSAnZWagAA/3AP/3PWWgPuPvwW1mZePCs3\njE5VLE9cP1phsstwwTYuHGkU0wKlbMey/9pGIJ3TRxNeH/ULUmvIjfrD5NCx\nuVEn3CVmcVz7Lw94Z764DHs4Q5WzNQSQTMCkylGxpoBE5Y+u/AhZxp7IKKBf\nRVIT7cwRnCualYgS36hoQIdf+vKoGkA83IgQ8BS/0JUdSPSACQ7x/JzcIXRY\nWZIi2OEItIRbyAfjm6+uc8vzaI3vIRK6yriak4782+pY+/0ceOsBlcRltKqv\nZYGTJlRIJoPRb9FIzwAtUYRsUweAvutb1s3GcTo3VZHwY/mozJufPMalkPMQ\nA+hTsrsiqETET8T82EYQxDjV0wtwV2HsUyvgI/VAFl9RfKQIWO7o6gyxARHS\nunfxJn5wMFn5hXrLWSmWxvhrFjcvyaZKkBKG8pHJkT6WFMrZ2kMtu6DDuL4z\nPnPROPc/IG+TyWglMSF/bVPQKwv0I7sbb1VtzxLsGiIoYKCXSA8eBACsiRfz\nLLGCL/n5MwO5PPfiaII5l0SXAL8mItT7QzfTLomUWbBGohTjWcX6qm3fX4Zo\nXYyGfCQkyIb5B6mzyakYls6e7GrSCCI9ZOgHJQtScKV/cxIbfYIHUtw8Camz\n3h07mbnljLg5qh6PxSU2dYYc/0JeVHk/uXVexiPnKy4jEr9kqG8crfBkXeEN\ntDWM\r\n=dk8D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d5fe47cd91dcff7cada8ca9b587eb8a924a211d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/rtl":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/theme":"8.0.0-canary.e8bf5b2ac.0","@material/button":"8.0.0-canary.e8bf5b2ac.0","@material/ripple":"8.0.0-canary.e8bf5b2ac.0","@material/typography":"8.0.0-canary.e8bf5b2ac.0","@material/feature-targeting":"8.0.0-canary.e8bf5b2ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e8bf5b2ac.0_1596750665082_0.051924300337678364","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/banner","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e3b746208.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55b3dfe3b4b7fe011da98043fc4ad2741effb5ec","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e3b746208.0.tgz","fileCount":41,"integrity":"sha512-smzQGj/wn9W/z76oDGOSkvjE6fjoHgdUQT0TqH6L5Q9U7UJGKITR/LJrDHQKGJGIXKumUR/4UPHUgogBM8biZA==","signatures":[{"sig":"MEUCIQCiqn7mrV/P9Pkuxk9JDwrG8zlGiTN2Z9PCiJNXycF5tQIgXXj1sqpROcG8GHLxX8+2FxVW7JKME9LdfW2VPsQ23AI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430434,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPmCRA9TVsSAnZWagAARTcP/2eUuZ+91ECuS8PlhXeU\n4PbR00WF+QsoC+krjKuyAxf9N9JnsbD0RZ3G0proYngquxkq62QKpPVhkW+p\nfekNuZbytoPENbqqZEt0Vjj+u9oIVpWy8R8VKWo+MnKAW8zlyaxFv2Mn/qV0\nDz4QKBT2iTIJN6OrBK7FC7HjX6hA6wroZLuaaNwdDSUMwyGLwgFW7lyq0Bwu\nnRllSB4Gzuv0C0sehi0h6CNlAl3YZJ4D9b6HroU5ltyPkeFkfLKRVnJji8bI\nfHTOmQiMg6phy7NfEKtgERThRzF8DyG6cFucMakQQONhg96Q7z5hoih2OXzo\nsFzWi8URFprMFezZKdRuq2J2DCOIss10096TZ4Tkhw5r+n5C/qjtWH5YxxPw\nEjSatyyX24DwlHElRj4gKgqwQqCzOfukWBNLbHt4XoZw+pBy/EwEyqR6TL2Y\ng5JLWH2ZyHX7o+zVVViSi2T8Gm0UFRtdUAAwlAoQI7zyLlR1Xl5Hfn19ovFR\n6Z7JiWiUQs+fv/0IFLiCk/UhEoJ83vZuGt8HHyAbTy0coMsxfwTS/cxLzVwe\ndlm+WnrpCRoiL5mc81p2JdycdkoBSNUVAVXYXtKuVagtPQJSQ1ArQfSSgMSh\nDpLe1EnN304jsgOmp0mYmIvXjGo4WelPW1cZoqkGgvlfsS4aCR2yKt8yA/rP\nLlO3\r\n=Z5nF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"565f03445fdfa2cc653bce8f5c730176a406e5d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/rtl":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/theme":"8.0.0-canary.e3b746208.0","@material/button":"8.0.0-canary.e3b746208.0","@material/ripple":"8.0.0-canary.e3b746208.0","@material/typography":"8.0.0-canary.e3b746208.0","@material/feature-targeting":"8.0.0-canary.e3b746208.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e3b746208.0_1596752870090_0.03595740071599396","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/banner","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.96a640534.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52895bece11eec21075d916ca2115aa865db17cc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.96a640534.0.tgz","fileCount":41,"integrity":"sha512-ce/V1CK+j3GErbq34UipQ1nd1GE+K5rEQOJlzroyd7nyZJN9df+zBn5Zb4iDZi9i69R6xhAx6h1egFZkUs9ZrA==","signatures":[{"sig":"MEUCIQDDEEnpWMH5XBkSS0TWEHr19iR8fnfvk4pBQwir0gBrTwIgdBUhV+WNqtTN/yktC7qcREHi/OJOy6YChIKkQ6QPiPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdYCRA9TVsSAnZWagAA/ZgP/2R82RylbKanAVFVMz6h\nH3rNhcNHM32CZk7bMc/aBN7GZ0Qb5vtyJwrkwo7Q7Hb3HqUyZYRqqNnsjrdq\nTTSiUqC2PBSg8psLd6z4vTNo0sujUW+FwfS+twn/TLnUjW1ErjZL/IXA1dHF\nIrtb7x/5v0kjrk6w28Tygc0P/N8Hfsrx12JHGDhzP7E+iFTsmrmrVUubunM9\ngeFlEIp/b048ypT32BoE9hsB7yuO84iVIxKUpaGPf+JEsCR2n3Ijl0GzKhXm\nM1Vt8r2GGHbXOUnrcPRdJjen7z/nOvJ8fU8/Bh5SuJM9jzk8ZyijO/G24Wyy\n6VWAbC1HNwubxP3V6+y3mNE0hNOt6JiFAg5VrofctJCPEEW+u2nCEOxDc4Yo\nvSqkxa0HoosOYILI9BEoM3ZwjmRJwj6ktt5AAhzqYU1bXeOVJm2wwX2/vUhZ\nB1XYLQXJbLzAeGpSpBdzoL/bBfTmucY6d6bYEoiuXk2AynAveZ6XiZ5RvRaJ\njGsoOicZEyqlUojoizINt7ZzXtRGP/QRiqgxs5vvXyeH3VLVuCpG5VBRfD+8\n9ZjFMF6VgOF0KIK1vuK7D3VNYVrFqhisgfhdCorFxYyN9vvp5PQ9pgMuIOMW\n8FWOc2OCCdJwlYj1cN0J6kVMPZbE5mDM5QHvNEOeDUuy++uZroxkm+bF0mqv\nJcDK\r\n=BA8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3363a6ead1437d646dec8eb21cb2d5c5323e8986","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/rtl":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/theme":"8.0.0-canary.96a640534.0","@material/button":"8.0.0-canary.96a640534.0","@material/ripple":"8.0.0-canary.96a640534.0","@material/typography":"8.0.0-canary.96a640534.0","@material/feature-targeting":"8.0.0-canary.96a640534.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.96a640534.0_1596753752380_0.3359513981993041","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/banner","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.9f9aac825.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1447b3a99cb00ca5d2932d1c12cc83515fc9229","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.9f9aac825.0.tgz","fileCount":41,"integrity":"sha512-SXlO7ANBDtVysrocMlZVNRSVGBitlEcknjJBu0HezvkrezvKgnsPqGBF9wGuuNcbKOz01o+ZuFKWHipweBegYA==","signatures":[{"sig":"MEYCIQCxo6ptgnPJVFFvtChalsWc8UYDEIxchRn9u5DcUhetEQIhAKwEvZe4tXeNrIim+axYJpEHH7g8U1d8weHf0LjKdYu/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8JCRA9TVsSAnZWagAA/V0QAIOM4KkW28mmigiCLtm0\ncKlDJ00nnla8KSajF1eRuppn07wtO0XZokho1xNGgOZOdDA/6txUT7j9kACz\nJc8RJA1Ti7eeltLTAp0bMc7/Fxnd3s8JEvNB+INM8AXHKOQ8IT/DDf6Wc31T\nWk8MBoB3HpdDRG4NyxT1fgQbp5N7gE2Uvd6Esi6WM03fvHlOMw8Tqt5qm8rA\n1lWs4BuwLt3ZxDkCFQlVYIq/V8inCuR0csMfVlnXcZVrLVDXIdUhnQpnHSlB\nKjzNmbkGQyzgJemYZRS3G2lhGaCekcthV8vsOhvVjCnOYXq2DKpW31sz+qdv\nVfoGIlW43tCp80imscImoZRob9P+yjEu2UBUqNA1hOZFmfO+5mJUYWVZTgfQ\nxa6TF8nIzLJ+DYOJihZ1FhOsVJ+i8wOJu0LaotOft/Lk1JFfszbbe5UpoYR/\nMxg/HJjm6eRVubiZ0bh3kf4mO5QcdGPwj1ENtaC49NlOQADWhSVAaNzqkwXD\nteH8wuQnQ1WGTHAVKY2+hWvXmb/p9Pin0Qa++w2koNdygH8eyyT46EerQtDe\ndjjYrLXGkg9nV/exUv9ts0IxCPrN1x5YinkkCc6DeaiSWQqFe/GX+mnOcUSr\ndWShs1file1iMFg+K8ykBAH24m/cpuPxEuNLEaewmJsB3iN/agO7TyH97Xpk\nsY4i\r\n=aOUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b417a722353dd60a63448761d24a06d325b83f7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/rtl":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/theme":"8.0.0-canary.9f9aac825.0","@material/button":"8.0.0-canary.9f9aac825.0","@material/ripple":"8.0.0-canary.9f9aac825.0","@material/typography":"8.0.0-canary.9f9aac825.0","@material/feature-targeting":"8.0.0-canary.9f9aac825.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.9f9aac825.0_1596833544578_0.968359184837924","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/banner","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.fc65fd00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbe44c3fe80a68ff8103dbb736c2dc564000df0b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.fc65fd00b.0.tgz","fileCount":41,"integrity":"sha512-/V3nI5p3GcnrOc1aEFhZG7hBGVO+g/dlUIUFaxs0aeeBVm1wG6GHpzRpecxLWNhq+Y8el21aS/nfym1cTb22LA==","signatures":[{"sig":"MEUCIDCDXdcUvxDzRSdGrPh+iW1kMz/ylM3dS1hHEtaA33nFAiEA5t7/JYtR0n9jIoRPx+aCTrUI9umKA2jwjMcYP0yAQJ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWYfCRA9TVsSAnZWagAAb54P/R3J7sUOzNWzwOmxNCFo\nFN3tb30qiCQZh/1tJ9/Es/AhhYaniR0bT4d3yjqxQOzTF1SkK5xhiy9SrYuA\nGo/cxyP2esdyxavqQTZTK3ImSBHBvlZCxndcDI4Lxsw/kiIgIur6IEdnB3LE\nEeXhPtMfwPiQBnupBUu+532/VkbpnPqJS9cSvwk72bH0hXsYY0HsyalS6EyV\nTvLuWkVoEWPPPz7jD35EOSYhih6oiAsQDGALR2NIeqoPIxFZlGb6UoFcHzzw\ni6DBOb9jyPl1CAy//Zc3V522/3HbyQPUd3YB0Ho+3WRND/gLUTpEbK22EBhM\nfHcg34D+hrnJuW/5uqFzEuBTGsioeHc44zsUsRkcn+SxU7noqmQ/sFEXRj/E\n9Bkt59HI4rVSdh3myXPtK6pCsH5bMaq9CWRBh4HMz337xgGwU7e0wv1lj00l\naAmTlWWqyaed6KZ3JDCn0u2z+TSNDtptGmlz2o+vt4MmP47xmuYzbx3hdTNc\nL2P2OOrqW9xJ6Hn7q1yd3R+XYYtaLSW5C0xPXdq+Un0Ko6905/5t/Wjvb4bC\nr8esZy5zQtKJHiu8uL+BWwez+KovOffRm7gsLd5JSE460gGiKvEGW3MJ+eS8\nLhAsVcdU1iG7Fd3PF0FVXel8idcrZDdwni/FtfisIVXqhrk3eXaOK8YQOLLf\nE1Mr\r\n=sUww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fa39d9d1e753796086537bc71b6fa2d2aa21a3c5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/rtl":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/theme":"8.0.0-canary.fc65fd00b.0","@material/button":"8.0.0-canary.fc65fd00b.0","@material/ripple":"8.0.0-canary.fc65fd00b.0","@material/typography":"8.0.0-canary.fc65fd00b.0","@material/feature-targeting":"8.0.0-canary.fc65fd00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.fc65fd00b.0_1597072926689_0.5712996993694763","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/banner","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.02e372c5f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"222fb3de88fc6948ad46434b7299577ef2ec42b5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.02e372c5f.0.tgz","fileCount":41,"integrity":"sha512-EBjaPZWtgzlaHUgqATbcZQp7tkorvD5zUy2yITKwDNDclkbVI9w828qqz68R67TlMByGf/24A+65l79ETZ1tqA==","signatures":[{"sig":"MEUCIQDE1ITnPNxsfkknDupef02QJ5stwM/+Hdi/1WflfJFE0wIgBRxgDHBiTb3lCDon7dwWg34iuLdO/4gFWEi5kkNlZOI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWyZCRA9TVsSAnZWagAA488QAJjDfg4OOO6qxMh9NHJw\nzJvyIfBnD+6OfOre6EU7nTW5JQNmqdG3uGYswWBZXiSRwI8Cdw8dwkPSNVqA\nQGBeTGuQl821ssOECkGAPlmzxP+xYbpMKVHK2VTaDApRCwtuY8pf6Fa4kY9c\n1Ks1DCj80fU8eEyM0UJ4QXJJ/7Uf+c2h+NprirY/3R+oBXCEDVRJItKqvYR+\nra6hynfJEULYHVY/LDJ5OhJSykyAUzePdYPhxj/1qT28Dptai8KKkLneMhwC\nRoeAEkEqDGTvOnPntjvX1ZT5Z9oHj76VSZ8OzY+SJvnWWWK/FXjbEgLhtJaJ\n2z5Ou6pZ0R+9SpSRk3It1dWziOKnuwsbYAd2dkg9DxaKgUUC6v/16SxthMrd\nBtnoD60Z4LadBKbX7bOt6YrZLF45ublJk4h72AyWC9mjhTjRH6Ae9NwzERsH\nq1BaxH/b0Jri20+pwjuLMp+mxP0ZHHBcZeXzbzzWZmptso0ZqiyRvRcKIyIz\nogY/EC8aahViKtITk3FfCdKrTNlmpIDulbkAlq5zRqJ3WwrnE7ZRhAAKRD++\nstSA7fnFbYOBnsQVmpWi4qnMbWfLKqIuLJfjHNtcu5Cg+h7D1c30ziPx/z0g\ntwh3F5YbdzNiWmoqhYDw31+pQ8xWnoQbcqOqgBiQJ2rChNq63d2Ftz+THy6D\nd/5I\r\n=iN0m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b765f8699fe12742bc2032a8df7cc23807ec94b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/rtl":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/theme":"8.0.0-canary.02e372c5f.0","@material/button":"8.0.0-canary.02e372c5f.0","@material/ripple":"8.0.0-canary.02e372c5f.0","@material/typography":"8.0.0-canary.02e372c5f.0","@material/feature-targeting":"8.0.0-canary.02e372c5f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.02e372c5f.0_1597074584902_0.11968214287597245","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/banner","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.66669e3b6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3f56ddecd7f9897d3fc41c15e1fbc3f0aae8635","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.66669e3b6.0.tgz","fileCount":41,"integrity":"sha512-AKw42/8dosPYxgQeEhM+kZ9c/HXYr1PClX8x/7jQGLcjkIhMkrvj0f+R9thrdxP2wrEAq24hgx5POP8qzN9sww==","signatures":[{"sig":"MEYCIQDjeB7kBnKYQ1Hrs+CBtCEB+xHWGUCW05kgs3QEY913PAIhAI3pjFnn7VnwA97/XQcGeQnJmne4wO90F9MX/EglxGG0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW2JCRA9TVsSAnZWagAAKqgP/jiRMzA6sedOGzI3SIQh\nnvrx3DnLox8NVxKcvbl/Hc38T/EOVe1GMK/RMokuIzZdg/AaxbtXbNtXnhZd\nSfig40b7Wwjea+T6ZX6LfQiCPNFD6ncbotydxY9BpVLfbmCgMVUhIN8o+uFS\nFZUDPn5EpTHMpUGPmeaPufVWBXfu2XigD8aKzpu5h5k+gBCTQYAXEgP+aEr4\nmAdH5d0ZAnxXxCjzDr/buQtdmbi1FlyNYLuX+AwAh+cV9YuRxTHZuJL5Zxqg\nusCyDLlORJWt3H6BWf+4DQtOgvbZcz05/se/J0/ww14+MT314CwooSN0KJo+\ndla8AE6TQZkSlWdVKgWdjBtOiwd7jCFZYJUiwOdxBQ4NAwjImRRbsp7un+3w\nLota2RgUxXr0iXOIXEFHqRlybgS6y+l4FajwxPQsS54gzo57Sb1qmY95hrHL\nHyHsGMdqf/EhbERHQ+Vqv+nnjCf8LsuoZ5ueYyalPyre5JMu8BCthsdkOCpD\nwOc2wdGRFlF3drOZuOAB04hq/j9FIOgkyPvQoGoteOh1VzLZ0dd9UC32rFIn\nhRBvrggYsf8ajdVSBgL02lrN+QLMKjQBM7GtmeiUIyS+7S4jjP8RGhnmpkNE\nk1y7Mho5ZfE3pwIp/QD2uSOZ9R37qQTMl9yi1dUwz3axw4IKNesvEQD/fSSD\nAwUT\r\n=qOSo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"96a6a7d492075777ad5f7692328b3bd50153bd16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/rtl":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/theme":"8.0.0-canary.66669e3b6.0","@material/button":"8.0.0-canary.66669e3b6.0","@material/ripple":"8.0.0-canary.66669e3b6.0","@material/typography":"8.0.0-canary.66669e3b6.0","@material/feature-targeting":"8.0.0-canary.66669e3b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.66669e3b6.0_1597074825291_0.957770228834109","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/banner","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.6d1ea9761.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a71b26cb3ac0fc20846175051e58e33eca3eddd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.6d1ea9761.0.tgz","fileCount":41,"integrity":"sha512-C1fVbGOsQFeV8FYNqy3atKtU3U3063fgCeTtPx2YFz62MK1arTM9XdQ3+jDntg3cchLs9nBemik0LoJ64tSGag==","signatures":[{"sig":"MEUCIHhYQcbENJGUh/EVqdbveT1JrriIYtukLo3HapqGE8smAiEA2+ij+F93Ndky16AwE2D7pDD5RDrGMoT2Zb+fC/2lOjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":412519,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqvaCRA9TVsSAnZWagAAVkoP/1ICnpNtjFYNTdUnO6ao\nrVLDCjt8EzZ8XhyHzTsI5+mOm3Vnol2NfDtfR7uLQX7gTOvWWTOdPRli93sE\ncpsztabjlPhSn5X8RCPRlsVzRauYq39vFX0qFNE+leAaduDlqMe5BqjXpVbx\ngVdbxYnwUcrdCS+Ve8ALTlkBv71nSlcHJRbdh0gD0dlwYnGB7CGgmXDtEsBJ\n2v+XEhzPIl/9OKM51PI1TTx5qrwNWwRaQ0VDkprU8wwcrf+u7GYJHv2BVtjw\nZ107C7H924M2F13/uA0C98xEDttxPaftBWEk/3HAlDywhtR81FmWFze8Pnl+\n9nDz77G5yTCE3s3arTgZMfyhr4nnxtdttUiU8plvRKmbaNIu+NEMJNKzqDZ1\ntyo9eJOm06Xks/0s53diAsPD10qiqtfahdtLxyFQUr7L+9yBncRC7jZXKm7t\nlByKB6lSTHmicvnZk/zIC9OUr66UnzHVcc0Md5eVKdmRaDdqeGp+nlpr5vDS\nveWwLVFbethxuWQVPdsPEQB3O9ZeCFhTONgC/GvqMjDkIoojMfUuvMaJQSjD\nGLo1RUT1DuwiIGpPV5wRK8MdznXW/0BBafO3Utj3lsbS28VZJg40MhzaAmOq\nRqOurpdicmolUwEfjDw7DJEW5tt79udAREYKtfMBhDAg9hkKn5kYcxl4QBQl\nSlIB\r\n=oEuv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2539ff1cdb03aaa0365880e59b2705e6f6ff4229","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/rtl":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/theme":"8.0.0-canary.6d1ea9761.0","@material/button":"8.0.0-canary.6d1ea9761.0","@material/ripple":"8.0.0-canary.6d1ea9761.0","@material/typography":"8.0.0-canary.6d1ea9761.0","@material/feature-targeting":"8.0.0-canary.6d1ea9761.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.6d1ea9761.0_1597156314294_0.8045219916063571","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/banner","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.79414bf9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1854f49fa434a7af46c2864531923084d3766d0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.79414bf9f.0.tgz","fileCount":41,"integrity":"sha512-CfsmVLW4WWYro3D+w9uEHs0avFYYD8K4lsYkHHsejpomVSKMYokE7h4FAQt3omkz9r6U44wkNWfDSoOiEVRN1A==","signatures":[{"sig":"MEQCICCWifqc9HOoRcWc0vq6tt6YFl9Ei5cz68C80fqC4LGwAiBIG7JuYaEyelU5PI/VALXLJnwMOiMw/e1J66Y/mSxl/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutpCRA9TVsSAnZWagAA33sP/2KgHyapUkMajOopaXCd\nHfIcjIxKgPDblqoRRTs4qWMBO4PJnJBE7xTVkY0025SVdRZ54V7avGDXIquL\nDnKTLeI4lG/lwLWVw+jiTpiha1WTkxx0IvnY4DATF37iUjftMGednmbQAlLF\ndzY9HxrfGywk/7Nn0XZ7BPeyJqnmn5xDcNKlXInIm3mIPZeoMWjhNi6pyPWU\nBS2+dE1fJs8Fh5V290xCPSFiDn8AdzrPZHlY4LOJePR8Ej3ewu1HFn3v7/hX\nU4oPe/ungExldQB8W2fPIuwfXL39Vdn+jMscXyqt4UC0FadKJEF2dsYP0Mos\nYiON1O0pB95pP73xfuss9GvuTpxJA7WTr18M70mZhgP+gIxDSweNfNSwoS+I\nYA2UVQn70qfifRfURMV+zcy944yG5SnrY8oju52RyhcHOtvp0AaCcaSA2Nal\noYLV2JdHcuPwhhosu7p+7LQitV5VT1w6tpebMessLIADIys+LcTJqfO7alNG\njWy7u6NDDEIybmxCrl9oEUzssKxU/t9kqSaO5dF+sRSZIqqkRb/XUu3JsYnL\n4zZB5GBAjClGMdOUjxzS4jQgCvxlHDygJxlc3wY8j3Pl5sINZUYwrC1JgOIX\nnC21U+eGrDgl43d/nUWLs4eQSoqqEXAWqfHL0vAMIAuMCPF8h5bqEh0bbTYb\njlNu\r\n=Uyco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3101c6ef84c1ef8d9afdb44b6b6b3067c2f5723c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/rtl":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/theme":"8.0.0-canary.79414bf9f.0","@material/button":"8.0.0-canary.79414bf9f.0","@material/ripple":"8.0.0-canary.79414bf9f.0","@material/typography":"8.0.0-canary.79414bf9f.0","@material/feature-targeting":"8.0.0-canary.79414bf9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.79414bf9f.0_1597172584648_0.30358567473143716","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/banner","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.85a5272df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65f10499c5cc4b8e3b5fe6be3f4841fa2d8f3e18","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.85a5272df.0.tgz","fileCount":41,"integrity":"sha512-TqYdp3azXrTrwzCbCnghb87N5rjt5ykz1hoMrDmZnuTbBUqaowUoLKrmlzD/gbU40Odx3GE/JMAq8JfvSaYBPQ==","signatures":[{"sig":"MEUCIGSPsoMoj7Z+AzRG6/OkftEbV4L3QeJG8fiTFFYCBGk1AiEAi5Hn0aW6pVtDea5efPNAr83LjuUxlioR3r8TIHl0ikY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrrCRA9TVsSAnZWagAAOpEP/R0EOI9t06abf8CvtpoE\nRl3obl3R/KilD93RcfFJwAjhpuOpPebREGBy0rdxZMYhmHliwtOLiwFogHfK\ndVdAURRKJ4WSbLWOWfOJduIJGhQz5JOZhLzGflm0NDqIqRo/klwRsnnzJvNv\nTSoSlPeOrUbUcnDIb+Bic8Hse3rtkaPtBTEkRGsJ78Zbc9QwNjpU1gNOJ0OU\ngVU2Qcaa1ZixLnL87EE+KHYASVz1gQaGxdm7ARAKYAoUhRbr/iYW11YmmJHQ\nzknxBnmJ6RFlJGyHKnPw+fo9Amd+1vJagY+WrtdPei6uhiRyExEkd0yzQ9TN\nUx4nnRUfziFlPFndgbE++xqxJzPtd/5C5LmbSisT6gOLJZp0L3Mukaw4Yipd\n7FraoSv4y78e8hXbiYuzS8ZmCbI7mwawWCE9XOAXtZXCyo6Shf6qlRpY/jZi\ndZ4exdNstwTujsA5ZvHI+YOxcwv9uowhb4BHQPY3rHY1Xr3ht1Z124wo4xxG\nGC1JOMzFDbTH8EDqVGELURpnLwV+VHxcXFhHEI994FT6W2NjcC+i3y1KvJZH\nezLCsyUbgIh2zxhlYcx4zHophiQfbNBBYMeJbXNa239sY1pC7rNI4xGS5IdD\nX29qIQnEti8T6k5SHs7LqQRBRb/J8GV212s+zCmIbBaCTn3cweZELmfVBfc4\nzuBW\r\n=KcOM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"070016d39c8d62feb1148d71182053d37bc35fc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/rtl":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/theme":"8.0.0-canary.85a5272df.0","@material/button":"8.0.0-canary.85a5272df.0","@material/ripple":"8.0.0-canary.85a5272df.0","@material/typography":"8.0.0-canary.85a5272df.0","@material/feature-targeting":"8.0.0-canary.85a5272df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.85a5272df.0_1597176555246_0.04960332195381789","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/banner","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.fda053eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96e71caf9ea579ecd681782ffd8f4df76fce2570","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.fda053eb8.0.tgz","fileCount":41,"integrity":"sha512-HIfFDu/+h3A/TLMcE7eUx2Sln+dqZW2l5Rg8UzbhFJAj646+9gkoPc7utQhGZe09RsLdKNnQ3Ito+q/l0thZTA==","signatures":[{"sig":"MEUCIQDeP+0QzOiUvVLqxlFYdnDEp4YQYkY/amK889kJPiwO5QIgIRD6Xs+ev489FnOd7Mvw7Ah0RzC8dBYpgvyGGQXLYNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEt7CRA9TVsSAnZWagAA1kgP/AyDKr5Vn0IDaynIfMLz\nlWHkLgqAz/XylUMuUKRw3Q2PgkvgiCeYWdjuHJEcHVK+QC9hxBIFjYWYGSdk\nolCHJzyzBNDAHo6VnF/SX3kQFiO+czTvGaFcgEgkAstPUUlPkfhMOTDCV13s\nnvEVPsVX7WN5tmPA96lDo0pGXz8AYtLmjdZnHrHOnyX0hbzgkVT3CmaLb7t3\n+jqD0LyfzTkoeQqxkebQA2Q3ek1ijxKXJ7Y25YiREUyRyqrruR1UObE08U4L\ne3xHdCdLK0WTZlUmqhaSXdiC2mIb3hFw2U2iS0sHnYt5GlWpqH4qa4Xdpyn9\nv7yw3Uol5tfLk5bP3WEjbUAfR9r6FN6MspJ04mzOk5VdHmllLcWsrhYukH37\nouEQoDUFyRpGoHmkCawf4+5cxqvE1g8k9IgKJ7ZEU4qWdwBaFQsuiqx8w+PA\nc5Z/S7LxtEbuKJuaEBL8uI5XqXUp4SADg0Ss0uHFRTVE7H5JwmPXPwqVqZOB\nHLr+dymdhs4WVpKbc1FL8Zb3NXhg3M8E8eBGmMg0kNjyAKKIIF3YQIw+UgPp\n872iItyqArCf9itI4pNB0Q7Y8b4NgbHGgQvAWNfL26UM6kn+8CqI+hy7bSH1\nQTh2WoL+FLSvHHMoxx0HhIm+tIsOQWNanY+9WWrUOJevoFXjDSmJNocHjYRo\nYTeD\r\n=iVFa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b92b594784940e2fbd248c33d60198f7f2e0ff71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/rtl":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/theme":"8.0.0-canary.fda053eb8.0","@material/button":"8.0.0-canary.fda053eb8.0","@material/ripple":"8.0.0-canary.fda053eb8.0","@material/typography":"8.0.0-canary.fda053eb8.0","@material/feature-targeting":"8.0.0-canary.fda053eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.fda053eb8.0_1597262715090_0.7752734235382721","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/banner","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.760873445.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"658ace865455097035d58ceaed4d3cc8a0b27dc7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.760873445.0.tgz","fileCount":41,"integrity":"sha512-U0NCkTaLr4dpkTLe8RXECqX8jssl21vSTXE39oin/rT1OaYey3O+xsYrsy/RmQ8sgrIN8yjl74WDe9p4koZwuQ==","signatures":[{"sig":"MEQCICLT1oSLm8bIJd2WdfoAnHBOj4RKayiUPdx/1LKwhG5EAiA/effGPE7ZJMroy+dB80mK1a6zclDW3W5ht641pwBZgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKzCRA9TVsSAnZWagAAhYAP/jwDdkws7Q9LJVv+pUNF\nVa9SKnhuH2LXa3gq246NPlhJ/tjoAL6N+3852awaRoPEEOCT6fXp09g6Glfl\nD4O+Q/yTnLjiIaeCADBHe3BkXZwZgtIK2JY91p4gbagtNjnrqFhTVjixMb22\nqIiXqmfE3CFGPuQI34Iy7qmc+RXinR0PSgkpE7gQ/GNTN2r714B4XxrjdTz8\nncrIPQewfzx41dfmEtr/px5fvY6xPOqW2ArvKYTObFSgy1KbLkB/wUaq1OMM\nZEQCLb4TREQ1d8QbgI8UlVDI4uGn67SSRGCdITOECWCdCuBHmGkvjwtxrbra\nwDW8nDa43W3MyMiHbaGf4FfpYP2rrmFZrM5tya8FzVLJj/ooYRqEBtfSe1Yg\nI1OA05EcPAOBCk1G4huq9tlf86rXJ10gd4lEk/m7IKN5kbhVB81+zNyDDswG\n1+Z43/Ztm+Y7pAhNeJh1QJ/GtM2IrVX5YFL8F3ab7gkEyzT6nj9QkHFGBCWX\nfoQm3m/JWP0eioiwxCGDRr5IBBVicCtPBZ0DZxeR111sMgao65l5tyWytEjK\nobWMKJs2nsW6PHo+dL8aR8aC3O7u1xHIyEDQug7pmvFGQ1wTc+5HsxHVg6vI\nsXLinD9yxdmUaZKmmqKXWJ7XZ06Qf2Pa4+qRy0CosCOW+WYPnFJV5LATYJm1\n78jT\r\n=r2Ba\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a830629b92051950e9e15bdd288ad87238b7103e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/rtl":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/theme":"8.0.0-canary.760873445.0","@material/button":"8.0.0-canary.760873445.0","@material/ripple":"8.0.0-canary.760873445.0","@material/typography":"8.0.0-canary.760873445.0","@material/feature-targeting":"8.0.0-canary.760873445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.760873445.0_1597268658276_0.036609355451023395","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/banner","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.2f4711a30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bbef3fe0a89b604b85ba1cc028be7ae92a72a82a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.2f4711a30.0.tgz","fileCount":41,"integrity":"sha512-BhznYTEgNbvweFAogSXOj9HcdXLMEDzhgXEweZZAyVnhBanBmMQmh6d8wh3fK3coHJrHJ6GTNM2XZ6kppp0Piw==","signatures":[{"sig":"MEQCIB6kCn2SWk9KvBkCQHZ/C2aIU9L5KzdxuVs4dq+Ufh2FAiADStkZDOz8AVXkjObomrL9Rg1lP/ZdBLthof3ivp/02A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUMCRA9TVsSAnZWagAAwVIP/RURBum9+DerPIjPX+/2\niSSvdpm0qNv3zC428zVqaVXEXX21PQKHEwE+44AQskOnRuxXFe7PJWNn6R93\nsVloEuoE6QbrHvBgbLBj5visdrJD31IJqa/63boP6I8+6UIfG39+7dRL1eJE\nsrbMWN0cnQxWf9+MYXOl+1L2dZ5DyR1DGGZ68YIjnk7glj9JI4lUhbtlcojf\ncohhPMRMKQzd3l+czEP15DKnQflhd0n9LIlAWGFNfQjC8Tl60SQCukPL73qO\nIEto5XMrxZQo+dRbFMGqPfr3OubqBLGdDqdAnF3SIK/NMOxmpFmOYF4qAzX7\ny69WhDb1WwrQcxViLkmRmSq5X3nIrsEqz7F1utNOIlfABQBtzFX5628vkkVJ\n1Jcr/ueaGkwWd57D2NvMqtKcbNF5a/B7oADn975LH4X+H+AWMLFog3s8eRYg\n6B8eFOpKQAhDjG2oGPNDScvUXB9kcwiW4f17i+DYh9mBiECAzbftd9xICZ76\nlEkR6cj1elS41xqCcSw7MOO7SlUDG201IWGo8VnJvvduInX6yzySKbT7emqy\nDjTbtnq80V/5puLI+VHG1xcSDZhqwj6XEsrnV5mKujVFLcVxA8xzeVHlVL+2\nkBUkeg6M8tQ8s9Q75JAIeVVaPo5qAdM1d8q2XGgtbVzQFhPSZUh7ZATzTDOt\nloI8\r\n=Hs/l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1347e5c15ba848f3525dcbd08fd0b11061e94116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/rtl":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/theme":"8.0.0-canary.2f4711a30.0","@material/button":"8.0.0-canary.2f4711a30.0","@material/ripple":"8.0.0-canary.2f4711a30.0","@material/typography":"8.0.0-canary.2f4711a30.0","@material/feature-targeting":"8.0.0-canary.2f4711a30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.2f4711a30.0_1597269260071_0.1404162400357678","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/banner","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.2d72f3659.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b37a115dd134b49f69e72b4389b306f8fb35315","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.2d72f3659.0.tgz","fileCount":41,"integrity":"sha512-QxZqRNJiViexdFgLBH1DXrZ+DvWN5CQ1SP661jeAD5PiZ6k8gcxFMYxksLBI08krot9iQWuLFQBldrCBrTQIMQ==","signatures":[{"sig":"MEYCIQDX/VkTeewOZs1U/yRW6PwjpRZjbo4RcnSTLvabwKR1BwIhAPbemP54Dbuaf0l5i8zxlZsb1xgX1q0RhEGIqEN0WKie","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGbPCRA9TVsSAnZWagAA7E8P/j0MupL+QgY7mgXeG+oX\n2GkxbZTopuHvzmf3vZLHhqPk/oTYOB7GRl6hR+QPJ3JWo5hn5EKxntcDzE0e\nQfpGV5xci5uoEq9Hovao+gNea+MlfKCvW6lS8GWRKcqqxpHMfJBkQ7PTdiR8\nWWxLbtIMwIlYyPVYhJlfIAOQ19jJpcF+boJFFjXbxlKqvHjIHNHTEQr5LQZb\nQ/XW3DUt2dGNYFexvuV1j+omlTqKwhxHAtT2C+B9u10Ze8gjjIX6Re+0qCur\njmJOp5ouwV1UUlqB7L1ywMfXFKFkioB7wEtqz9ttZbsjSzdmP9T6dkfTJkna\nGLMPlQpq1b8DaoLAhfnk01LYO6DMGW/la9KxAWaXot6bVKTkuf3qiH5S6tB1\nxbElc6AGSx+fOcIqxDOyrRq6vxfB48MFFSLamWmtaoGhNT+ikBNg6HMJToR9\nMxjvzCCYxelUDmOAT2+29mk0509XXjAshX3GQ06YA3JqVqZ4XI8LM1tmvi9Y\nglrYyNhAL3nBVeC0eKzJ2gS+frlZrug7YkRJuBtm1Nl2jsdMQwnT7cNXrt/x\n9WCrNCS9Wh4MEXub7VqCPQW1xpJbXJdmB+H6BbfDOto/xRFKqTT+8EdIVFQu\nKMhw5jAmrrvcLy8UFuc80Te0ybZzrwm4b+gw+bqejGw27cdmMF7OlRXRGRRm\nwJ6Q\r\n=Ft0D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"de40c24a4d850a3bd4269dcebba821d972e01c19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/rtl":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/theme":"8.0.0-canary.2d72f3659.0","@material/button":"8.0.0-canary.2d72f3659.0","@material/ripple":"8.0.0-canary.2d72f3659.0","@material/typography":"8.0.0-canary.2d72f3659.0","@material/feature-targeting":"8.0.0-canary.2d72f3659.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.2d72f3659.0_1597269710503_0.45237125030303527","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/banner","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.1fee70a5e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d8dcdab4703237df1e3de6de75790ff2fd4fb4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.1fee70a5e.0.tgz","fileCount":41,"integrity":"sha512-hUIvux6CbWvRSnz/0Gzbh7tx4r3HuAznMsMEy+If9VLggFfgQNOqnYafexN1tnRql+zTT/TXRuNNdcIZzsgU2A==","signatures":[{"sig":"MEQCID4ELFfkbGcvyRo+As31at3KdAcnJPIyyCj2buUvIhLpAiA0tP8bmyw1qorjJm1RL5tEmyX9fTvO5PVpIkGB9anlHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtpCRA9TVsSAnZWagAAjq0QAJI4BnljAKleT/mCDIj0\nSI3XdFVWV6ewYFbj/TGMoV6Zno7l1jRHx7Cry/t7QQVkimZJI7Y1GUor3Ls3\n+Sm/q6tsUzAaRe1TxYz3MlNJGxg9m9inUbI0isyAd9YwqfPuQkaN17qCTUS0\nJbHJJvqITaDaq+ucXHbVyg6bL/KOzulIxZv5fn2yOzK6xpwMIX7UzMPwUW20\nDYn6gE62OBMTQSBumuuR/xfdQXEBseVsfnTZjBKyKplROGoLJ4kgdNaldMwm\nyDb2qMbDpaxAC3LPHp0gQm3TNnBy9Pxh9AAbczGe2d9I30o+tL/Sszo9K6ST\nMVLw0XELQvvHi0SPjhzjH7etL0dajVQBYYDwrt2A2SEHn+tI4nxqqnXL/pGh\nlAC5tpAvLXN4jWm3ld/vlVTCTCYWj79qiNfo4QQkGa7cP3ouG58muu1yhnXy\nWFlNma7YAqXhnpqFZ+tc5iJOwHCCUL4ETcLGaxeVDJ0Ku74w+r0VbHU0PRrc\na1kfIXp0VwdLg3kFeUUVcDrg70tdI18EQA1OoQZy1W4jo1XDA5jLCyCOtLOw\ngInKa17FB8xNSmjR5z6g5sK2uNOpSPWgQagUdDijbrdvF3d97d3FCTuJzqVP\nZlqPb641iwBBnuOKE0fn4n7/NiRw/Ev8fO65TqXeQk2PjzW8769TeSHOZXj2\nvSj6\r\n=Lj/6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2e5eed4b73395e9cae47d93ed6f34f0dc0467c28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/rtl":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/theme":"8.0.0-canary.1fee70a5e.0","@material/button":"8.0.0-canary.1fee70a5e.0","@material/ripple":"8.0.0-canary.1fee70a5e.0","@material/typography":"8.0.0-canary.1fee70a5e.0","@material/feature-targeting":"8.0.0-canary.1fee70a5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.1fee70a5e.0_1597274984397_0.1607038327238448","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/banner","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.023f3fa34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1af3d5904d3e42886d6b944960390e0b8fbe84f9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.023f3fa34.0.tgz","fileCount":41,"integrity":"sha512-nlrHxCGvCb9lfuNbLI3ViOgACRq4M+U2y7BM3eiZ8ZxWR/IfxDWiOPXwSbo7XoTngWJ7c480nZLPNsP2IRh4WA==","signatures":[{"sig":"MEUCIQCzI+c3fZEY533OhaiXQTcRTGCDkEjGGOuImh2bUmJwSAIgLh654gIKnoCNB3OD9/1NbdaHgCAeyVfj8hKC+1thpNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJO4CRA9TVsSAnZWagAAVioP/2l7SpwSK43scJC+Rul4\nZzp2BRJjwE+MY6RI0as3cH0pnfZP9sjv8FQ1FatJPkJs4V7NgQJ73JIhKEx6\ndE734koC4boADgsLaiaCDpR75JJrdzvexeEVNdSbuD8dqa2YWaXnuZANchbK\n9fKNGLgY++i1hJhWTfmn9H4wunjlfiPBifrHyGi1oQO+KEVq6Np7eQV53j73\nYVSeB1YrdFDW1AHzTRrB8B+X4IQOl8wisAlZuLtt8GpPZp0y6iKJzw0ta3QZ\neOoO4rJI7dIqFWX81eXl4JBErFFVDrcOcFrlVck8zDJgSCF6ssX4KXco6ryu\n++0kHmnCrYQd4PtbegMIAzY1HHr85ZD9/ZmBOvFdvhGlYj7XL4SrkS8LL0jC\nWmJ18r1mNmstygDGi9OlRDCW/ziPb4cK4WMGQc3giTUaZFHQmfOWCJilYoDL\nc1nv2FmXOV3pGOIu8YN8wMhInhPl482QRXiVVI90I+W2mbwHCv4jRpUb4Vt8\n+Jz6jdfWJr1hi0bcNaTA4GXC0jYZc8OXjexyme/7IGxNVGzAxN/uyEPDqfeu\nuNaHMcmO+BqaOK8Yaxq98EIpnaUbJxZnYlOFiCxOoDbN+ZqfywMlDghTXUk9\nIaiP/wVwfCpUN0Nf17t7GxeIYnAEvuITtqE8+3ZWRUjkfNWy3A/TuNCvphEA\nS8h+\r\n=vTNW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1a6538d0b407fd8e7a7de8e39b4ed51bcefc560c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/rtl":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/theme":"8.0.0-canary.023f3fa34.0","@material/button":"8.0.0-canary.023f3fa34.0","@material/ripple":"8.0.0-canary.023f3fa34.0","@material/typography":"8.0.0-canary.023f3fa34.0","@material/feature-targeting":"8.0.0-canary.023f3fa34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.023f3fa34.0_1597281208359_0.25846091634547896","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/banner","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.80f3a9e5d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7c7f3131532ab1bbf3efa5ff63b578dac098827","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":41,"integrity":"sha512-1IrIsQsC+begEFbFp/lDeu9UUk+a3jkU8pG2CpyALaUPsrMukyry2+yU4El7naTGFGzwXDmb3cY18foCES+wQg==","signatures":[{"sig":"MEUCIBtJPxSxNDbsoP3bovmIVxAANUu3aagax8U2/tonbEb5AiEAvM6juXPBd5uZJs/1Wpl3t4dNKe78BSoPnkyq+mBZDmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJehCRA9TVsSAnZWagAAJTUQAJZPqypVr3daaU+KRPMf\njW0FbDon47qfk6EwgYyCEG1xjoQT5u6Zvf7rHHsVMdrYk4EfWDtkxsOQK2Bg\nH45UlexwgTK08ZEIh3SyiGOvwpv+osJM4VKTR+3h716w4TY96TRflOqrEqhL\nWVrHGxCmjIuhe8NkBy7HbpVe23ijKxyHvyPdA/25njZFbzcyzMXLFjm8sIlZ\npHiq1ZwMc5X5p4WQPXX7UZymq//2zj8gkO3u6wRqtS3DxWWzfc8M/mDZTGHx\nEfXhdYwX9KcdVteLhksZQvPkPTa7F7gwIg/X1BzWOomHxajd48I3LOmYRr0k\nE/8yFG562hukEKiBUiji2xqZXUQGKb1HZjUVJ4OZhN2mu2kBnDgBY3qwXNSB\nQNspxcyU4aacD7RqGzV/lrvNhVHBBF653rNSCXcYKinygavmr60AhRC+fm3G\nLXW3j093FGNr9Sr7rpKL4X4j9jxePgpHV7IfwciVITGw8Mc7DFYi1WyP2plg\nBpeshUnQYJo+swodC/3P7oWV/1Jhme4ui9cbJIy/TfQ3WBN3guq53BIyJYPo\nirdxILzeCsMzwQ7R1fcudNnFi3/Q1TY8tiUoCja3iWdozCzKPqRDmxVosAN2\nHeu8TREsehqaM/4S8E+12fSPbHHCLPt0MVNdXhpTZErgPtTYu9fhgymUFjiG\nTDF9\r\n=Ocs+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e47018f239b51581a67186dcbea3f4167f5ea3f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/rtl":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/theme":"8.0.0-canary.80f3a9e5d.0","@material/button":"8.0.0-canary.80f3a9e5d.0","@material/ripple":"8.0.0-canary.80f3a9e5d.0","@material/typography":"8.0.0-canary.80f3a9e5d.0","@material/feature-targeting":"8.0.0-canary.80f3a9e5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.80f3a9e5d.0_1597282209200_0.17970846109954386","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/banner","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.a1dcfe97c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a67050f6015d01863467e1c44fad495337005c7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":41,"integrity":"sha512-x5FDDI7sdGKT9yS1xmcYGMet9FgyB2kSBu9rD7zZ7c/V6hCaIDQ+4+2CijAmwSwhFLsz9ueDLKXl8iGmcgZasA==","signatures":[{"sig":"MEUCICmeJhLcZxBCfhfN7mzjss6IEYeauFHTVwZT6OM8WRrEAiEAmQWI/AZNdi1Rb/Pkce9zS/f2iJGMoVO4elysiAGAWTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414806,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP8bCRA9TVsSAnZWagAAdQ4P/AjTnxtXzrChzQ+1Z+5h\ncuaXi9Cy9Ta/+9PjJ7fxqcwJ3vJdIe0U42uvARMEirXMO57JG7zDE92a+c2k\nB/xfAjZxGBlmglUnQX/6avkANaohtF8dS5fVu/8iVaAK8VmbQeyquraVkutE\nm6gQyZpf2QT3QGxXpuaQ/rOYOrwGpV0wH5aJ+8uwklLPB9pVaZMzk+WfNjlk\nDmXwNVVdIxl2gCh+PLqnkyfMjbGD2/2cVVMis8MrDxOijradBltN9YHmzyEF\n4rXNaN65zlE56OFAzoKOaa3S4nEHN4vFR8afNIOB6mirt4W3uuajtCd07wXa\nBsDOK52yN39hLYoo3MzZgGoO6XPi2c/r7EVVZUPM/NXuqrcC0Vh4hNqmOu++\nROs4F3KYs3XNPLd5OTBGmZ7OntBnQpkoDhEVrTPear8mfv8KZXC8XoHO0D/w\n6bJIzgxP8jA2fOuqpChuDb9e3gdKEFNLVgFMDenEziuclRjxk+HJ+Ayp+wdX\nCChf64c2VXcBQ18dUTVBvKwqE/sEW+220/qpI98HYGP1sbATtyCgUkMGQrnD\n8SV+tN5BKVy1fUH7oGXCG3wNW+LR1S02ChHGiQmawwO7UFrBZf09mxbvVlN0\nnjEL/0x30BiO6SMhpfDGck1Tl8xuA6+drkykD+cd7GnPMhwpxpOWoq3mrzFr\njKe5\r\n=/n4B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8ec1483dd23463f0239974be9a65ec22a6b54715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/rtl":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/theme":"8.0.0-canary.a1dcfe97c.0","@material/button":"8.0.0-canary.a1dcfe97c.0","@material/ripple":"8.0.0-canary.a1dcfe97c.0","@material/typography":"8.0.0-canary.a1dcfe97c.0","@material/feature-targeting":"8.0.0-canary.a1dcfe97c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.a1dcfe97c.0_1597308698534_0.7536229435928512","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/banner","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.af332d5be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e033611d7224713c96b0fd450bdaf3e87a5afd51","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.af332d5be.0.tgz","fileCount":41,"integrity":"sha512-cT3UDYMnze6JgpmSOMIwOdb9/TLrG1tCWe9pAfiaeFY3DFd6DHtMWoZDLcC9wNDhC0ohAUOUzGzZvcbJLwqEDA==","signatures":[{"sig":"MEQCIAPicQiOqgwS9T2/MUwodGjBr2votdMGmKsp9mRLzpB6AiAWGT9p3vrUydRUv0loYVzknmUHLCWwOMzpe7nziQHwXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa43CRA9TVsSAnZWagAAQvcP/1BE6ZtXWXyi6+ObXq0D\ngAaVs2spBgMzLJ6H7kKEDg5xHphg86UEwMTvuV9OZe5H4oBkLwuI20FQ9VmU\nPX+sXVN1g4M/T0tuOaVvjxLYX8Kl9dAob017U5ODiyfchdIZu3kNVXYXjiG1\nz3U90dpWbtbvV4c4NTSta03bASw62M2ySAtybDY+ZChAx+/xaGgPvz+oPyXa\n71tLvGfWxbEouaXLdy5cjrdG9UkeL/UXAhbP2VUsGhZS6+xyww9Rp1DAfaj7\nL4G0KqmvO1/ke68Q33cN2SvcIp7hNlMGoRj1jdDHVP4gy93gJzy2/+EQwlkQ\n75MHrBGx8tiGD9gW32xykIgXNFAEabPOeYkLFbjrDUp+//KsQsKPAmJIKSPg\n2Ai64vnghikNxlmMfw2V6tutzF/bf71+Vx5wzYogoaCVWQ3H+XeQRskXj3uV\nH5YxhDyzKv77tQ68q9rtvprMO9K0sG9/ErBWo460oO+FLFbDUtKygd7iPTHn\nJVB9mGp7Tf+qgyEW4qk+3bqy4eTXd8qWLxVk7UL+MVTUvXU8kEsibf9LzSzk\nv3HvnC9oGYSPFuu1Yl5XsmJs+lFWOWKBRn0KFayuFdGR6UuVF11jLWzDNsFY\nNkWgfqhEpFQ6bP7Z7r0kZnm1dDGhirz7/RRcd5LXYw7fV0Kff4xoCxlUyTPd\n9MfA\r\n=EwQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ecb675d071cb76738aea95a2d43ef88a134275be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/rtl":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/theme":"8.0.0-canary.af332d5be.0","@material/button":"8.0.0-canary.af332d5be.0","@material/ripple":"8.0.0-canary.af332d5be.0","@material/typography":"8.0.0-canary.af332d5be.0","@material/feature-targeting":"8.0.0-canary.af332d5be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.af332d5be.0_1597353526939_0.04119427529650199","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/banner","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.7dd4567c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1539a4c241ae323323da923021eb309ca3b1689f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.7dd4567c4.0.tgz","fileCount":41,"integrity":"sha512-9GNhcJUGzApX/rdli62HgiS/ofWGe0Y1u0tO8cfW8QW2BIYyUQeZ4TenUM6Pu3LqK6e5DyS3y3oWNQ3rhVxt+A==","signatures":[{"sig":"MEUCIQCkJFlEIKSMRgRNnd+ULj15lSeUGWxI1AjAPAvhtaYXzwIgBIOgqzPnBK+wZsbv5qBTtlp/OcSgsHEDb45yNHrojZ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeA6CRA9TVsSAnZWagAA1/UQAJxHoPfSTiS6n2FGW35i\n8A4y7ZjGS767EsnzGi+DNWg8EveVjQ8BBohlyOYsF2S3JryhS3rkMyd5Y6EM\nRmXvBEvHMBfr5TxZO4ivVZDOAFw3R2iVzKRre8hZbzz0ZlGa8YaYbOZeKQro\nxeLWEPy2Qjv5yjawEv4kB2IYSO70Lysrp6b4pcEYhTxGltSux6CU7FGb7JaL\n1g4GE/Lwv9TiWaj9g+gLxtLEmnTd1B6TjVLHBXOzfOnNhbeVTF1bIGyt82/S\n6WcKera+RZ9uLP88+UjTx9yPZVmO1K96OSe6XLyvxcyI3bIvycXSqn2P1b+T\njTsN0ttO3hvTTQgJuIN/LMJEivz8XUvpPIK1f51baU0rcMSTl/pLbn/+DTi+\nvwLKS3rfhx1CsGHQact9OTi3NmHVZ5vrYFsuMr0dmzRUsqz8ouGlco/5mVe0\n+VGa+pEFmAp5pZpoT0JPLkxeemHxF8mDLPtAQu1StZZrWsvORw7tvKq4PI7A\nNZ2HXuTWhwhZjqFEUk7FE3zGcITkuB18Wu08e8gB3pu9qrMWbXCwdpvGMWjA\nUZK/7cyo5xvij7UCdIzbrIFtx/LWOSZL84zFUCBj2UqRHRyY3hSnb1ETjikD\nXdqaYLLmTamMtUCBPFAIAKvS17HUFpu/TD5WRYy6UC2qITLEu7bqm7L3IKUq\nNRbX\r\n=al69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"515ae143d426f0329f0a745e0ad35113761376e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/rtl":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/theme":"8.0.0-canary.7dd4567c4.0","@material/button":"8.0.0-canary.7dd4567c4.0","@material/ripple":"8.0.0-canary.7dd4567c4.0","@material/typography":"8.0.0-canary.7dd4567c4.0","@material/feature-targeting":"8.0.0-canary.7dd4567c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.7dd4567c4.0_1597366329471_0.5312650938370118","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/banner","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.ff870005a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ea7bbda2c8b457f1734ca2028635833b7342901","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.ff870005a.0.tgz","fileCount":41,"integrity":"sha512-VZGvxTtO2b6AY9EfW5H5dpzg/XiNnjaMRv1zZIGUNMokY0rbTDIQoiV+KkW+oNkAe26/Wpu3IUX0XDhw553dew==","signatures":[{"sig":"MEQCIF1rT9mNbMnNWfWW7TFWZ5tNxdr+LLvYWl043qAyVlg8AiBlMJRQ400WLREjcCE/evwsUuIyseAYqdt86dPHkdthgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYcCRA9TVsSAnZWagAAlmgQAJzC8HNgwscM4yGR9bOX\nmr1NYT/wdEbUI2zth0r3LgvkrZP9KrSqMGdy9NycllkHy+41OMpWHFsXoKNz\nBE+PIS0TMEIAksk0jlv61Ikoh44lAVKQcIz2If3YKo7rQIqgALpaE+dy3ZNA\nlhmUAtagtbyLTcMt38tovbFSi0MU8iBaJWeA7fiUalGzy6s5lGIzVHr4yLWI\niNRRkEuq4PVywk60S42rJQZ/zwsPqaja5r8JmW+023qP1S8YGULYMhyiBuLS\nzn1V5gMZcJlFyJzmlKJIO0fqPUqrzMoCWRvqGI2i7BDE60ruNISnY4jSxJIl\nIEXMY1kJv7mnJJ124qXE/RXnC9fNG7Op36CjVuj8qc2ZaOr2FLjGu7EhhfNO\nwt0b6MpaTqpoCTGYmWGxEK7zdO4deMWVr10eo6shTwa02Q8zTeq/EUp9P99v\nS+Lq/Wwi3AQ4YDN2+X1Bcmg3UdQhz+fwNd78FWh3TJGAHhPWBndtlKithXYZ\n1ycRq+0rzeMkchUaD1TWCiTgy37F7b4H2CYOzPynTu+xC8lsGwvA0DmUm7dA\nHWL5rHVxe/GwnSG/srPvT9kAPY1LWYDM3vzCAr9pnwexqd5uIooSmewrKGvE\nWRqFHVafyN1kScvLojSWtWJ9NEJudL4B1IrKAk/gvMDV2mlLnIQGHw6uFjI4\nS1KC\r\n=b+e0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"885c1d5e1cf217db1bcb8176917a25d6c74575a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/rtl":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/theme":"8.0.0-canary.ff870005a.0","@material/button":"8.0.0-canary.ff870005a.0","@material/ripple":"8.0.0-canary.ff870005a.0","@material/typography":"8.0.0-canary.ff870005a.0","@material/feature-targeting":"8.0.0-canary.ff870005a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.ff870005a.0_1597367835962_0.6704447596572181","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/banner","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.150f427a0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d99177bbc9dcf73b5185b8a75e75c181806c8c2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.150f427a0.0.tgz","fileCount":41,"integrity":"sha512-ZEhVBGiKQyZEC0MUBbx2L8ZrQyhgIC7++a9XfLeAdnn/PG5M8CQ2NoCouaRdxg23HBspNpMn5wcKYe2YiFq8Hg==","signatures":[{"sig":"MEYCIQCzAVXpuBBmyw2spSkv/PwDzGjcSXtge7sfAWDKJu+KUwIhAO/teszN3CSkfKQlVE7BjxIMe4tDxw6WDyPchs01Ltek","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpIdCRA9TVsSAnZWagAALc8QAJ/sYv+TolspLpMM8M9Y\nSvvAI1pAKSp7VE52Dp4gHZo+GQtjEyyWm/n6B+x0yaHbf+YHF5SSg09dsLOj\nQNLPReTmPBxx3XDP2gjgrsEtkzO4ZADaEP0g+F2KSFzeTWZoSgXgyjnriEZx\nWpY9ZUJsIiiScQaWgcPyuOQo88rQfkULzMVA07PFEwDDwyZw+vGkZieR9Mf1\nIOTBt2G7SgaIwYXPCTb+HmxKTEGHutF1clNXMmzcY/+oIyhWhb1+OJLUPb/q\nrasHXX1DsGeyvczzEHlYWSlpyR7g2wJfu3ur+WWK/3KUNLTiVrgdtgULRPt1\nV4cGcWMmDGv4QJju3pIm5pCYtm5SjA7Gh6Cw4ReyJcHYF40UqBxWc4O2ylGX\nBKihKAwkSoxPHHPD9wrCSBnRhCAOK9l9Wt8sWNd75WyK7tHWzxk0t+WxIHyd\nliRQuX3ntKI1hEQ2oAXq3sCGxyrykmYYIWxbReC17/8F/RTGPNCXFWly0n03\n/ND7siYzQLr/WQVsZ0y+5EWjDgu1HiTtzE/yRmmU9sOrunfvGVStTWanwxyk\nZwpObvlMct7TlY3Wdpo6mSzekzBeBvYMvPb6x/V6horoHE/7GtdyY8LKE3R4\nN+9+o435ZHgABNSkoIQz8mXWrA7j0gOlYNKEgeGwB3vdEWdoepK+ApqA86RO\nFPu0\r\n=ksEU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9250d38c39aaaa2210225133bd9fa4da3739df3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/rtl":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/theme":"8.0.0-canary.150f427a0.0","@material/button":"8.0.0-canary.150f427a0.0","@material/ripple":"8.0.0-canary.150f427a0.0","@material/typography":"8.0.0-canary.150f427a0.0","@material/feature-targeting":"8.0.0-canary.150f427a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.150f427a0.0_1597411869161_0.4065640446847647","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/banner","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.bcc58290a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470fc5afe0fedd94112ff2e7eb67dbdb48a13831","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.bcc58290a.0.tgz","fileCount":41,"integrity":"sha512-RRiLFC3cmzzdgq3b6Z/8ZXZoxaPmVXDsLEKM0k8d0H8CaPs2cHnqh7CY4GLxnH3uS3G+IkbE0H4iUK8MuWpsZQ==","signatures":[{"sig":"MEYCIQDpyoNLKUvCQDPVyaUMvxdcsG4eR3Va81MZ4Aza4JvQZgIhALxGxyaVV9dP3n4ZWk0rmWcdZv4Qcmbk+BgCSUKbLEtl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzzCRA9TVsSAnZWagAA9Y8P/0Ko3wReTz31go4whh4t\nr2v20FDgfftlMATz22ZmkOX4RrZQfaMwqPkEJnomYZLoGtzDujCZJrCppMFs\nz+vRxcX4EcG4czxVzazPk7SdkuwxLSvlKSnDBT59aB3a+6DgMn34WpHI2mgS\nfPbIJRQA4AnxDvf3j0h3F7guHf7vEU9GAb3eZ8HtMwLrk85Vj7dVS2vmfebt\nhdB3DVRJ5mjAR0f30O440C/R1opkj4CsugfdDyLocNYSmDPo6hNwMldsvDC7\nheyMRiuY8l4HeswKyavLMUvjLngg1RhXkqNEy95QnUsIdWyAg8L2EYaIWcic\n/WC8vqJLn4Nwr7LekxRsy+OPz/IPbzHazbVBFt9IvWaIqwNxXdcYYKCEC2Hd\notqurJ8VtT4FZMY+kR3BIP1wAbmXtbnoP+oST6skIyF7AeaeJEROZBzdv+Sd\n6iJUMtXCw1z920j4bcTEKVK6ekiY/Vzz6k23YKfoltJ17LVwjTuI98eiB8Fy\nUMMfRnF/Juxx/hX35j60Jp2hldZdGjdM74ElIcvzWEi+tzoow0vKfuOhWaD9\nzp5uXuQbEarPfaqNJOAkl68NF1BdPbxkZguyfzOqXwyYQmnRqf4K5w3FsTeN\nBhYpTBdoheWpOCD3oKx0MOqvMMJjqTbRshmQjiNYRDLmOrH/uPAwrJ4jOoF4\npu6K\r\n=aDnb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ba12c8e781c26c6169e16b167798237b5ededb54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/rtl":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/theme":"8.0.0-canary.bcc58290a.0","@material/button":"8.0.0-canary.bcc58290a.0","@material/ripple":"8.0.0-canary.bcc58290a.0","@material/typography":"8.0.0-canary.bcc58290a.0","@material/feature-targeting":"8.0.0-canary.bcc58290a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.bcc58290a.0_1597447411022_0.9884945095964359","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/banner","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.4f55400bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b5d8206fa513f255a82096cd980a89a51e2eb2e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.4f55400bb.0.tgz","fileCount":41,"integrity":"sha512-UHvMoqREcWYFmqqml5UOaGp0tX3zeWECBtWmLrm9dppuLvnwLequ2k7NO6uJ6BBTKI259ZW5ZclKTT+3ljS4IA==","signatures":[{"sig":"MEUCIGDrjQnPaS1JfEV/QdkwVpC553Y7z4shOSDSNMIa/LIeAiEA6VnR8/3+/cwhyfd0sMzYUasMWLbMIOeeRY9Aag5TEk4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrLICRA9TVsSAnZWagAACH4P/jjH0nKPAOcF3CzyXoR/\n766giAN7GHPMjuXPP8k9OMXaEF1emJf4uZQBuNe0enKafk9mNxGWOrGpUtrG\nWb044fKE6EIMFWWu6DlXV2r+cCL4rr7Y++L/0uUnUGWYDDZrs8dJXDfi0KsU\nPL6ibZE++wNfDauoapK3ZfKhhnC+EU1B3g3FZm+n8w3K1jAuEpdz8VFPLzh/\ndDs4KdozYZlK3zuCsGwHEQYIlAVd8tqK2ifmSpNHC/Ez1X8BO1UNSiWgIXr9\nwxOmoHKOLOmDxuSqbFBRFeEMHXE3E3+sK8uFAY3AUdVx0eLxXypFRw6NgvHK\ni/yKYS4yyULT5EI6BAf5Hh+FnX/AylkzOX5oYn98Ximjh59WIYLD3TaFqXEG\nS8InRj7Hod+1q6NJmfBppLcDzViPxmADQAmc6dTOb24dn0o2sC1fiETvp2Av\nZMWx+SWEiy7+Ug1PQXqlpF0J2HwO5FjyFThVUCCDA1JR/PzBH6xwbzkcoIe/\nUBP2ZgWUT8UwqQYuPOKRaizD7aCO/sSFWtt3SciW3bvJumY8K5/Mv1ZVZ5Ku\n8qbYAYqZdsCY07mOyGNEeqRyGzZgAT8St0KNhmSq9Wi+3aQGXs3Yy9VQtzCv\n2oXaScpmh5Vf++RHGz0zjTxtNAW1MPODQYGRCdCbtmWUY/FnGGHum3XdMm0Y\nPzsS\r\n=P5uc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a9eebd86aa2e631b994a71291827e602b842dc36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/rtl":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/theme":"8.0.0-canary.4f55400bb.0","@material/button":"8.0.0-canary.4f55400bb.0","@material/ripple":"8.0.0-canary.4f55400bb.0","@material/typography":"8.0.0-canary.4f55400bb.0","@material/feature-targeting":"8.0.0-canary.4f55400bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.4f55400bb.0_1597682375760_0.8486075488277272","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/banner","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.000d64815.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28323478b902ee00d748e7cf90999a07dbbe1740","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.000d64815.0.tgz","fileCount":41,"integrity":"sha512-sIxfcDQnh2jFm0Of0g4sZCUDAUdq/TQZO2WmzYwdf0Da+n6qmfmICToj9IKmjiPcx4qCj2qU6YUCxRWGW6lR5A==","signatures":[{"sig":"MEUCICH2jwklSSsvzl6oVlDXOy57Rn8+9mTb/q9ghAUITe8MAiEA4kcgW/sHLAzd/WzjENC2yf4Pp3O5dCd5jY2q3O1HrOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjUCRA9TVsSAnZWagAAMXMQAJZo8sVnfWzJbREGH9+L\nbX5XZpAZMliya5antciKaKL6rI4BUp/bkrcQY/noFXutrv2Y4r+onpiqeZci\nATuAshPYGeLvNy4iR5oUzexeQi8mb7S4sOuh8IUi+jdTdAuQqrLytMQmluCm\noOPA6RDxKgV+3GrQq4goD23LPfux0wouWkzUbimG8avS8Yf9e4fghpdDRqpK\nKYHwHqhuxOLxZ4/gdmWkF7M8XZQcc58Jo4kbxN9qJv2Z6r7/2y0Q4GFNjwTD\nEDwCDeHSyyY9ZmVydN0uAVuvgfCsM298uBtLmPJiSpAiwitz1Iw8RrSZn9H8\nPicBVohsg5lqGLIe5s5UODkkoOV/GRmWiLpVAUkVQp4OFhseTJpr+HoL+2nk\nQvnr1UUnE5vy6f/2pIsCePgWwnWnhS7mosRW6RMVhiveBFt9itzVGmTNEfct\neRf7SOGfDzoPS6I/OcUbHWggqAirJPlboXf4ywTDdaWGvig25MEak/38XyQX\nKbKgIVJcOfTA24s+uRe4yaJzB83rXqM2OlG31gYzpVlhHJ8bQJ0Kj7DmsFPs\njvSBVOhc5nAoZfjyReViiVCfb/HaLe0zGFjcGfQc7/k5JOgmecEjNbSgQ9Pk\nQgh2r6g9c6V0vChse/vTdrfbtLi+oZRLOFOneI3McOblFuqUnqboD4/CJLxn\neEoE\r\n=nXpe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c8a69943d64e6f468c2edeaf1fc6204d372a9fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/rtl":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/theme":"8.0.0-canary.000d64815.0","@material/button":"8.0.0-canary.000d64815.0","@material/ripple":"8.0.0-canary.000d64815.0","@material/typography":"8.0.0-canary.000d64815.0","@material/feature-targeting":"8.0.0-canary.000d64815.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.000d64815.0_1597683923811_0.3778892062278605","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/banner","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.defa599a8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"19414274328a759ba4b7dcadcf3b1b74684bdc1f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.defa599a8.0.tgz","fileCount":41,"integrity":"sha512-WnmvP1Vo13frLp6mEHzl2foIGTbz1Ber0VepWvTSxQghlcuhJysQaOrlWBGzCCEcQurxP20QHAItqZEbl8LUpA==","signatures":[{"sig":"MEQCICR17liXiecixq9V2ZqD//YdW3lEhmvdt0Xfy8VNrkxfAiAw9tjovzhbZxfb9OC7QR33fYfGz3FpilH0QwmNCNfVxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOul/CRA9TVsSAnZWagAARhAP+wZfegXKfsrY3S4a7FJY\nPpo8z1KffAHvUqWIyKRH/NI7bq5oenx9l9/KGPdBZp/5kfY4+dWReVAabNIo\nj2g0qF4M6/0dYI2j8uxo9YezPkFcbo0Axteqt6YpOpw0HtR0YM/b6mr9B/Ih\nAieW3vqDL+w+JPmqe8FnPFJcPPxBM2sPEizEwEJ9QTwGea7XKbBx6Cla3qgH\nokA7ArAcB2ouwgFP2Ntj5tl7BRhCzFum50WDkEY/cZWY3ErYQTiuOMjmYZJ3\nVinjYW1se7IHpCXUT2pIXq4hKcSHRQZb1MaRF530mkqE3Ps5WX1BM5g0iC0V\n81mITPC+TdBujFPFI7yR7yT/1xHrkI2q/2tHpxcphuz0FDe56UXlQjzlmMTG\nEVkegF6SilbnRe/5a93Ft6tPWsKsnLUrevVp3kcxDGv9dDO7ikDCBbwMfT5C\n7NN5qyUqlZmOLGAiybGIAi/gwPBT+xsqj6J4QRqTqblw5IHdAgFDfqYYe3OQ\nSfzfDftUHiNP5gSe7xoudc2z0/HT0keBkl0l7IcNzOBPMPygRnU/RIkBYfq2\nXEMHt4WnMKLc2/QRRRrmrEy3ymUI+yqupTNtGmmJv7V+EY6Z2TgGxU6ew1NP\nvR+swccdsiO6OnqYvjCsD9FCzPRGCYETz4Zd/1RRgyYJMvdjBD0ulgmfm0ID\nog7R\r\n=GZcd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d3ddc8cf9af988fc4a02f26feee3e4ca0184dbec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/rtl":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/theme":"8.0.0-canary.defa599a8.0","@material/button":"8.0.0-canary.defa599a8.0","@material/ripple":"8.0.0-canary.defa599a8.0","@material/typography":"8.0.0-canary.defa599a8.0","@material/feature-targeting":"8.0.0-canary.defa599a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.defa599a8.0_1597696382492_0.3643316466692148","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/banner","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.66b8ed7e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77c15a513518b10acfa2797b3e1bd262c6ffd4bf","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":41,"integrity":"sha512-E1M7Qh52rI16C+tMMg97Ogg3roUH7IdAA8hx+8nkGm59Cz3SSg8IreuCFWG+fHiT7BfjuxJ8Oz7bpd6bRZM+TQ==","signatures":[{"sig":"MEUCIQDU7pLd3Se3Y38/n1lobI/WtUgoggz2bnIhx3yq+Z1z/AIgffs8sLdCi3SpzcAwAQCfrPeRa349IpfUci7yK70m2KE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPCAECRA9TVsSAnZWagAAfVoQAIv9ZdykZg9T+ZhjXxZA\nect9brxc6HraMr0XIYOTpHRugx4DFViqz0JgbJu/APYtbIXMvHtlzPNx9jws\nhJ9T8n1xtO0/3eakhHY2WWS4wm3CcGj6WOGdwNWWLgIpqVkFi7U0su8kLjSx\nbkaLAdaYvDSMOv3FCSlc6Y7MYu5rcG3EzO8LZW5Wrtfc0JtPMczeEVSnw2qY\ntybwpiG5hW+Zz/lfpHI3citx/JrLEJljDqF4YPkHUDmN0090la132gi3j1uC\nBCX4IkASR4W2883J4II/c4WtMUdR5vxj2bNePxoisEwh2ksedlusCqva0pbB\nPxjag0I52fJe7Cg+21l1lrfBmZMR88kfP8J0tFwqEqWfLWvrmNtv9fCqVtOL\nAjUb9zAg08t9EqmLTK55ISBxfJHSxvxU28Zk+driNVd4P8DkU6ka2YRXUOlQ\ndi121oQry1l6YyLdxDSFynLLlAzxKkD7uok+I+KHf7Krjh+5txe7P+T5x+bA\n2X2BzIaZHQhwHY0rHRJNOttEpYH16aEUh492KN5FGO5kADRRx0fALOB2F4xF\nigmswE6joJpKHgJ2QnG+ZOgbwg/Y24Mff8F42jmnW7g7DZu00Oma5vQRv7wu\nuTzoHp4ZOaWt6czUCGGw4X2RpyL9vVLzKlSiCcddKseMyUB+doZ+idqmuNU8\n4UFt\r\n=O/c3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c23c9dce18363cb6806c169d5a516da2a0fcf89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/rtl":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/theme":"8.0.0-canary.66b8ed7e6.0","@material/button":"8.0.0-canary.66b8ed7e6.0","@material/ripple":"8.0.0-canary.66b8ed7e6.0","@material/typography":"8.0.0-canary.66b8ed7e6.0","@material/feature-targeting":"8.0.0-canary.66b8ed7e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.66b8ed7e6.0_1597775876340_0.4629945718411459","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/banner","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e2b1033df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0aacf4f99d068ca1daec8d1140ad481f33f372b8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e2b1033df.0.tgz","fileCount":41,"integrity":"sha512-bgJyXTV6MptwvHjiLTNKg73Wx8iLSdLhQmgEIS5fSQZS86FTmKOqSMm3nXU4pabr542Jn21JFiYeZXq1uDsKwQ==","signatures":[{"sig":"MEUCIQDIQLh5cHGxNAn1QnDuhCPIBspBwyCuELiiHc2OTUgQxgIgUoIlnRC6HsnEdqP6Rx1IEhZdN94vSbJWi15hG2wUF+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXK9CRA9TVsSAnZWagAAdMoP/2TTLGi2MLnTCIGFE+Y2\nrCa7GgqlrUBwKXLQw2RXOCyidMUxU5r6CZL+Sql0kviXk5mPf6pbJ4QC1OHd\nuuF5mE5I24mQa6YJvxWmzywHzhQAgh4QAHH2vD4GiIjwmjWe6l6Y9J9SZREe\nEr0l4npLUl+lCrnaDzkEPKtfKPz4F49LokXZ0FYbze7dPyVcKR2Dza96Pl8Q\naqQO2XpKduBNX//GkLOJrWWFeHkteIMTMRpi6RSqlLLXs6H5jeoEtWJJ7dnc\nuUf2jobfhGebrhV6RXWnLY0HvLXWHJ2Z7/oJRdUBfzhs+ApJXMUh1E874tU0\nsFin5f3cFHVSJd/Gpzgg8TUVWKjWLDuGGv3cSGXvgkdUHT2cEjtzB74/nasF\nNs0e/3Pvvd1fsTwiJS3kflK7FEf3RoQjiMWzwP5EBbWHAiDJKLD6CZTh4UQg\nP8WjqfN0ChiDMbHW55q4C3rD7aamIZ09F2/fx/a9Q9Ydy+rW3yCl0xLzCyoq\njhRSQ6sKEpEn6HOdqNAtZ5zld2CEEUmNsi2sm5oBT9KJkvkKJQl5xQIyKpgZ\n4MzjPOMJUBOzzcCWZPxOpm/kc/eOW6Xf05MP3dQHoG+uzDSLYc3YNKagDnjA\nMSTZRY/+Pa4jt1klbYcrlcnfOtCrRHd+LhhI0s1c1uHbSd8XmbX7FJdOwyPF\n2a2W\r\n=B5Bk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"763ba6b73959bf0639ed8d0c9656a53b18e30c1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/rtl":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/theme":"8.0.0-canary.e2b1033df.0","@material/button":"8.0.0-canary.e2b1033df.0","@material/ripple":"8.0.0-canary.e2b1033df.0","@material/typography":"8.0.0-canary.e2b1033df.0","@material/feature-targeting":"8.0.0-canary.e2b1033df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e2b1033df.0_1597862589221_0.9882891674385079","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/banner","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.2e8c3dd2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e7f53c7b7ed100ab8c7762217d0c2fadd551aab","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":41,"integrity":"sha512-oYf3ChwdpoaMTV4D+lbUuRonKLP7951QptvEc5/doZHzlVSlOsQ0kE7tgUzDLfNEIIMacRNcUTLW//2f3xAy1Q==","signatures":[{"sig":"MEUCIQCt5K1ApaONbIADJ4p9OmFV0KHUrhuL8MeNdDl/SFhxbQIgLA7CbwvRhQJC4iOM0A/F+nqhPd90qlXjvJIj6X9dcUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXyQCRA9TVsSAnZWagAAAZYP/AmJTXMq3VjGZlawkwu1\nMzEv011LxY8QwaK1WioX2IUNC1b21LzGmpwhBX+Ida6J6+6+zMiXdwGRvNX7\nQh3Agp11mVMFTsLJXuO2A997PUasDO2RKZyAaKgNlrMPF9sFAVs/+7xJ3uqA\nbwpAJKqCYd9hAaZmTlBd/erqufdu+Z9e4ZO5EKdj4LSTWBmoj74yVw0BeM3m\nZqsL3U+kz/EqNQ6mUAREvXbJ8cQGcOoRK1sivG5bsbPIQFweXn/PSXR/9c57\nyoa8dzV4v6JiSsJizfnO/qSCdw+Dj28kUd1AxC3DW/yTzKUPhn2SAFmVE2Wg\nL71G8KCTGb/zrk8g2gEVPDmrj1Ry1tVxCZpQuK1EYJ5jIt/NQ4OsDRQl/+M8\np+HsYVBRTb6DdD1e6jXrZYYzc9hpl/un3NvfcA/3dXnaHlz3YsruA2ANEs/8\ncRR1FigVogHdYcyuW3IjPpB/8b2bySoshxPeVd/s5Yorl+BcqD/eyQmorroz\nJZDeQ45Bk2hKPxMfng3+1WsxDoOop6f5Od6IC7pfRs+bvDw676ECa/Bhvez0\nio+Hoz7Ou54bRZNL85ZDWgIlm4owzdgw9bQFFONfhXRqHNpZEvL56oNSCxCD\n6M3/m6qO59i+WJDtaHwOWidpC3TZHHOnRt/GlqVmUTLazB9mAFg+AzKMxUpQ\n3Aof\r\n=K0Jz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"237ca1e061b4efa53d623ea5dc9c9d670d5c9da0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/rtl":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/theme":"8.0.0-canary.2e8c3dd2e.0","@material/button":"8.0.0-canary.2e8c3dd2e.0","@material/ripple":"8.0.0-canary.2e8c3dd2e.0","@material/typography":"8.0.0-canary.2e8c3dd2e.0","@material/feature-targeting":"8.0.0-canary.2e8c3dd2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.2e8c3dd2e.0_1597865104393_0.2906170506077932","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/banner","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.b2e80a5d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8b34ffd43b5833458bf83cce8e1a482946f247f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":41,"integrity":"sha512-Y9Ax8Qhp/y75NUhnT3UoGM2orYDsaSaWuI5wxReOs4TQdWdFZNg56ytO6R3fTZE7nQUotWNXiHfZc+ebA/3GoQ==","signatures":[{"sig":"MEUCIFV4K5SZYdMa1SV9M/e03CrQ3aMbz9SxDyae76JQA9AYAiEAkgB4vh1yUgLqs/PUY7I9wIcjSLyQpjkPNraFLo0AP34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":414814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYQCRA9TVsSAnZWagAAlLgP/3hXN1pkra+X+VXfmC9/\nKlaIA2lZXpp1qivfiDuG6EoHrD2Oe2v+NOI5LtbthdMXHDOLFpm4s5Ffb/dP\nmrhd+W1e5SaS6wOJZAsnlkasK1XiJzAqQuzqbEXq+wnxWl7KhEwJJiVNlcVV\nX04KN1RvWNBgPDrAW+QzlYMgwXE5MqrWQCQpTydUGVnVvQVxgZqsDXvC0+ME\ngR2cMgtDFsUFrVnL9r7mXQOKM22XJ1Dw7uo61bJcFXXvQWIF+0epIvQje13P\ndRU2B7lHDV8GOhHi/J6lTs3e3/Wllg6VCnQyj81kwuon69q11zH7tlU5PAFr\ntcjz3PHoaUrQhGR9JMkCXIw6+YpgKOhBQjwu6KNku9wYOsTF/KNHxYRurfZP\n/vHOrZEkprRvChpVeJoWaXd3VYQ5B7vqA8nE63TtOziux+rbIYJjuxjN1J1n\n0/sonwHvTCO/baRcOvwCu489EsCcSe1vBRuklzTvWxsNyjiejHee0SPXYZja\nlwLCTtE6folcoie9z/hzS15BAYUQNSwtcB16tTA6KkOkWO9ttSP1V5A/HUpa\n2yG4RKYzQhNNjE7U8gBcSDlx8U6aBz0Rentx+tUV6srclFdGxG6nn6/AuPOY\nbi18PRwxMGrg3zv5g4ABui7NH8o0/03n470WEW/91UXljI7k4m/hT/X3k6a8\n55uJ\r\n=APi8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason|string = '') => void` | Closes the banner, optionally with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"84085f6b072572fb6b09623a5f0b35bb95db6fca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/rtl":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/theme":"8.0.0-canary.b2e80a5d9.0","@material/button":"8.0.0-canary.b2e80a5d9.0","@material/ripple":"8.0.0-canary.b2e80a5d9.0","@material/typography":"8.0.0-canary.b2e80a5d9.0","@material/feature-targeting":"8.0.0-canary.b2e80a5d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.b2e80a5d9.0_1597875727817_0.0787350817670398","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/banner","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.ff88df637.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d1129b22f791a6d4e99fb2f1c6f5ce4abe81479","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.ff88df637.0.tgz","fileCount":41,"integrity":"sha512-mbqBfaAHRcrrCopY1i0YafgU/UaEUgzJDp4YcaGVEI5Ny41eui0wI+wtFBxplNep+WqHjV3LWS9LxQCmtna5yg==","signatures":[{"sig":"MEQCIDCnfBC3CB66CMxuG2NRNWcEErkv9pZL3al2yiQOCvPQAiAZINUcW1GZhyf47g4aox2yDjOCHpltw4lOPpblXT3ZuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajiCRA9TVsSAnZWagAAWmMP/1fHttCbUZ54FAovYghv\noHE+s86FARwFd1HYyr1RT2iZJjAmuOqRk1Hs+Vs1g2fa8CnYpm/tatzmGNUF\nZrkI77K0DAWaZ2AHpudLCP751l0f7i6LQMGwx+uRvU8Pq2/JMZ83h9COlC0I\nGA/lgts4NdD90o/sRIICghwMi2BCZX23BPjKkSmk2j7MCHCWDfnuA+KhW6mP\nrqX+P/+dYWli8KCf29njImAf5r6tVszk76LT/hLDEh1DZanTo/4WU3hE+vSY\nwzDF4ziIZUqHPXLf8LL6G+GIG6lEoAKwuwsMMUqHzGQa2vV6SLJusqHX68OP\nCiAMvBLGtT+fW2M9sSWIAsVYupY1YpkA0aBsIbzqFWsIgvrIj9HveLPSIeAq\nCRBYeMqGgePLmpt7h3h8yf1EyWBi3oO8oDiQulPd7wPmfXV/AFBKtFmHOzMm\n3gkXXueqBiUHWhUhQlDxpkcb2dH3fn4jrm4NYN0sbHcoSaBvqe2IoTGK6eqj\nLSjeSgdOJZ0IfSY+UCKcFZ2Z9oGpsNoljhVeX6ZAy5nQeT7UHcyX0NpkQit/\nQ2pCqgpYJK6FfrTkxxqm5kpuf+oYSCTb8L10DkjTxEQMr+HXYpG6n1qoygFi\naZ3lDJhcr3UlJESUGXJuCnGCczXkglZE0/bDPQvIi5+bVP4ijFXt0wPnaEqA\n+PWP\r\n=pW08\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"36ba8daf061692c2f915513485e71707d8eae239","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/rtl":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/theme":"8.0.0-canary.ff88df637.0","@material/button":"8.0.0-canary.ff88df637.0","@material/ripple":"8.0.0-canary.ff88df637.0","@material/typography":"8.0.0-canary.ff88df637.0","@material/feature-targeting":"8.0.0-canary.ff88df637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.ff88df637.0_1597876450441_0.040276852102915095","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/banner","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.32fb314cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceff1ec25df30fd978f1e20ceb7bd264f9fc22bf","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.32fb314cd.0.tgz","fileCount":41,"integrity":"sha512-FHmajFSCYzXmeROwIMHEh1yVPJ92sAXCMY1s5qYwDMLoozcxBb5364V7WTgY9O41+5JnQOTb/VI9/aoAYvbp/g==","signatures":[{"sig":"MEUCIFv2hnn1QTJHfGkKw66Z39+fOWemMGM3BIl4Zp+Kp9JCAiEA2z6H2UGvCVrH9HoEV3zfQY5XhCSI9mLct9a+70Vi4GY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlK6CRA9TVsSAnZWagAA3OcP/iyuuNAwL07sjkErTDQZ\nlxNvezVBM9/dP61C1+a9cAu8x6YWbRFS32CtEI8kBuVE48QcYHsPOTdbVbYZ\nee+T6C4KFuvkCKDFf0d06vEQnjzY1afPeT6W/vfV+CfHtDw1tW/3H4eDP3Mz\n7a5O2vl/iEPm366QCBI0VxJ4BpNaJ6R3NPWKgzNCdjT9lRu7/e63HnvDnYV/\njtUX5NiEF5V077irZeeguj/0wNJ68Ye0fe3OeHDPV4qSGt2K+YFMWFFxebSh\n7nQqLyc1BGQsW5znvB+r4+QK/+D1EBxorcS8HcVru/yEcIz68mafZCAwMWmv\nf24fnmPk71DjTjaJs2ISc0g6UMc6wVdWuYW0v5nDJJxkcjELsTxrZ8KuO+xQ\n5ZRy3vYC9SND7LIyDvxyj2ATGCCJpm1eFABVufJGot9FkJadAQvAfeKRiiuj\npVVxpbd7jKFilijJ4Ud2pyHYRWhkFSG368/c0Fv1cOozbomVPgFk2RhaiV6B\nTQ9LiWT2pT7/MA9qMbh2+42N2SvwGPqLKjHp7xri2c+/0qGm83HzXgYIMWHJ\nBfIa5nMqyO4Zj/IdK6e9Isv2RrSzdWbkrxPM+4HipC+DH+U0bbF1jY7s6pwC\nuotcI9XBNBuNTcCwN1J12W4P+9HdPYayJokq1hXuwJr5iZjj6hT2gx0Mlm+C\niWMf\r\n=NTvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"61108ecdbe311b101b1b87763e8f3283dbb9dd50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/rtl":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/theme":"8.0.0-canary.32fb314cd.0","@material/button":"8.0.0-canary.32fb314cd.0","@material/ripple":"8.0.0-canary.32fb314cd.0","@material/typography":"8.0.0-canary.32fb314cd.0","@material/feature-targeting":"8.0.0-canary.32fb314cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.32fb314cd.0_1597919929695_0.6282104730040028","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/banner","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.546277d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eacb0e7b02a09e9af57417793c4443d791c92ed0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.546277d32.0.tgz","fileCount":41,"integrity":"sha512-DOUjZe1L2zkwTdO8IzUomDdqJqvgS+LZYm2Wj7W2Vyw+S87PROPwy565Ht8lCpHYYMBJkXg/ipuYR2mHDIRV8Q==","signatures":[{"sig":"MEYCIQCLHqgr3jHO5Ux/QodK1mxUtF6Fyq4TCroUfnuhz4tOmgIhAMLOf9f+MQiSBcULdnE4b427rM6mGn/r1FWyFe9h7rXj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqicCRA9TVsSAnZWagAAyjMQAJ0wFc0toKcB2AP3bA+A\nBAkNmWUh/uJLAgAHP8W3dg5AMRObqT8GNp0Zpuqyg4VbIks6mgu8JH/zEm4w\nvIS1ecLLjLjK24eej9QVu9ec2n6yypo6fvIYqMUROtS9Vyyqvx8ZT1slywfo\nemPsSr1CezvaWGrVtha4n0ovqT68NDaKGYK3Jfsb3eoOCogIulbX+Yrum1nj\nQORv/yhr9ElORtA13iOuVXQGpaPTHGS0ovLkdYcFj9uyFPu5QAW08BOudYju\n0lc2b4Xyx8VQpiSFEitbESWXHL1Bu8sECY8OZAaqWTlmha/3go7DMGsqCE4b\nYZN8nyF6Cbv+xxYJZ4U6rLBSZAvUg0texUzBaD1vWPwfAHRTupHb8BlYsCRl\n3xbfAhmQsYyJoRIpat8LvqGomEpcFhhWl4MJSu6EACCObTANjt5G8XeQRe2X\nIUxiWUOAryzTnYm43bTOjEWZwtmUSmLutZGV1kfMzycu0XuZ8YDjrEQI6yBn\ng3WPwJdlTY2VRoUL1QEQpTQ6P+xgrLqoN6IeKJKFiT9vQx4qk25iHtSTsg9b\n7ArWa06CvzR9O9ZIJTRMOAb9t+1ZsuNTMooMwofCj7r5FXeaQCJASRqep2rX\n3CPUcTsS0fKh8XdD9p2LMUEngZdMPpZ+QJpMinRq/lvkwSvrSYZewB9XHJN0\nBMDK\r\n=sSP4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d97622107fec59bf3261ad4f1f3bbe21fb1ff62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/rtl":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/theme":"8.0.0-canary.546277d32.0","@material/button":"8.0.0-canary.546277d32.0","@material/ripple":"8.0.0-canary.546277d32.0","@material/typography":"8.0.0-canary.546277d32.0","@material/feature-targeting":"8.0.0-canary.546277d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.546277d32.0_1597941909613_0.6447112404108306","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/banner","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.da72839f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8be273e30b8dde344266b88be018e74b9c157835","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.da72839f4.0.tgz","fileCount":41,"integrity":"sha512-DI3I28L5Fs68Qaw2VvZr89+Ys5Op+8S218ZgttlinxNdBHfVKLKX0SorZdAYETNQgSRbK6nIQQ1fRPZgWw5sRA==","signatures":[{"sig":"MEQCIEjS6B+FqpS8j3Bo6jZKFghVmmIimPFv04+mZZpgWOcLAiBpNNIA/FQy6xpV3wUsbMoPFWlLr9GJ3xJd5cAaconaoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":416821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrpoCRA9TVsSAnZWagAAX7oP/3aVt6cqftWFEYM/i0rk\njsUoDQiee6D0YcYWrPJf5qOGFoHq3MEvh4vZQtFCqeNKmGcP4CNiyKxUVPGz\nSJ6bKK/CQ/VruYx2B6Y2xeY9K7srU3MT9Pfz80gGSQfnggFtEyCm8y5STAbW\nwt7mZjHuj82gJuNdKNthHCuAZHiHPGIs1d2siXVyryY6KulLzTxSYnfig1kN\nmtsutOqYw9cCE/iP5HSBUrhsGjS5ypT/5kA5koV9+vkkIzdCEqVokQ0YX3u2\ntOyh8jcD3rPEyoEmEUU2PbXqOgsPReqhC3fJga0TXIUfk55KO6ZJp2KVvj04\n4ogBGnnrH9ET02qg2EmMXmgMNJ6Dn91/ZMU9OgINNWFzljiewFzbx4OOJ3bJ\n8NQ/ZALA7KPqIFYUSK2gNOer5th1DEyHIhnoFsNWcnGFlviK8pA/Q7LaZN2g\nKZUJEMZomnChSqXeeGO/JhGEOUFA0RWGvES+U68yIgz9Ji9gG1NCAnqsR6iM\nHKaSTCVq+xXGXkrKyXKzvecwgHS/kVPrm7kLDFC3a1R+Pjm9WuzVaZOSylPq\nsqXEK2ff2iWC38wObTHxyeQb/9ROk/N7Y14yZkRM62rfK+LkwnpCtHcGuZmj\nW3kj6CHD1+r0siK67UjEu/8vvimls257QwfJlvULCDGSsUh9L1tI4MRwKyJT\nj0IN\r\n=dSeg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with image\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1b42b69de51cf24aa95c09d0e08ae1e644c71335","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/rtl":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/theme":"8.0.0-canary.da72839f4.0","@material/button":"8.0.0-canary.da72839f4.0","@material/ripple":"8.0.0-canary.da72839f4.0","@material/typography":"8.0.0-canary.da72839f4.0","@material/feature-targeting":"8.0.0-canary.da72839f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.da72839f4.0_1597946472210_0.9579831683202544","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/banner","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.346069ccb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"decd2b47587fcdeb1fa057ba128d1acb8ac6ec64","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.346069ccb.0.tgz","fileCount":41,"integrity":"sha512-ISkM7ejUMve0CNgyuhU1d3kFELflDRXRxBK6zASQM2uopD2tnDDZdCt6M0ij0LBlAdAX2MJJmKwRfwg1+Alwpw==","signatures":[{"sig":"MEUCIQCmJv4aAih+NhhGBF039HdWFU2VTFMdkqFV0dH2MU+2twIgf8LmiuzC5DA1r+4UoOU8CxMky9RR8vrHbj1t4Uw1ek4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr64CRA9TVsSAnZWagAAPmQP/3d0RTR+yk/CQUtJog0E\nbA2nGAS8Xn3k3CQ9Xdl1MFrE+FWet0YuhRRdjT4PN2KWqR8Kb0pqGpzUPjLE\nk4HsLj3bxE9nIjXanZ3dEEawkgSfQuAzot9+Lw2RuTluEN7WFsIAYNxgOQu5\n8oHGJR5tuaBJvNIIDEmLH370s5WoBV7qWqDjv4LWhMJzFAZkL2aIofTuiu6q\nmQKTg0SfZVUcwLRxrCpvj9TbWzPWPE2dRZSgP/8DPXGhRK07psdgYVRhIjrs\n8W3rU3AimjWN1fJeJdGslMRhLdD+UcIzv+GIeJnrlYEC9OIRlCXvaNRanvtL\n67EtGIs4AswN2n4IvDD4CCOzk6QssmayUnhFAfsDP3L6dyMwJK7AbEDgqyKI\nQy+CtFPdAQWk5ahthVbDg8J08lt/39Zunz9wpA44tG3xVfStTFf04LnWsqED\nKSRw/zf6MGRpq2JhMzRw0QXzdQb0rncZmok2oFt2pLKD5I/SMagG5atE/NMD\n2ucfyVsH8g52IHUTauacbitQvtleEMhwV94C3nH3KlcN4jpnVOnnLtZtUmKV\nlI1K0dNDBTxjyYOR/wpZPXko4YBk+HiU2Lky+9AwKUoFDLzDlJUooHpqryPE\nIXBiNt54Z1MdVoy9W0qDnm/xqs/11L/HyVQ39MVATu7wwpJ7N+bvUKYwecP4\nKh5B\r\n=/dfD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cf298389e23ace16c7e4682ded1e492e489011be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/rtl":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/shape":"8.0.0-canary.346069ccb.0","@material/theme":"8.0.0-canary.346069ccb.0","@material/button":"8.0.0-canary.346069ccb.0","@material/ripple":"8.0.0-canary.346069ccb.0","@material/typography":"8.0.0-canary.346069ccb.0","@material/feature-targeting":"8.0.0-canary.346069ccb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.346069ccb.0_1597947575671_0.8936135487625259","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/banner","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e27c5802f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4510f35155b6ad273fb3bc0a1965a0b76d3f3cb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e27c5802f.0.tgz","fileCount":41,"integrity":"sha512-HMhhlYX+nPI1E7S0LJYNKkGNXwTo4tZBdWBL+ebBSkVi1XrDOtbUzVIgrt5DAyzIXTac4AvBTC+qaE7pJEWN6w==","signatures":[{"sig":"MEUCIQDNNgEp7e+kkYCdCL5oNoYw2xgGRlFB4rXeGMzX8sBBLgIgKaIzuG00gHYQ6GBCmBDSikM3NdLHEflFDv5dAk/C6aY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPswCCRA9TVsSAnZWagAA2MAP/RY9ZykM4v08+033VzeX\nTIXcFlCG0TuluXfDD9dlEH2LykIoDSxGKXF8KU6nuQiD7Tr55OhA6cQTHqlW\ncdWvD/KaYDUQghQBrvFeGOFwCQ4z6c4LHslLNjIe8YfMyj9JnneUqyWy5pvq\nym/b2Uom7jXQofdvkbAnq3N/WZ/1pkyvktO9pmk/zL+dPIMzxeYtS/p/KESj\nuKXne/ixqbiDeTwE8u00Q+no/WE30dfmQ+x/wGf3IskTzWIuqK421ZALna2e\n441W8TWZOrRzk2wBvFsZx42brNg1VB6VC4dDoYRefbdYFSn9LPhmKGA/fBKJ\nhAS6PO5ZJawEF6Me/dk3yhRDXJyQWgZ/UIg8qS2GM4LV7IXMvjNDEUqllNCO\nalNcbWfxOutFpHQfvYHRryX7aomy/TjptEkIsmjBesSluBvIOEfogKQHotbZ\nGXanZIZU0QVUMnkzuRwusNfOys06R4ybcTxPMmwWy1h2/r88r9tynbTs/fke\nWIM+ZzUWsfRgRld/F9NbTyExC6fYjc+5AlI+jYY1AcVVVT8RvOUhl9VPopWV\nAk3WQLMnb4BfGE15LhN5zcANvxoujoXr+DKydXv1Cqdy5W7CBL81w4kAKri4\n9YzaTuYNYTY4eSpqlwiei8hFRW63SXLDX6Idii/xMabpKIAXSuw1YVHnCTIO\ncFdz\r\n=81MN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2c9246ec446246e8fcad54982848f7cd5839f69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/rtl":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/shape":"8.0.0-canary.e27c5802f.0","@material/theme":"8.0.0-canary.e27c5802f.0","@material/button":"8.0.0-canary.e27c5802f.0","@material/ripple":"8.0.0-canary.e27c5802f.0","@material/typography":"8.0.0-canary.e27c5802f.0","@material/feature-targeting":"8.0.0-canary.e27c5802f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e27c5802f.0_1597950978147_0.9883667993821836","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/banner","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.f4532b9c8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dc503bfb04089cd83a46f8b10a381f938b361b09","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.f4532b9c8.0.tgz","fileCount":41,"integrity":"sha512-YEaNf4ucM7OrXZO7h18XXbYX/p6tRek6NCYzO/GKa6tOdM+OvDYTgwXHrdLmnVQNo9fpdILNs/QA6VkqLbGUZw==","signatures":[{"sig":"MEUCIQDErZtFEjZ/uGLmIkZ1XyUbDE679uVRB3mCnv9dbmGJBwIgW24csX+xXZmzBjiv7eGg4LLi/OU91NKagl65xwFL2rM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtX1CRA9TVsSAnZWagAAHP4P/0Mudlik7nYp5lHxM9+t\nnvNV7L9unv59Q0uOclTS+gUYBIMfIMh5rOa0bS9uPLVuXjKC44i/7loCizhR\nBQqYEyqQFrL3QBbmmGDOf/PghdqLTstD4Cotozqer2hFdQz4/bkTB+yICPbv\nG4wzAKhpLHiEtaikIwkWp1NT8SzKbwxkFeDmbEi7sPfpctNrQG5e7dcdDw2K\nonSNG5Au5J8jy1viPmdG9i3/78nv7bulbc+K2tk3CmswX45ZDCUOBbelv9Ef\na9O5j3rDzz4ma+OPofqTZHeQOqyGzbZiMyM8kqs26RHE0ENGLK6fs5LkamGb\ntJoQ6AHETRM/J9ZexAhRf6xx/K4i4Vf88jSoq6yu0rE2oHxjnXHaI32h+MkX\nx4yZYqYaJRLR9iqfGgPWpQwfAEdrll/Xeq9qASD6cyN02+8aFeoWXPEthmc7\ncLaCc4X/uZTk3IMVBh0BapSmDmlSEAqQyElqDeS5msoEMoc0IZzz8kVjWiol\nDy47O2WCyVeILWtGkprVbl6SPjqwgPjPICSDNzIKqwxZW5K8Z5Bid23YTQW3\nCZ5RdguWZOpViD6tx5EhGLNooQF6SPSUX/EW8idacIiLN0b47eNJR2IczmxX\npMAK45uon4KceKNEhPgRjKBaOI9d9DuPmEv85+e15xyzXN5YRsw2HaI9BWNx\nAFwQ\r\n=hugi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"be56493a06963f21f1f5343fc6db3accdc74216d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/rtl":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/shape":"8.0.0-canary.f4532b9c8.0","@material/theme":"8.0.0-canary.f4532b9c8.0","@material/button":"8.0.0-canary.f4532b9c8.0","@material/ripple":"8.0.0-canary.f4532b9c8.0","@material/typography":"8.0.0-canary.f4532b9c8.0","@material/feature-targeting":"8.0.0-canary.f4532b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.f4532b9c8.0_1597953525383_0.23503689896223423","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/banner","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.fbf73c2a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b7b8b26002d58f248c0040c8e4a9035d180daa0c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":41,"integrity":"sha512-8pYUNsF/U53RZbk+iHRWdYw5H9xGt6NpJopkOHtzQ39AnSdUXxE+1YUGSw6SUtr4yhBR/YsFNGjrdS7qoNQLiw==","signatures":[{"sig":"MEUCIQD8KimOUwPDE7cvIotWio+0le0HJN4r+QmD46mn1nvdWwIgCa9FGcSTgKmq2kz11qhou0ukL4vWfZ8oiGzTW35UvAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYWCRA9TVsSAnZWagAAplMP/i2YVNsYMQOhMWO2Hdhr\n7lpGyNZ3DONqsqvi88yYKsFfqK+pwKF7UYKHTmEwbVZTX/5X0l0sB5EelbER\nWvUCUl3z6iMErAWFR+/xIZZkOnfZneWSXnSt1mkoXiuSHu1D0+ta0AQhPIdS\nwY2h+H1kgKktAz0g881fxfqakdTi6nR4Ib1RpAyv57zj6zWMPu9aDlqndH5j\nWvsGNMhPEZTTu3JkppSAO3i+t2Dy1XVAbR7yxv6dencbxOIDQYpBjss4Vs3k\nzjr4PwVwqaHLi4LKTxqsaVONJJe/jGDVzMdASZDduhHeGMLtROoO1n6YNJ47\nnF4rvIaVu6XmHUMAN1kKVnE6vstzsvurLvTCgToEgN+UyYLp8UslPh6navVV\nyystgNimJH9p+arhPTeWdQ2I1xSOJiwDrCSmcKDT8B/WgE7fGDmNe/gzm9P3\nKkRB6TMBorcdMLGKaUqIb3X6SUFM+qGD35jG1mPRRdmNntCr0Vv/WjUMRoSN\nbpRqZbZSJeO8so+3tyur0nVBbTUPI75gAC927Cgh8cvIxiPf2v0HllDb/8Cn\nH76fmf+hGI3FD7xBmdQHCzbNBztsgx5F86KYHKYSYNi/OH0RUJKysCANEoIf\nrOTROvG4aaSEe9dlcB8RyAG60aXZGcblDvgpgMdojjeR9UmzqobR0EPtPE2I\nE8D+\r\n=zS5W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"64db59647b6d726098d0871993ac5c563d92be26","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/rtl":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/shape":"8.0.0-canary.fbf73c2a6.0","@material/theme":"8.0.0-canary.fbf73c2a6.0","@material/button":"8.0.0-canary.fbf73c2a6.0","@material/ripple":"8.0.0-canary.fbf73c2a6.0","@material/typography":"8.0.0-canary.fbf73c2a6.0","@material/feature-targeting":"8.0.0-canary.fbf73c2a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.fbf73c2a6.0_1597957653461_0.33837678222762957","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/banner","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.cf800124f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"50d6c95b64ad72f2029dd65c04a7802c64e46397","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.cf800124f.0.tgz","fileCount":41,"integrity":"sha512-LzTWdJG4j+aGxmxyqczVt8inu3coPuc1YgfGH6M38pthaTwK+69XZioU0vZ+tCvU3A1wzT307PrAoS9GxhaFlg==","signatures":[{"sig":"MEUCIQCAtBJJ1bN+gR77cybXIVQlgBozMF8o2wrU0jHkp4VB7gIgQS99yuHNVC5M9k+/TtsS/3A7GeYQy78Lpv0fvPKYtpI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDvCRA9TVsSAnZWagAAfboQAJYhh3Cs+/s8dT8NW8dA\nuMmNFt2mBevzE9E2Q0e1l6bmDRUkdcp19z2jWqg0V8s3ABinZfJuHHsBoFjd\neaFC7GbMT2UGRxkX5wSz/aZdvc7f9qffTh9Mab7yiGbDaeVt3gfq887d70Q0\nZmgFcYFewZHiQmdN4WpyvM9Ya06WX/kVetL0rgAP8dbPa32Bbm6f2s6/oiOG\n3tix1HI0iRlyXEf1TQDWT9jPBMchjjKGpa2f9GICJuZFKFl1C1Kf1UXQ5PLp\nWZQimYAdRKPoyb8Ohvp/YcE6jCiDhA4Vvu1Ike9ggGOuU/KpINLrO/glnIRV\nVY1853wvYUjK9YluJJuw1yyTbfEtatBN1G27CTGG2QX6LvOw6kF3dzfvPcLN\nDJyMuXKc+fJo/nbE06tNcW8sfp0AcXu6yfHzo9OqgYo0KBJANcCblbQRd/49\n+QHweU7lzLEvPND9McyhMkHG3c67QEw2NdLMFsrnq0Oi3XNmnqaKL42CqiJ9\nscUp4vpi5BRzEP2m3MM7F/Pne19fdoZFYcEZTxR0oOfPIm0acmMgg4NC00Bv\nZ0hG5Bahp4B/fjyqxC2X48RkDbFHkR1phcLgPrG65aEoiNRPHGLSWeH8BHNK\nWjXr+Q2XPVHFgWoVSX97qE17QMXOyallKm+KbaVGF7DIHvTrg9sMDQd8rdTE\nwW4O\r\n=ISye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b15bab8ce97a47831c29a3b0acf1c34e0533b8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/rtl":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/shape":"8.0.0-canary.cf800124f.0","@material/theme":"8.0.0-canary.cf800124f.0","@material/button":"8.0.0-canary.cf800124f.0","@material/ripple":"8.0.0-canary.cf800124f.0","@material/typography":"8.0.0-canary.cf800124f.0","@material/feature-targeting":"8.0.0-canary.cf800124f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.cf800124f.0_1597960430541_0.0846334991385822","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/banner","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.95e4eeea7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"684a41f425158a820f171447ac6bc3745428cfe6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.95e4eeea7.0.tgz","fileCount":41,"integrity":"sha512-Krk2EwFcQwaHQNWEKIcWvAfhfnbShdHTWRxqQbJTtNUpW3366UoB2I9SozpMBHYfblHPMppIKa5TYyl0li4ftQ==","signatures":[{"sig":"MEUCIQCIIsoONAgRoNcmSYAIywCbRbGwc7QCBNdNK1y52PCL7wIgaL2SBoNolhoXCUsgXtzQToZ0kfQ+28Mpll23amYVce8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdyCRA9TVsSAnZWagAAIiIP+QC/8CjXrZTVy7Yg4jBX\nsKOTg4gRLCXyyRVKHWbP0T+nPRUzzudF7rMkW4ft1Q9fVYWFNjJ+nZXbH7QJ\nVpjVgEKhlU3mGBAiA5gkg7o90ngwUFL+cgPyOLdbiZElNiBJs3OZkL+OiEmG\nnGFf2SzoUFJ5Y2AjS6bPzbe7K314jetI+Bneh1lDCLIa+J+pS/wYQG9SBqZk\nSBkAzD6uKlxjHyrQVbIYK0/6Ur/Ts6QiUaebRTTp924VQlOFnUGf3rKgruoK\ncG3eHJmatNv//EAPF6Y4SpiuPo7pAaiRKCHi4UtwltYDVz7kZNRpdq9CuTkM\nKtu3gvPSXO09T1JS4Oj1gBFst+m7iketpCiHWa+HfB1E8T9T9YLVPC63fFw3\nIg7g4JVz/fAL7fYSaFWoYy27dUBMbiYyBpPInqMWRj9oYRg/uVF9VufMoI4a\n93Tt89sJ25VtKOQQ3YjtD6EXWQgaqlQzBNrjbz0ynSSTCKpxHZl85O6NbfoM\nYN/wBoAd0Ku2yvoohe1phMV+Mgq7y/RMUgRnds6UmO7e4ROa7gXLQZ4X3np9\nVRPuFQOKaoQyvq4pNUJdNqCxm8d1yYiHky/ghhCHvxnuxuB9B4puCSWsYmDf\nOJnDb55txeRhbhC7DWE44u7Jn2qsGniR7wbiQIaC0dmKklNlZdhVEuzvb7D3\nLXg7\r\n=8GD/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"be1ca8dd4a02de91f796aff6f2a9fa745f02df13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/rtl":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/shape":"8.0.0-canary.95e4eeea7.0","@material/theme":"8.0.0-canary.95e4eeea7.0","@material/button":"8.0.0-canary.95e4eeea7.0","@material/ripple":"8.0.0-canary.95e4eeea7.0","@material/typography":"8.0.0-canary.95e4eeea7.0","@material/feature-targeting":"8.0.0-canary.95e4eeea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.95e4eeea7.0_1597966194384_0.944721978801982","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/banner","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.91ab1c62a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efefdf4ff9a10c348af221b8a65b003d99dacaad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.91ab1c62a.0.tgz","fileCount":41,"integrity":"sha512-ogb/URQBdoquGAMDhuja0tgBh/MwMfqKmKSSKZeM7M6Hx/INFckqfRH2IGut1CdLDIAY2cOw+O3+KscfF7UHPA==","signatures":[{"sig":"MEUCICM0bn/7+Ne5JTvaaect+9kOfcnTGrPdClmaSwBv/LvZAiEA/oZN4MZpEE5Dyg3KLBhSZy6Ozs74owjHyeYs57rGL8E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":423809,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+R4CRA9TVsSAnZWagAAe/wP/19d4/vnWeEs96SUYuEL\nJwYmyCVQ+yc9vxSP1bU52wPNjY7eYoJcL1E5e80bl+VWhHMI8E6t0Hhi2RBC\nTPVKjxKQLBpGbkgUBKUXEm63bkPwZUWPs41Z2KkGlNfBKlfwz5PpTb7LY3X8\nW1bXFfVTFGjnZ6HUMEyJfmE2VmQrFpL4qUM0aWegEiCpEn9Vz2TRjYs8+V0C\nH++/0UAGkgrRXp6zyjC0ImSIudSyn2DjcL2WSnMBc3fmve8ZKRn88Vxr6X5/\n9+QuC9HcTEUlVCCB9zjMLU0f6psLEHMGbCJvhMwxGXglOFJkFMtsIyw8O/1u\nyFzLmMwbchhr7Um7Qo8fPIfF+6YZZovKj5Foe21kRH0hhzA67VBWZ+gX6PY3\n/S7A5o7i/SMZDO/qGaiqw4WOsjoX8O/P+EKbGJg2xRiYN8GACMCnNQ/UdqWT\nH4bjWpy/v76DgZqvuZ+RH2FT4cZYSbyIPSmH2ma2WSPnLlGMqkdM/+hNwGY2\nlsgBAukx1CgoVcjpNcyX5ADXmwyKwj3bBKfYmzGbLMZH1CnK7Y/PE5o3nJIS\nmU+z5z9q3ZHEMLrqOPj3ah/kqtTMaheB1tQe2OF6Zw/MsK/vLISksyKX1Tbi\nbIcQi2lqw73xN5w0abvVh1N2vukDTav7cuoZdCWxvTVyFQmrVFba4YgqYsdy\nHfsf\r\n=BbQa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"389b1e8f2b60ae90730087557ec80e133f0e0129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/rtl":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/shape":"8.0.0-canary.91ab1c62a.0","@material/theme":"8.0.0-canary.91ab1c62a.0","@material/button":"8.0.0-canary.91ab1c62a.0","@material/ripple":"8.0.0-canary.91ab1c62a.0","@material/typography":"8.0.0-canary.91ab1c62a.0","@material/feature-targeting":"8.0.0-canary.91ab1c62a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.91ab1c62a.0_1598022776158_0.6110087875863717","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/banner","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.58eaa9f02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"effd51bebf7b82badc9c8589acae7cab9482204a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.58eaa9f02.0.tgz","fileCount":41,"integrity":"sha512-CSagNiNu6FmCQEJI4o8X+jz8acMBvDzCoRp37zkNCfWPgEhnMCqyPBKv5IqQn61w8OWbqgq/W+yffmkzY9frhg==","signatures":[{"sig":"MEUCIEd5OqX9+sUb+KgzmVK/0KxU/hdxH30POoehCqjgZcEcAiEAksEZWtd1b+FiZqvUfkigB0sld/pPjU41pSC3ueZ1Jok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgYCRA9TVsSAnZWagAAsmwP/A/5SvgAUtzsUYZSjIow\noIRUciDbWn31HZYWjRIjwMNQn1lzCTANIaWwyQBjOp9+8XdhwVeAf3qzH14m\nHIAex+jE0qENbeCS03O6Cp0K7cOiBNtYhK+gpSttU63TicSLs+9qeZcvsFrX\nEwkk/p9qTohcMqZGBRV7VVflLUmfPG0pdWIAvrEWoq1kJaJasa9gOh/PwrLy\n2tpx15VfN6NqcTUCEG1ADK88W4pslya1WZ1QbFRqC2Z2MI35xmndYzv9vXgf\nUD5uyKw0e13+6jvTXuXIxj3/CbdeliXigJiNRjt/WItRLaY/l1j/hIaflp5P\nKFWe3wo0ye6VrfWXmb3dIOg0petiIR3cVqKjmfiQKXu/WJc7YIlVvH6ssoCM\n+NMscFRs15mCt+0PNw33Kl/a937erQy45FOrhfEGKsnldzDkGzYb7m9xdx57\n4mkvlVrjM8gmNb2VyfApOOx+fV9k9BG2jqmG8tRxJP2FlySbtufdytdqiTr3\nfTquWMUygj/y5QoyfV84lbilJYkhtfm4eaZXDGrA0URNuas050ki02uky6Wj\nv3LBeXpyvMJMean4xtSUS7XaquQIqgbZ28/y5+J2p57YIcemtQlJ0f7nmkKv\nGCw5MiyvSb/IoradjpgXDGa93k6KSmxlTAudjw08XjcmF23iJRR8T7cIEId/\nLPIc\r\n=O2O2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9f3944d638392fa39379eeb30bd7348c9578f67b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/rtl":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/shape":"8.0.0-canary.58eaa9f02.0","@material/theme":"8.0.0-canary.58eaa9f02.0","@material/button":"8.0.0-canary.58eaa9f02.0","@material/ripple":"8.0.0-canary.58eaa9f02.0","@material/typography":"8.0.0-canary.58eaa9f02.0","@material/feature-targeting":"8.0.0-canary.58eaa9f02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.58eaa9f02.0_1598040088477_0.5794001271277402","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/banner","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.238216fc4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d8af555a37370083f75c76c14210420cfd69068","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.238216fc4.0.tgz","fileCount":41,"integrity":"sha512-/EyWlarUfKkAokhj7zlktW85FBZbgZU0/XjF8vfK1r4fAnfMqoWyON7x0hinwzrJ6mW53bUPNzujDXBOaiojzQ==","signatures":[{"sig":"MEUCIQCg0FhHwyKzjUEdmdIXw6NyB8pChufwQk/MHIHrKXL0jgIgFtdCfkj0nc2DtBNhRP3yNP3GozpSb9yaw6SbKm1XO/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9/ECRA9TVsSAnZWagAAK4UP/1wOIODE3OVY79qWJNny\n6mYidKWQgVcBeFbqa+XQfpWqu663bn/y4UkbBhULjTIHZtNVILRTel8N/2UJ\nVmG2wrAt2qC7bpU+x83ZdODqvBe97MweRL/8NZrPPo6+8jHAaam2FwUTAK0V\n46EO4dJWsCJ4AQgjqPdPaECS68NaHAPvXczsqqd33Z9BppBOSBAuIKN0xTkk\nqRyUHJZ7fUmKhEmjcUfk+PsiJvaQHr7VGOZ2nWUDxrjTZq15HQ8oVtTHUIa/\nMnBisna//CYIa1+0a78+Irb1h+3T+VOxbuAtr7TiIgOp9567rwPn6jZQQBRo\n24EksXEpMTqV0sFVKMbP3XleV4Ybs8PiF26/YaK28rn3uh5KqmEOaFS1yJHa\n3t2WSuNe28ndLJrYWgHBaU9P7EAz/+4cstTgBtZGkM+qaB1YQOJVy5QNRnPT\nbIZQUBIs0enDYmaAbvJMEZdtZ/j/SPn/CYt2hJkANno47xoeMl82WmcCvCXE\naBKrkC3AbQq5IUAsWrTwEjXOZivHxU1froZKigd2MgcgdX0kS0lpOW4IVehP\ntHhcK1FkXOnt9fcaQHuph+VSXusGopU0tr9n+kWfyaJBi68M8frGRnO30zx6\nSpK8PgFuzUpRZkglj0dKqoTI+gjYPVKo1blqPCCLhrN5cPLBBzZI9ExViunD\nTjLm\r\n=YPev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e224b287e176f866661b15e2ee791e17fcc44aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/rtl":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/shape":"8.0.0-canary.238216fc4.0","@material/theme":"8.0.0-canary.238216fc4.0","@material/button":"8.0.0-canary.238216fc4.0","@material/ripple":"8.0.0-canary.238216fc4.0","@material/typography":"8.0.0-canary.238216fc4.0","@material/feature-targeting":"8.0.0-canary.238216fc4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.238216fc4.0_1598283715733_0.7850685265968935","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/banner","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.a1c65593d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f878aabc6daaf756272e1ae035b13d2bb966d8f4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.a1c65593d.0.tgz","fileCount":41,"integrity":"sha512-6TrtmYDG8OYJ9SqMSIR7MllvkHrsbtyp3iuiV7zfs26MgtkkfE4GmfyzhnldigcYdv15HY38l6/Jmkcj+TtXrg==","signatures":[{"sig":"MEQCIEtbXnMpwn5THphsUjB55tby/XL1SP3nJX3Q4y7sL6Y4AiAarvVRl8NU+ZGG/LMz97pkgwCWU9TO+x3B3xkzvS/ljw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/WCRA9TVsSAnZWagAAE2kP/2vAaOCVzh/4nXEFdmqP\nGhyVGsS8XXPm1ZVbpKYZwhIsHb3R5cXxVQpbbwC9PLn8RkNcJSSzdN/AYyKX\npGUpIKE5bnxGhzM0555HxFrbLBAMYse1FKQ9KxyxdO84Or10U4ENbEwdA51u\nLqm9l+jvB9IjARe1ic0B7BzLRA7LZoHfygFyuA2t4BC03YFKNdBmgPLOXYMV\n5mtxa2hD5B++4rfYlcq9S3wWZE2tlc40boGCwIYSnH7h2Agrt5I1KkHl7sZs\nMVHso7IKkMQXX8/jHiWZrvORS9Vqwm4DAWBugOqD0nfXJ3iImuJ/YwKTYPaI\nbLgXp6zhTVEq92Vv5aMrebNbktqsHXod2mHgS3buvKepwK44/cIujvGdQKvA\nGD70LH1icc5hRbU4qY1sLUUvjWHBh4wmwV0nLLKQJfAalT3GmqOFq+dQTL8u\nUKzGlPJfG0xtCgELI5/sBW73LRQDI8hAik2u4ZJqjQznA4VqLXGAkTId1SPc\nmnYuZWh5y2BiKGwP2B6YN4/g3HSjZ/c3YsLA8JvPc0gv2oseqOms2XBhOAmN\nquH0b7vL09UvRPry0bz0reZ+mLqVvYek9mxwtZzjFsOkExDTJsR1QiwpJAbl\nOgy/8Ns7EC4HEHhRaPfzRUe0ACOqP5yYsRKBSdoVvX20m2xzlmcBG4VRFilE\nZt5A\r\n=b/1v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"71fc6b5e7b16ba7f6d37b724ad4982780c9c9932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/rtl":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/shape":"8.0.0-canary.a1c65593d.0","@material/theme":"8.0.0-canary.a1c65593d.0","@material/button":"8.0.0-canary.a1c65593d.0","@material/ripple":"8.0.0-canary.a1c65593d.0","@material/typography":"8.0.0-canary.a1c65593d.0","@material/feature-targeting":"8.0.0-canary.a1c65593d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.a1c65593d.0_1598324693875_0.0002411531099519859","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/banner","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.708cc09c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1222c5e4f65eadce5511aa90265a62d475a0e9f0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.708cc09c4.0.tgz","fileCount":41,"integrity":"sha512-TdHP7Ukl3Oyl+9UopKopQvdvY3xB4Gxbpz+G4xSi4QMbdCRc4/eMM4iJI8/9VpQgabVO3SB5q+3bO1XWpebF7Q==","signatures":[{"sig":"MEUCIQDFZRXRXZEemkX6+vFIdvEuuk0PjIAZBYI+8QboSzza8QIgdxoAPIkJ3hXBlUtwD7A2soxIv9D6oYkeHSVDON4T5kM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTTqCRA9TVsSAnZWagAAr04P/1Dq6eara0xC01wfqDOc\nQ4wINLgyOYEbTGA5H9vhvv/Olp8S9G/uty6EgQdCBxkss1JY2gijVCvfSZnV\nldeQRbYaO7taRhr1i3wW4UFwzeAfYH/BSlVxdALHnolg5oLaump+ijoCzYbQ\nkay3x4hNzkz2ybbyLAvySwaiiirCKEeY94Vv27wQbGfHqoRa8ngdoIHickxu\ns5tt6MwQ5FeJrZx3pqnuBaqcZzwqaMJNRdX/6uFAGWsjo3RDRPAjBi+rNyK+\n091T6/g1ARCBPaFNx6nKxPKYU8OYNB4ZXqLYyIdaf6JaNs7NnnO6MzrF6USv\nVdQhELHwTg6TNDmtZ8seKCdarWXrAaOQUeuoEYpFmDSSIhTENTxtutgp9fK1\nuIZckUBo71mGtvCulbrKzNXkaZEtWRys51VGWrBPXm2oPESg320Rg6eK/AC5\nbfV81tD/gJLq9w+3Nh/hzfzJ1gVmDrn7gIEHxf5FwPirfMqd5ef1unSCp1+3\nmonLh8ruck31M84o+tpt7LQOgIW9jG9/t/NRAao8ZgFXb1QJZ+yUaC0eb3NQ\n6I6UyNa0fDk4L0mhaAlcGa/8Ya3Ykcr5Qz/VtE1EOUTc4+7WaUlp1mLE5Tbn\nMfkdeB38zuuPT4LD6RSnbN7N7a95rcSYld9VGoWE76r0jcpbkTvu92GAKgaC\nedMd\r\n=Wwpv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"41353a40a8a6a80ac6438fa702cff9ca690b897e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/rtl":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/shape":"8.0.0-canary.708cc09c4.0","@material/theme":"8.0.0-canary.708cc09c4.0","@material/button":"8.0.0-canary.708cc09c4.0","@material/ripple":"8.0.0-canary.708cc09c4.0","@material/typography":"8.0.0-canary.708cc09c4.0","@material/feature-targeting":"8.0.0-canary.708cc09c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.708cc09c4.0_1598371049855_0.2190395110751049","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/banner","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.19bea2ad3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c80a5438bdc5104972a4aada908ac320b4f02ce2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.19bea2ad3.0.tgz","fileCount":41,"integrity":"sha512-AC/D0fWmjdk2Xve819dAgVtUuLfKZuAtvf2LonInSDCJ8aPuVHkXsKhRZyNhi5qUeiNBNSIQ6c8TMPlexSzczg==","signatures":[{"sig":"MEYCIQDMGfiQ3Xg1LOVRAN6MNzW+p2YHtgOxn/JT6XRkncAlgAIhAI9AFL14mQWeGHgmAhx3u86b9t6ZTrtG8Lr92JIOU6IR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7zCRA9TVsSAnZWagAAN98P/RX5wknicc9R5C8ilNdG\nGCfszu5aYO+u3X2XyExq/gk10hyYMlqIeXWtmeK3HXNe5zEhs0z8oWkf7ncP\nA3r6zR7VI351KREOSRmFL7AMeZeXXwT4j2TaFxdgskIMf75ipdjo+4oNyzji\n/DWfxyonLMKSergodBk+lhSAQycIOf54T5n+07FPgTQoE/kHN6zotzSCpkLc\nZQo98DedkTb56lWb3d3eNhX8jrmqNIV9j23IFj8avL7S1aGa8L/oidg7N++L\nXbQkHNeegvtOPzpA2fMaJTk6IHYk55YaWUKgvght3RnWzuJrBbFnPz3Bi1Qp\nRPjOYNcBQz/fNT55i60RphC5KqtFU9pwrGX5kJ2n5+EMj8qFIuKqKO7wIgbz\nnmcsRettKmwfq9etb93DAJnKEzk1ddVUfeJ8fx1RHoVeavXLuzW653DPxiWY\nnBdAhxfG6fToW1yqRJCctWZUA0k16BZh/mFi5KPiGFOpwS6N0pm3wJg2ZZrW\no4MkuxNsj8g2mUrEc17TdGdJeYhhBObRP5SXHFuqdgV3at/OegoA3LzpDcHT\n46dZ1Y1Je8vesw/OXW81t5c2+87CE51wIlA2+YF+g9Gs2Uy0nbc04qrB2voj\nL98dSj+uhlhfbJ2ag9HDm4+YVkzzQ601ifakI+0M6EgP/F4B/Q1aP1dltGXs\n3M1E\r\n=Ff95\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4f1ed83b6a09dd3e7d24508d420cd99be9dd3893","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/rtl":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/shape":"8.0.0-canary.19bea2ad3.0","@material/theme":"8.0.0-canary.19bea2ad3.0","@material/button":"8.0.0-canary.19bea2ad3.0","@material/ripple":"8.0.0-canary.19bea2ad3.0","@material/typography":"8.0.0-canary.19bea2ad3.0","@material/feature-targeting":"8.0.0-canary.19bea2ad3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.19bea2ad3.0_1598467826878_0.3995511034159298","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/banner","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.911014711.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c029a3fcbd42c0acba92db95b196e0efb0345b29","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.911014711.0.tgz","fileCount":41,"integrity":"sha512-2g3ysH2qBGmaycmKXvek+EPSYQGiyVRKKL7XmZejO8z9mzE5D347HHw7zeuFZVfY6SWnagrlO2AV/jtmoaewyA==","signatures":[{"sig":"MEUCIBV0NMa1P7QErsCSs++4DLBr4TSRHdd81BW7af3HoaESAiEA5yY369atUNnDzfmA02MseD88fL7E4P0LhwWhKtshV+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9qtCRA9TVsSAnZWagAAE5sP/2psXYfqCtjuEDlAeYNp\nizJxJXl9RdoRGTmpMNuewqOpGoRnQo61YZm83NmKu+ExnsqJ3uJuzk7aGkw7\n/KQt64FiMvwnDoCoC/2ZvmZsXDv62QLAyILaqWIJG7XrFE7qq2BeoiIlUv70\nPrrQCylskvbCsoWeDLLJs9b6UKmzMMcVJUceoQIFHu4fa6OvQNHzBk5U6ozv\nB9I4fKk9/a/nH8HoNmKfo+1oDaXhoTcHnEQza3lfxRhlO1Uk9yrC4GxOeJpv\njtrXYWDDEON6pLBpxyKlSMYXGDipASTdwHaCmri+OTT8UG6SmSDGEe4MXAAL\nq6pGe8x9Qr1Z8Kp2C0KvTr6p9FOckEhb+b46uv6h0Sb0ZmhdgMi8QwBOnImA\nbnJaXd5UVwxqmLZGOv4hvyuFMrg17rgldX47/h7Vgp2qo/QHwu7rLIoeFXdS\n8SYkyHbngxolE1LUJx8HG+oln0t3rzUL1UHoEJvMg9/FRmUBYj0+MP+PVygH\n92x3zPAdVQPmxv8ym9yHKXfVJXqOVpXthTtRbB50VPRvz5hHSQUKpJR5iA1s\ngSiAwUaktbRtPLlu0i9OUJNouVCAYRHNYycB05/YxRwrFewW2+OLntiBpUc1\nqFaBR717xFvPi/gWhhdWn4IyB7IzPRJNZA0eDs3U50C2T0IQVdqrDkautdzO\n36iP\r\n=kANb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e0563b839594887804244d231bec5f415812fc4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/rtl":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/shape":"8.0.0-canary.911014711.0","@material/theme":"8.0.0-canary.911014711.0","@material/button":"8.0.0-canary.911014711.0","@material/ripple":"8.0.0-canary.911014711.0","@material/typography":"8.0.0-canary.911014711.0","@material/feature-targeting":"8.0.0-canary.911014711.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.911014711.0_1598544556906_0.16951060213326508","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/banner","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.d3387f54c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b82c39bbe3d019ba0bbc848b00a42687781766d3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.d3387f54c.0.tgz","fileCount":41,"integrity":"sha512-5LLFUX+7P/xtWngJlsgQHyT2gRZoQRMRl5oW68RBQCpQwvzuGHXKoAIryJqdrfCTU7BdUaGcGz5lwPyz0fafcg==","signatures":[{"sig":"MEQCIGVMjYxpoTkjupnxr6FLT8kqp8zi71Ykf21VeeDdR+L3AiBBaGY2fnbEDmper+46efzlCaIKX1UdkfPrWinqD2I5Nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVihCRA9TVsSAnZWagAA3VQP/2m7GQ/+kbYCH+3GA/dS\nzGsgLdMkjrKqBmSNcnHEcLzUBQsGuMuvVh/2vW0kp7bF8o9z7bMl0Fr4xhh1\nsd3y1Txi3bmB+WTJeuv0mtvADn58NoRG09uCBweXIod5AFlA5xW6P+yDbPLA\ng1cUVzIlmc6QueohwuK2ed4JgdeoJzmPn5fkTwvMy4mAr4yfgIJX6g7pVdlU\nRgpXSWkO97dKSyxec4k6nWMW+kwqh/fhofIREV4w+BZz98HI1smVuVIe/1QZ\nozuoJMUNprvjMrgjQW8lxReBhJTup+kddiHcNhmqJnRE1WH0LdzyjnRMrO4k\nTjy2Yhvp7uLiZlPEvV6owp12PpgkJ+8GX7ZwH/QpqJpO4CBZlrEAfi2Ksjm+\nfguGTxfW2ZTbrDM8pu0VOYr0qudFRd6k4w0ZZebE60t+Tmh7+1DGWQXVDpSN\nMw55tUeeNGiul4uOG0Kpk5Wp+D5PRtg7/YqvAU6351rOpaht1/zyGG2Lzj3x\nWDZiWVKtQ77tGflVcap8DzeMG5lBFewuxswYKWa6G69N/KnhdDbuMjBz+kCf\nRR2QLkNaGWOlqMYnT4QUyT+SklBqhCdHnaTJhg8XOsy8VY94Xvq4KfKL77B8\n/cP8qGmM3cD69vywp4zDHAY/NQWIrpvv1YyduVfIquGGM4z29rhE/74QjBOr\nEQHB\r\n=yYQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b8c159d735641688e2fc1631ac7a98134ac5fbc4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/rtl":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/shape":"8.0.0-canary.d3387f54c.0","@material/theme":"8.0.0-canary.d3387f54c.0","@material/button":"8.0.0-canary.d3387f54c.0","@material/ripple":"8.0.0-canary.d3387f54c.0","@material/typography":"8.0.0-canary.d3387f54c.0","@material/feature-targeting":"8.0.0-canary.d3387f54c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.d3387f54c.0_1599166624850_0.20006811259556967","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/banner","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.2ccf996cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d941841e14cd6655fe081e7333a32416234c32a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.2ccf996cc.0.tgz","fileCount":41,"integrity":"sha512-COb4Uy6JmF5+xr1Dt104TU377hCoJxgs6IxNXcszYjpLnAvY4Yp4KGIV3NCNNWgsOhBFHckpVeRmIrz9EHX60Q==","signatures":[{"sig":"MEYCIQDZ+9uHwjMHTFDIxTgFOJq8sl9phYK+Xa6920VVpzRBoQIhAKhB6v9sIb1NG8TjmN0cnCRZXHyXqVE8Cc5obP9NJhQY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjECRA9TVsSAnZWagAAVYQP/A3ahgfY3Yhh3Jk96Hma\n7t5GpwgbL5FVe+Owuh2r6x0McS+MPp2vjWxlQqCspNg9DZZ//Uv4fIQMyoWH\nabot339xpKGXZhj63Gz7gcc5FRFqL5PVMA7VWMuGHC+V7uTc0WaVv1qwjwzo\npnt6XVGxVSeD6MxyaMEveeTSujLylE59zK9U5JszHQPTCVLf0rCiKRP3H3b7\ncFGPsoZZdZlp3kf+YMt8DeQUL3NYNUGlYypfhfYbOn7wEjKLx4eSsHmo69WW\nX23xannlxdaH/dSkOcmRwYLDHO7ocTQR1mUHl0CpNz5P+v9byO5htGmA7LMW\njkXfJ7YvCzQgaoowZP8oZBprxCnvZ9L7Qy4Gt6XQGnPL0gXCxvLtbmp+eY8o\nf97P6Xh7pQg2v4lLJneiC8fWBY1M1hYRHvfS+YnJGw3Cq74dRppz1BJ8/ZsP\nSckp+Op9qABiVvwbPQcnW4U8lGkIfYPyX8BQCfPiQIOClJsEc41OrJ1OWckf\naXH239XU3YVC/LfwTYREl7p1SB1TMuBAGN4++BZ2TdGFTXU8OcVqyABs3i4n\nRZeL8UVF3ZsYy8ZUvYQFu31YL9+Lv9UfJa6dMkFyMIh9OGtCfxcGFaP2kTZ8\n4xou0i7hR5lCbkvW8lL3d85Pyc9dQtJIKInreBhLKBtkoGzazPGFvxdFANlT\n23Ty\r\n=9tTU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b295adf5299f65a654963fa774da90dad3e39244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/rtl":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/shape":"8.0.0-canary.2ccf996cc.0","@material/theme":"8.0.0-canary.2ccf996cc.0","@material/button":"8.0.0-canary.2ccf996cc.0","@material/ripple":"8.0.0-canary.2ccf996cc.0","@material/typography":"8.0.0-canary.2ccf996cc.0","@material/feature-targeting":"8.0.0-canary.2ccf996cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.2ccf996cc.0_1599166660220_0.22315871174132051","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/banner","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.744bfe5d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"asyncliz","email":"asyncliz@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":"candysonya","email":"wangchan518@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ee6643b9db6000794c897766c9a9363d8dc66e7c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.744bfe5d8.0.tgz","fileCount":41,"integrity":"sha512-faMAZoEhZwSKolKUNHvvRIrzQ3kYi8orJcNwr3QxmLrHeUpAAnT3L+bJavUJdhkoY8Nc41W51IdKzcOp8VTlUQ==","signatures":[{"sig":"MEQCIB8931B54tPLZWrW+34wsS7aGglD9f6Y/RxpNlDKPeENAiAm9kjDuKzx7ZHRPb0xi6+99IGtHgtXaZtnnDFcZTn8Bg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVjuCRA9TVsSAnZWagAAqDsP/j7bxYae4iempQoaf4Jw\nD2z9cbCdiuKMqL23TvamCGev8ZN9u8L2CVrfdsCoIdDriPn/olPsZmFRCg3+\nr41VtdGTJ41yWiLz69rCRDE8JvHJ9e5ZwbzTjbtcj7N79MggjtYR9PQdlcfX\nBgwobjQ4LwDQfK8+i3+G02gq5iEjuOhqgVvGn0dPDwG6DGD4YUYWeD83pTgY\nwis6sDIQryQjMRKwsfwDU8jF+ssNhmm3B30aXNv5WHJ7+Ra1zO7cajLVMSNH\nrjbqJM9kJz70ib2NGg7uVrQlfJTIzGIDw+v5AeXagjZyD4I7fCB0VWHE6IGg\nJmdxYUijXU4CQPk1Mlj/VJsIAaLn8C9b/GK8Ch8jbYsX1uJRRFcsWsWuxNmR\nzm7DkwjEr2h6mgABnriMIfKHu4j4GZi0smuuBBu/pjzjsvmABWy8thYf7tZc\nMR6Lc5yM3S+fOig6Pga2ikoAni5qqVWlVEuLBKYdpLO90mxp4C7q1/woDtgw\nvESm+MCXZ0N7qZw6eUW7/Ldl2Ka3ucX0Kjg59e77ISo0WCVhkbuWgfKS9/UC\n/CdfiPGrk1gUG0C6e/SuwllAORMGO5vNrdHpqQ1JjH7QysYwKcBsKSIslEM7\nSBJe2nFhDerlbzGgMYYopfQuBpatLsPyxa/mQr6BCOszsh4B2guytr7y5sBI\nJJca\r\n=UByV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e8e9d5605e05fdd50b88c6ce659dc2ddd8ba768d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/rtl":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/shape":"8.0.0-canary.744bfe5d8.0","@material/theme":"8.0.0-canary.744bfe5d8.0","@material/button":"8.0.0-canary.744bfe5d8.0","@material/ripple":"8.0.0-canary.744bfe5d8.0","@material/typography":"8.0.0-canary.744bfe5d8.0","@material/feature-targeting":"8.0.0-canary.744bfe5d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.744bfe5d8.0_1599166702509_0.9745930480941181","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/banner","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.78da96eaf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8bb4ec2f8bd12e62f022ed1bbd9e0ecfb6a54fa4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.78da96eaf.0.tgz","fileCount":41,"integrity":"sha512-2gyxI1qYhekVjcW3RujfxcKTvV/aKs+oDgPQGD5OVE5rN3Bz+ngs+B3XxZQt7xBJEa2AUmA/mJp9fV6Q05WsPQ==","signatures":[{"sig":"MEUCIQC7WydWpfTF4wtxWsA4/Zfft3ybGJZHyWRXWFDoXd26wgIgNSxyOd5eFp90TdnQeD+TSaXrolPj5xwJXyc7/FvJPxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9f1CRA9TVsSAnZWagAA+yAQAJCzigGHV+Nqft+NinxY\nG6WdPWB4zyEbnOAaeDaMesJnWtophNHIMaKrsa2fTtQ2mzpGkK9RUDjBDGaB\nWQvGUdLs4jhu8wag96CkVykAMMgfJC7UkzdMcZPc0J6+gsUTKkuRkV1OgiRT\ncngZ7tZOCE+AIdkofjOPE7b4pKs6PQbnnToSNJ3prG3TOZAPAMxIyBUnxsU9\n2575pjz97+3PRd+W9m/qu7LLIyJ5HKIZnlbAocXGNLTtsYE3Ep2BnLkHV8cJ\nOgo1YOTpW/QE7vdAgugaaZ4XdCa+wayHsNXFzQ/ErlVOIGSzGgd2Aog75w1D\n+e6p6PfF7k+w2NYzA7yMHRIStWP1kc1uyYVSHb314bc8gJldVBgS8BDxCrBb\nMikc6ZPJ0daNKnC8XCYxjLZXdyYOtH9Yx8NryEcl7QWnMNXGXfr+XQMMa0ya\nDWBC5MPmJrMqijANu5WEHaWefpuivG5k4ep/UX0GOOJ4zS+QC4hAtUrObTV3\nLfEhCu+J7zh6SM2NSoW4HPFUFaym9q+zQiHKHxwHut+bJHyJxRE2Y42Bzi5h\nbVqzxjlJURtL4U4Kviv7nns/tPVCk8mPisyKsQ+R/nrcA+zxINqf3xnaNqcH\nOk8m9U63FqyU1EpewaSxhrZaoKoHwmswaRB+KK1ryLxlc/v+MWifKWVFXlZJ\n7NFu\r\n=icjz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e9750a8b0ebee9367eee7e514953a1b1ac6fef7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/rtl":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/shape":"8.0.0-canary.78da96eaf.0","@material/theme":"8.0.0-canary.78da96eaf.0","@material/button":"8.0.0-canary.78da96eaf.0","@material/ripple":"8.0.0-canary.78da96eaf.0","@material/typography":"8.0.0-canary.78da96eaf.0","@material/feature-targeting":"8.0.0-canary.78da96eaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.78da96eaf.0_1599592436904_0.21702251272225226","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/banner","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.b0ed593cc.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"428a04c0ca202791ee6507cc9a96c94bf4c709b1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.b0ed593cc.0.tgz","fileCount":41,"integrity":"sha512-z9GnLrhNiZRXaHKfSxhDT4Mx3jWLp0Ae1S/RYTYHiRCD6MEIltx8hjZT7yOnoE4tMTwxfCyYkQAETjz2TqRnmg==","signatures":[{"sig":"MEUCIDBlLnFFm4wu7W8slh8KFQuOLpVZEqNTod7zeM9XnDnbAiEArVO8EeiTzRoaRFoMfnpVx5fHX0/OZqyL8+MOkHkLno0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNiCRA9TVsSAnZWagAALK0P/ApuMnDoje0+xC3jGu9m\nGnmldP00RrUYxPDd6aaZYdTeFmgTRwnnpA4pSVWuPSc9FRH80y8NQM3J7xv8\n3q2QVL1yMUyyYYeGOyZ6ysUlhi2j1PKktVpLGvffsWchAOf4EdWFCva9omrV\nlBo88WUZHeFPo5TonhFEQL/XMra96qJTZB6/B88YXn1x7y6i4kK4inAqvREk\nG0IguDuiI4Hf/kLB3ceT4bi96lkesoqri+CmirrktW6gqVJKcY5IbWu7q+9A\nytYGs+z0VAQjQlBk0rhBmvpITSpJs6ZikBQ7NwN16oS0y4v8nIri1cJG1Jf1\nZm3KlbPmX7RlM5cCY5tJFflowZp9o2mXBMQ33kr5xy8hEctv1xqJsh+V4eYg\nbaC1a9/wgBiOrSMg4jfe8A0hSCrsqNhLAE7EDP0S8QBx8g5aWrWF6UE9qZs9\nC6z5M26cB+mwYMxy0A3GI6MZJBPLDpTdrZae5K9ABLvljb1yg60YyUQrIDRN\nsnLPQLwNFGHSHIG+ng4fbrBzfgKVc8Yi1vMETL1HUijyc14f0xKWAcF+vqB0\n63f+5fE0a+PPz/gmokyv+pM1agtVSR369G2XfqUn/Mk3TWH/dcyGtDXhNcXY\nsZm+lqCv8uhxsYp5PhMELeIT14MU9oDY4Fb7ZZhuwJnqYO4SVgZe80cansyj\ndltP\r\n=Zfj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d4dd3b56db446c52c35f891f9a19896a2b762f0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/rtl":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/shape":"8.0.0-canary.b0ed593cc.0","@material/theme":"8.0.0-canary.b0ed593cc.0","@material/button":"8.0.0-canary.b0ed593cc.0","@material/ripple":"8.0.0-canary.b0ed593cc.0","@material/typography":"8.0.0-canary.b0ed593cc.0","@material/feature-targeting":"8.0.0-canary.b0ed593cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.b0ed593cc.0_1599632226324_0.8934913742515564","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/banner","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.85a1fa9ea.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e6c0477bf0270fb170f86f19c8866912eaf35a89","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":41,"integrity":"sha512-Z20QwA9WW3Rt1z0PxA0/r4dpVYh9/0Dv6Kqzq1OpF55Ljjxu4T6Lat2uiisVGkTL9y/mxIGOHcIUQz5qqrqE0Q==","signatures":[{"sig":"MEQCIB94ehsQmNPgRfBlORZVfZMViYNqK5wdfx6fQHRYgjbGAiBCghFseYLprD897YaNIzlEjizgJNYrYLxoT0Kdk/J2jQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpaRCRA9TVsSAnZWagAAXaIP/itCU3fsg4++VusaXOkt\na4s7pwd12CGlTA7JmqfP/cugif4M4sNwiZCLefedVlqLHmstxA3icUtPMUlB\nXE6VT1OtMx/nUUsZ0WaPVIblkr3H/sDfNorIcfftzekdWAukB9YI4V+ijawd\nGls8jodToWn9wXdUdJCiKdM+cdiZcEpbJl8k2JWvzI0pa91urkMcLjwZf4yw\nZFwe66IzDfi0MiXL56TQ/TiwihtgNubsmVCo8AZkB8mM4bt79XuN6HilM5RQ\np8dAs/ypTVkDb28CPILYOSXqegXUkeiyAo+VYk8AepFptuJrxNWiM/11ZjyS\nrofHfiRaPxfqRjp95ZTXg6p2idMh4srbu3K49oBTxBikRvZedVQdkl8fjixg\nRxggXG837aEUepIo2c6/lZAGpsrNyFOHJ0Ko+f0mnuyV+dsUnoqCPY9qfLZJ\nC/mn+jKogzIQTvBeRxS2sAj8eSGmRwXN7PGTYP2FZ5fGfe/Abpr/6jJmADjh\nV2RhJkAQmRzJs0Z7STnnzsvcuAhtxgXzpY3nqSjOEAQ05hyFWZUxaQXO/cDK\n76iLLqvMAErWyi2ku0LN+n7Yk1fEY9LV6Ozu9DrupdX74mb5c11XUIcA8Dup\nzWiFiPx12BsHEEUOb3kTytjeLlatd3DP7qOvSHR7yaK+f27YurETEV6+E7v2\nF+nX\r\n=WTCV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"96441cf0eac61122c48c43aebac2e249d5bf492d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/rtl":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/shape":"8.0.0-canary.85a1fa9ea.0","@material/theme":"8.0.0-canary.85a1fa9ea.0","@material/button":"8.0.0-canary.85a1fa9ea.0","@material/ripple":"8.0.0-canary.85a1fa9ea.0","@material/typography":"8.0.0-canary.85a1fa9ea.0","@material/feature-targeting":"8.0.0-canary.85a1fa9ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.85a1fa9ea.0_1599772305438_0.8413562671785335","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/banner","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.0bc41a9c7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc424956dfa3b8512cf1b4246f73370adfa7d76","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":41,"integrity":"sha512-LjHm0vJcGAlyAup/xRT+0iDiaQ52Yld9jgFAFrAzIRICJuRGCilHcHQa68xiIeGkoK2VhjU8RVeSI/HcGKPvGg==","signatures":[{"sig":"MEUCIQD3ZsIJxXjhtvGsMNKlNATDXVIBN6RqmANwDpp0x85jlQIgPRz6R8z4s1+iX0YUpqKCzsgrNWEJrmyIKPTJpNnZgTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7kCCRA9TVsSAnZWagAAf80P+QH9DgVc84KZJIB2XFaD\nZEkcHDvpFTIOPHwV6y733QsmzyraGQWeYDoW/2VNB6yJp2DIHDrp3PkPaffS\nZggAWJB50HBb+gVjcvLQ1h+1SLHK+uIXAOLc4PN+u8eGaf6TXsKanxOFZXiH\nI8r22QH38CkZQkivQvGtAmHtr+POYb9W3hGv58EUGPQtuc7G0ctRDWeut/kO\njL8zbkoJYPrrFPyh8cyeQdxKK6NM4M5/zdf5Bwdy4qWKYyHBoMg6L6ql4xNt\nGn9lGdChjhSeDUC3h4PkNW6EHT1CfwP2XbbjL/jRpsJ9mUgVM9hNjB55HiPw\ng7vWDJAdm7MGGn2OF3Gh97jfJMvQhfUaWEgSnFmA5Ytc17Z2c4cb4P0gWGj1\nJzbk2XOIE5khqLoHtTB3rr8pzGcWI4FhIaPvl6izRgg7NbkppHH95MfA92ow\nR5H3PYgGJ1x6AEEGwKu+yU3OzWqnt58rsVGBKEXUZPjECeIY6H1Jd67/rrt9\ntWf0A68hYyGSwBosCUqGlUvK6WVrQ+L2BlKA6VqEYPG/9m6N5Wrm/Tq7SVp3\nkkQ0HfgkZnxLqgoAWCvM0yKmNhE7lyLhC0W2WoiSPXSqTkGXEpHObscMsHgu\n8OaCBZwduNk/kW0DclJQVVyVgrY5YzTeeibobpbjnzgKXcofD8bYl5pwu7MW\nSPcW\r\n=fNfL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f9e2c4fbe617a115d220d49782884d15a0d9ff51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/rtl":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/shape":"8.0.0-canary.0bc41a9c7.0","@material/theme":"8.0.0-canary.0bc41a9c7.0","@material/button":"8.0.0-canary.0bc41a9c7.0","@material/ripple":"8.0.0-canary.0bc41a9c7.0","@material/typography":"8.0.0-canary.0bc41a9c7.0","@material/feature-targeting":"8.0.0-canary.0bc41a9c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.0bc41a9c7.0_1599846658118_0.19128264777977666","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/banner","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.fc0eb5013.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b7421abf0aacfe6829cfc7b86cab5be89266869","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.fc0eb5013.0.tgz","fileCount":41,"integrity":"sha512-vzkQekYX/D7xW2+Rk+15kkfBqGwH2wJgMvmpFxzfI2bof+1omlsOvqS1zzzD/nB1982eW5GpWtoHA9bQFN4udw==","signatures":[{"sig":"MEQCIC0TckTy7/fMQJrAnFlqcdisf3FzRMoSmrd/IDhHWjTAAiANxpBryrwTmRbrnW2eV8zf9P9AJrnYxJqDcLcFNdbO1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9Z8CRA9TVsSAnZWagAAWMsP+QHfuWrIyrMAsXbaCydy\nv59wDkLCrl4PrYa7D2cRP6qbWan4yQ0M04STvbwsuDfUzPlSltY9vDLlC/3l\nKRGHLoA/+6XBTDBOlzmi3V5b6TCQMLrTQ9cWnRy/WiCZdOKwxe1p97wGbavl\naf1D+0iyy4tRyCt0T/3PoPEtgQ8Jyn7H2ymi20hmhx9kvr+fmBkUmK0v+900\n+GyxnCxP91iVo3PBtIU2gqAxiHf1gMzJ0SP9ggjAEkVCjSyUD3myanKU1GHY\nXOwJguUGGCFw5Ary1v3PP8S3LqZ3TZwq0ijfcbhz+coe/4TXBolTQqXwRoMM\neNOT4qwUfahp4LM3ZC0NQpUztQVJd4iasFKAgLSxz768blpuzSJje3vOqsvg\nfe0w5HyTOof+HbNyBLsSAfLpNUMn/UW5YBvnilOYA4BGuEVm9t6WkyIf3her\n/Q78jn9fC2ikypz+vC2s7k521Xc0akrPT46e9KryNzx1tasxCCOCCnVHSFxr\n+cDL77dBq7Zu3kbeSB/TMZnFAU+BonzZ8Lvf0BD55gAwOjvJLlfOwy8zBmga\ncwahGTkuB9Swq6lSa1USMBSsf4vQgyNjSeizHg8lSix9GnD5nEL/zwngZxGr\nT+3rVSI975tV9OXlfHrXtX6/gnXRpLoIbtLXNM2RnUf8Hl2+XTT2mQpfVYkK\nY4wr\r\n=MGQ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c6572140acfb45fa86b79570328d75e3869c40ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/rtl":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/shape":"8.0.0-canary.fc0eb5013.0","@material/theme":"8.0.0-canary.fc0eb5013.0","@material/button":"8.0.0-canary.fc0eb5013.0","@material/ripple":"8.0.0-canary.fc0eb5013.0","@material/typography":"8.0.0-canary.fc0eb5013.0","@material/feature-targeting":"8.0.0-canary.fc0eb5013.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.fc0eb5013.0_1599854203536_0.1000074445312582","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/banner","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.319bf66de.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"826153d622f813adc78356908189b64ea5c36b26","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.319bf66de.0.tgz","fileCount":41,"integrity":"sha512-0o46QUWF5trpQzrI6qQALGFunq1UNnmKASdd8ALDnD8TWbSa2uMM5NeQF7E+FJYyYZD+Cs/tDW5ff2FATkEFUw==","signatures":[{"sig":"MEQCIHkEmeRT9RkZjJ+bkOhWDGTJozgyCuavGhNr9mFWEQyqAiA4+hJqvD7s8ELP4eTacPg7VUcaEjSQ/Y7A0klBluDGjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQkCRA9TVsSAnZWagAAP6wP+QFheBGwDet6zJhUsgIg\nw2q7vK7tn/XNmUy8XcF7xfWzgv2fN18Mfiq10QpLdpgelu+I3hUd2vIlegNi\nYcVuLVSNIBtpXbQ4v8lGib7gMO6hsbtp0Y1zvtw6fpHenQQfRCufbyHdDbvm\nGDumFVolqeZkU/OkhaCyT0CnpnvyvelNjYu8FskJDhQ6dc0/8serxjWCtwlQ\n5RIP8fJ9vgeLgG1UGb9Ymf4rwDF8f6D62afUnPQn5+PnIu5wRrhJJvZ/417u\n2byP0COB3oDCWNdpUXePTDGXFPpI2DbXtbvdJhMS+L3waMdR+qfqgX5cViAc\nC9jjiEABamMMo0AHoGXUY83FTZbgX7VDpS7yc11ErnGsmpMvXn/LwbwXXflu\n6vaAVAwo0EsAO/u7kZEocJLKepyu/2drCIptThLDzEAWexS3Z7uH5fOIikSq\niO9mrJ1TpQfKZf9hcbUIZCar1womgS2wIoAUOmyMM8ZVCVYFnK0Azrc6+Zqb\nU2S3Q6bNGYRNb7o/X4SuP+Tq1hfFXjl5zsxEPRo4X+fjJSDEHLncliawrXwY\ncwrw02wynhHKLFDoOH4C0r3RDNXDpyHdmeN3yfIolMAJZE2dVRA6TsICsqBr\nlRgsBREzzsLoLlnUdPmWolM8iDNwC7lyB22ES7ofD5DONW+mPwqDLs4dI4CC\n8XY1\r\n=i1Oo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ba4054064292bafde40e53fcc87405c8dcad24b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/rtl":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/shape":"8.0.0-canary.319bf66de.0","@material/theme":"8.0.0-canary.319bf66de.0","@material/button":"8.0.0-canary.319bf66de.0","@material/ripple":"8.0.0-canary.319bf66de.0","@material/typography":"8.0.0-canary.319bf66de.0","@material/feature-targeting":"8.0.0-canary.319bf66de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.319bf66de.0_1599865891956_0.4458074350180603","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/banner","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.5bfc305ec.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65180071fec79ee8f8accb92283aa75eec29b0a8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.5bfc305ec.0.tgz","fileCount":41,"integrity":"sha512-Yb4T6KKWTKuApsAG3gbGj7xTKwOHsusPnkgOjxxnC1ST8tkIbkLVqiKTq2gutR44gKVAWujqE6oRNzzQ81Vwfw==","signatures":[{"sig":"MEUCIQC2F1nTeUiw8dgrl+ovxQUsZonVu4TmSPeMita+j6q14gIgCguI/3Io+7wuJY/zYtetFz08d8PKptsgsUnuzxTze2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqS/CRA9TVsSAnZWagAAbNAP/3wFr1iHJ/89YH86bNu+\ndBqMFDbDtBPA8deSDynPyBkKMZw5JN6ee0TPGJr8V/ePcOiFa8zDL+cRMlkA\nmKBCDg6dzph4TSYthTHRwpxQNX7wbxgkWo9vL9KodsKB5NL2vcUrKUso8U9q\nBg14g1ppi8UPYe6r/iW577yjBeHUJVfnbLQs5mQRlT/V787sd1GE1qH2LzoG\nWfOVDkeK34skRJ39EuHhXYPZZw3BozQNX32gSQY5iu90jM84StKTNHmIt6ZY\n+YUpsa0oOUVahkb8arJAhNAx4Wdnm2zGr2/xjKnJVXi1++I8kK0TMdurxRwU\n9m8MU2JWTu1SyM/sK7AFAUQ6h0vliQUaOPH8JeA1Y/mneq2jySt/TZ8KEx6+\nI72DUiz0yzClEAR72aJKfQHSRTImKps4NxP1n1lY21XQRwXixvQRgGhGWuB5\nZ7Bfn74u2dUAaUeYXUnVgZFS6US/89MpOuYlE02av1Xv9aLtBJofLgLw+Kv3\nHTlqTyzeO5np1r0ps/ZemEG/TDt70fZw9OdsjJ+vBIZ1NB+AQ0ktOxg5xaeQ\nyW/tqi41s4E1L/YFALHME+Vl6fZK7WRYWFavBrN66Eq2pcgR1uXGGzPDpAHt\nq8klS3HAoPbVAW2Ekm5yVAs+f7Q8zihrxuqxMwOj3qGhPXbMzhHiU5r3XSZj\n+G2D\r\n=8utG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"96c0c187c7fa544c1f5303e96ba3e85cba86e5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/rtl":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/shape":"8.0.0-canary.5bfc305ec.0","@material/theme":"8.0.0-canary.5bfc305ec.0","@material/button":"8.0.0-canary.5bfc305ec.0","@material/ripple":"8.0.0-canary.5bfc305ec.0","@material/typography":"8.0.0-canary.5bfc305ec.0","@material/feature-targeting":"8.0.0-canary.5bfc305ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.5bfc305ec.0_1600038079190_0.857609696785657","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/banner","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.83d83f131.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8daaa49e52dc578e1107bf51317eef66fa21767","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.83d83f131.0.tgz","fileCount":41,"integrity":"sha512-2wCpz+efeuw97ZPbAIxceKg/+VACjqqidzgNnyiiyI+Vud7in/11Rqc23PMjl31LlkWIP4iv88gqjb8v3EHX5g==","signatures":[{"sig":"MEUCIQDPq3mmFjT9myf92o4itPHGtAVYyJkA1CzloVAQGXjR4gIgJAjHzdaG4/nQ4RNqi9gOPUOJXOZQTcooWP1J/eWLs+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrpvCRA9TVsSAnZWagAAG/8P/2mXrhCNvhMNWmg/Uw/P\nVD/ak9c3P6o2imvFHdEDSbz85TGIDBri+R2C6Hq0dLErhk5gac0n6K4xPYkl\nj8NXzwTfvxstGCEi5O92ThYP7gYkfzuzLJIH1vrUgOTJE6qeHmqRdVhcxJSy\nt9PQKec1LdFlebI9NZKWaX2v2U0xeHu53EuRIbBg4C23sEzbis96vGOAGaVa\nXGdSWysrUCQo1y8fYsahjp6v9UJEz/GgTKQeN02CBP2oYjv4xeMNjgfJCIlI\n2B+q+0Zm3DcpcaueLlLDyl5J86auGgMyXQshx6qnTZL7mtuftqqq46qsUDMh\ncawI/Xd2tyGnhE3rn1Zd5kaYxWxmNyxFbhKPSIXrMqh7qzFGK87zs6XyVOr0\ndMc46+1MJvjrN8WnQwh1EI6PPhSI99306p03M9eqAB4MemtvBHV4oop5/MBm\nsn6px/dLdbtC/l5+kkqq3GfovCH9/kchfoNdQAP61E8C5LtBwL58YXbmJbSQ\nFGuSEDFntmFzN6eiRU1sj6MwjCPyRytFs1yViCsfFK5aA4+Hmm14RuA9WkFv\nQaIp/si9pGzOxp+DYL8oLdZoJ43NjFst9n76HHIFOLnXK8Dy2MSNc4QGFGw5\nA896SJCpTubGLs9poiUnzpE33gx0uPZG1nc7HxhxGNUqyK69ZK2ls9iU/4HD\nM9gJ\r\n=j3Me\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"520e8b604c3cd3e7ce96b30f4315d576bcdad3e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/rtl":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/shape":"8.0.0-canary.83d83f131.0","@material/theme":"8.0.0-canary.83d83f131.0","@material/button":"8.0.0-canary.83d83f131.0","@material/ripple":"8.0.0-canary.83d83f131.0","@material/typography":"8.0.0-canary.83d83f131.0","@material/feature-targeting":"8.0.0-canary.83d83f131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.83d83f131.0_1600043631286_0.4956737901502124","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/banner","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.d52b165b5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2e5e1db09018a455accfe5c83e26e73f9bb18f9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.d52b165b5.0.tgz","fileCount":41,"integrity":"sha512-5vS7eFOA5Upy3qQ2CHuczTgcnUdo9+0rZXKGrNR9SgZmRZ0hpMSywPzFV97R8klaA6go2gAWEnRUXIjEsEM0BQ==","signatures":[{"sig":"MEUCIAZcKotXVLcxKgmlCCYtyK0n1z/uWjbboJ2qb65EzW7VAiEAtpCzABV7bcmURxqRPAB1GcPir0k7mzQaPgmOLjKgoNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNXnCRA9TVsSAnZWagAABXsQAJ0CF99ke1Up/q4Mvza9\n0r2yAKmuORlbsvhBKjUJa/ZO56vTSLYf62HqxW6u9gd7qN9++oDUp5g0Ghtv\ngP+uQHO4cDj5F9xHKQSrogSlrJWstooRAEq1OCVaNinXw9mHdBgtFjwrYUFm\nCESA79S0C/kfjr+5boDCYvhIBe0AGg+OuBXf/KQaXd+bFnYF1mYlrI1mj58C\n752jXUEHg/tQgxKjzHOoNF+8p9hMmVZM/W96/lwTcNgcp59dRnmEmaAw8AtO\nwVVArPTuDm5SeecRZN+CAtpUff+2KjMqgcbQsSA5Y+kKJQljEQo7NG+z1bBG\nq7c15xkpi4ISS2WkdCuqJpUOQz9uCtfgvsBheWXyqgelCV9gDvt4OoLGWswh\nI/O/TV6pPlwx8Eu8V0Hq1pU0qgNW1D9vgV5ljmpd4paHU58IlYJG8gEjvIqk\nUD/X1RwTTNOedQNUxu0JnTL7iAP/8ZHEE2PDvAt+OELFpF0foQzNuqWNYD42\n/pHP9+gQTNnG0dnjGwuXocrLPSeSTwP4mQiUNdv4EW5OH5qzy7PTYtAvMIqW\nooCFcHx9WPzNRrssQgiRrqYmnaeT2k4l+R0Uynqoh1e6nNzK4H3zUD+nfoXq\nOdnufbaCTNXc9Dd+4ecZHfsFb//uI5xJzZHc6++yHkCGZlpbUwdYujBvETnu\nWCu4\r\n=swse\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"19ac3399f14583da3b2ca5e37a0ce783539066ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/rtl":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/shape":"8.0.0-canary.d52b165b5.0","@material/theme":"8.0.0-canary.d52b165b5.0","@material/button":"8.0.0-canary.d52b165b5.0","@material/ripple":"8.0.0-canary.d52b165b5.0","@material/typography":"8.0.0-canary.d52b165b5.0","@material/feature-targeting":"8.0.0-canary.d52b165b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.d52b165b5.0_1600181734614_0.5988859330586846","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/banner","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.a831d4799.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9228b8ca140a4b81960fa3c43162b5b8fe58045","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.a831d4799.0.tgz","fileCount":41,"integrity":"sha512-UqAIZfa6L6YCh29/r9pHJWbkNNRyzeSz8Pra0YUOSLzkYm2VrZHEg6ZWwswnN5Qvu78qFv3EWMG7kh6HVwAijw==","signatures":[{"sig":"MEQCICWYy8YD7BDZ4G/BWKre+RPBpAxScVh5IO9JThTbED6VAiAp1E245A9vFb7qpfzUaAl04D78ouLhuREq98IKrCJuPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP99CRA9TVsSAnZWagAAT1sP/1OptLmHnMyGvm3VFM92\nGj9FKjjZEVh9qpa37QERgA+S1V6rbKi3g4INcGaS9ava15BEDey0BXSFAokQ\nkMgzWBJzsrK//asyIWS6F98F303j7gMzACCLy1VzitsDs3EPj9fkM/grk5Ol\ndw4SyFJ3/xMJWRBvwTUQ9oaggDBmyVXsVRBK+y3efPreFJ2mnxSj1mk+hGab\nGlO+Jmm30WVqGZcLZnd3rZNr5OPiMVLNFA2ghyEF1hVgu92XvhZXiK8c/FAS\n7MAXO7YMgTKRHSVMVmSRJF0nbKL7sGLeuc1GvVJwfX59Za28lwgZR63sAXFT\nJ70uJ8RcufUgbseWUGJR1peIrBYgFcOrqdA5R8t5fDxf2FbtDJ8A6b8Gf5JP\nJHO2RCpwoVb3R2clByaPoo2wiFd1pVc4dKtt1whW9/A0/KKFnSD9YyAdEMtB\nvVRvODKvDiitnm+TaqHqFpu4st6PAwW7sW4Bjc/aBYUc4d00iMnQBhyMTPLG\nuU/8Y2DbQcIybsg+mx1vL9nM3rIKc/fcwtYU7Lg8aguB7eTDtDMnfDVmPW6M\nALl+f0mcqkLUluUaQ0HMIFxnAPnpKYpsVDLDUm5GHHvG9MDahgNsVNQuBKGB\nRYi0xpWNwJkNnRFIov1OzYkkkNjjCEBEqPyO27bzlPw+BzkpoXmCzxMeais9\npoyJ\r\n=HN2f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fa7f461e7963e1bdb73e7811d2f70b0a07acba16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/rtl":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/shape":"8.0.0-canary.a831d4799.0","@material/theme":"8.0.0-canary.a831d4799.0","@material/button":"8.0.0-canary.a831d4799.0","@material/ripple":"8.0.0-canary.a831d4799.0","@material/typography":"8.0.0-canary.a831d4799.0","@material/feature-targeting":"8.0.0-canary.a831d4799.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.a831d4799.0_1600192381433_0.006921337130230798","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/banner","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.a306aa488.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90438b1efaedeb6fb2164d7abad087d83958ce0e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.a306aa488.0.tgz","fileCount":41,"integrity":"sha512-KFWS8IPNng7MwMJJllKqOHfgDU/o28u+BJh3GKl5K4PjND4VYSXAl4oSmIzs8nqJSa0N3zl34QvLddCpDf1nUw==","signatures":[{"sig":"MEUCIQDtMchIrI1tvKpBKIn3bnlEugDKE3vCup1bzrBlMdhEJwIgcWIGl6C8nagfTLIs1s+YcS8MiF+Znp+8yPPPXDQ+/0w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUNCRA9TVsSAnZWagAA0uIP/j+GNot2wL1sbGIWlqEL\naiylidcTzmAk4KhH8+8RM8/XLv+9OelOVXbGcorqjD61BC3ttWSsatapks4w\nEQANbk97Og1/XIc+Gj6R1aGn6Dep1m0JcpypaWQr50lIkGlceiJ0+kOWyDZK\nxjew9nbL3CoDI8QTZBdh+6PMYqd2GmprYh7C7edgaQjT08E37av9ZT1RAjFf\nW03ZfLOBGHMudcj585VG9lyIZjLCKHOezwY6Ha8E/b59tjFScxm8pKSOtNcX\nj4Wk633zY/tFx+UF5Ke0dx65b2fuNmLHYJ7nPjT7o+R0BQ9u4/JgDNXxreG/\nmY/1CbRUpLjIiWys7/aVJCrNEdcRRlXQCrS6fyuSfxFIq9B7jJJRDglwzQxM\nC1Gtl0J+cXAWcdjGE14ZWXv8BmDBZc5WclfVSblwBBGW+9T90hYC5Kg7/q0a\nRcg2isFvgE2xpd7CBU3JpWytPOZLCT8G0CEen1hwxv0z3hVYkDZb2CSYSXxL\niFwth9tsbZXWiqK7TX+A4q6KUtvZ8QeGpcWULGuky5CTL0sLFOgIx9nPjVxQ\nblNc7RRDqPRit4Q/pMbDgjy3UYWYfbWoL2P6dBrpZ4IsThWyjqCZS8k28Mwk\nAwLTf7lQddRHIcAQzdTlxBlfyZU4q4d1BrH1CSTMCItDmamwzW9kB1N1ac+/\n6/2m\r\n=/qD9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c6addec60d43eb106ac774211ca2af4b04d40f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/rtl":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/shape":"8.0.0-canary.a306aa488.0","@material/theme":"8.0.0-canary.a306aa488.0","@material/button":"8.0.0-canary.a306aa488.0","@material/ripple":"8.0.0-canary.a306aa488.0","@material/typography":"8.0.0-canary.a306aa488.0","@material/feature-targeting":"8.0.0-canary.a306aa488.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.a306aa488.0_1600304397154_0.2855975283140515","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/banner","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.fd608ff66.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31c1c83c12e9135b2b006cd5a9e1f4d86d9a5f8c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.fd608ff66.0.tgz","fileCount":41,"integrity":"sha512-okbpIjvBBQxC79ovtZ11yCsc1VkeSJEK3/t/vgYS8VessuDiZeOSqp8/1PfumCfDhi53dDw7xg20QAIZ+UEtJA==","signatures":[{"sig":"MEYCIQCo54khd9XGwepF0JpVEtAvR79Nx9dUQQ/2BT8NkPLuAQIhAIpHxm+l9rukHBXkmTibOFie97NVeCsyFxzWUrBqLEkP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3I1CRA9TVsSAnZWagAAAbcP/iGUPoCi562TwqZURkBC\n701RA6hOmXz4UuXMm7RAcXL72RaRYYMfs0s+xqL38y1epdR9Pe9mdmTq3nYX\nVB1HUcxO45LqQw2PTDEA88zz2jOFKWZSTTvQaBO21TaLdV51fA7zL1UCFKgh\n4T2+SZysDZ7G6obE92oNyuxtS0OgVjb+ww6BohRmaq6xyZFZoFhbbOhWrBQB\nd/a9gFc7mqNrNuERjadZRFtqMoGZ7VPOVq2uyxT5dO1lBfGTrj/96Y7Wr1HV\nPNDkLk0m1SJtuemE5/WKW/iNvyw/DPTk49Ga0djf1mAjQxQph7mSakSdK+Qw\nplipXvYz1bKYfYQucPOSvujM9y0NLZ9Qcb5GbWpjulu3EH9iHSzcG/mVN4KN\n2ZG+6gH5WpbMMUEyxcN8Rtk8zU/BvcJOdewGD2FwxZxUH3YuXMt25X1B7hyo\nejyx/tnbzLPx7vKocB4A/f2znpe6hBc2fA9kidm4NiHRhCssUe/MGaS7cgCg\nDB7G5EyQSPpZcdt8n2Le1lrWZo/Vsl3+N4aXvGlikZjcgPTE4C9IF7cNjyMV\n2K34YuPJZPKQS1tJNRsMaSSWapmAAu+blaz9PZielcuDNPx5okrw5qyMxlbw\n1NiBnCnUtsMsCRPin4TOj6wmTeYy0+WsrSgyTxhutqhrwJR5sr4/j1OtDdRV\n8LzI\r\n=hCXi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"03ec88b3967ad97da4309b1dee0b9764edcf89e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/rtl":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/shape":"8.0.0-canary.fd608ff66.0","@material/theme":"8.0.0-canary.fd608ff66.0","@material/button":"8.0.0-canary.fd608ff66.0","@material/ripple":"8.0.0-canary.fd608ff66.0","@material/typography":"8.0.0-canary.fd608ff66.0","@material/feature-targeting":"8.0.0-canary.fd608ff66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.fd608ff66.0_1600352821325_0.7623496630372633","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/banner","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.3e435ba57.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fbc28f305e98dcedf9636931130e744a6b98f21","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.3e435ba57.0.tgz","fileCount":41,"integrity":"sha512-YRUp26Fl3m6lAGuy3T8Em7pWkfMWDIltBp4BHmVqgKGbUAMSXLVrzS/bB9Vcy4+RTaDLkhhD5Gw90FDcsXUeQA==","signatures":[{"sig":"MEQCIE71PStdkZXPBIbY5vCSbpp4NF31LSRo9lcixWm+xQhlAiArdyklETZaE5tUqk6dXeopKWA3ze5lQBfMmXoAAlDvpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ZGCRA9TVsSAnZWagAAdvIP/A9YkUhXNj8rieTWUW6n\n/2nTgLdN43fXxvBj6PDfbH03tKE/MTl1kDGPHS3VG7qdUCnyFHSC0q4e8Oet\nAk8muhk30lU+O+XVbtKVlVdpmggZUDIpA3xojNPyJRGaIxDbsmOaUrht1W4c\nC75fZPHUUT41BCLTGSpSRgvcGoc0cUA69NHqSdOP3LQedZBNR57tP9/+xA1G\nwdYrU90cl5CVM+tKiaFC2y3/i4dEGFUGLlnK5SXckd5iMz1Jpw7wkaouoa1L\nrRKcDRuMxtcBM5e27TBkde+rRws5FTPkAX5zYyXKU4tLbAD+fDHMfxaNXADs\nJofy0tfXACgiLhtTPNJyQuGHObjvvE2/MuJRD1yy9vYr/sujhWzRWCw8H7cQ\n8LnaldH+hRSt8zj/zGXCES8OVzowUKqoyTvq3nvrvgJAZGvHXxn09Xp/4wJO\ntXYU90zu2Aw1GUsGfXvtrHC4mUXU8PiExVaj6K/9KCVNKNNDzoHZb0l/5G19\nqqIr54mmrvXmKXvPbVY0CDDJLLGB3j0eKh5svGBxDAGgA5RHc78M/yBRYSUS\nPTUCxHoWHoj+yTdWJ5kGwwLRkfVChuQZHH7FK/eRGbk2nTHod2uLHKxCE1FW\nhatYM+Ol8IEik8xu1/hFf0KMvfjN8x/W0NhCnkv97OtCA6pxnlvyaRPU8p1Y\n7JLE\r\n=XHLh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"15ff2ccef4cf94fbadfb06cb750ee6de035cdd19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/rtl":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/shape":"8.0.0-canary.3e435ba57.0","@material/theme":"8.0.0-canary.3e435ba57.0","@material/button":"8.0.0-canary.3e435ba57.0","@material/ripple":"8.0.0-canary.3e435ba57.0","@material/typography":"8.0.0-canary.3e435ba57.0","@material/feature-targeting":"8.0.0-canary.3e435ba57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.3e435ba57.0_1600353862094_0.11495791147338119","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/banner","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.c250ec52a.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c210c9af44fd358ebab9b75fc57658bad68597b8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.c250ec52a.0.tgz","fileCount":41,"integrity":"sha512-NW3NWX2ZSEfxxhlZJBDI047o9MB3rMPkKxXTH7J0UsbsjGl80zv5/XbPE3oOGbvZrjGlZEW1p3bYKzJwicSQyg==","signatures":[{"sig":"MEYCIQDfCCRhPVCjcsdc5miElsNU9B5MEy5AZIrJZhgH54OeUQIhANZgXCBltOD6LmCWbCWpWl/3WmD5NF6nYXNg4YpbcOqg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8L6CRA9TVsSAnZWagAA7IgP/2lvVxuNJHXogUxUu4ME\nYYZ3qR3ZZghNlPfVwo/y45aRR29AIHobXEHv0hKEKkjsHH54C3A/PmkaG9Hf\nQfppsKtveRxa7wIn1+0XeWbHgIQw8+fHmcOcan+ENfII9bG+ngcugrFxOj77\nwNWiMSOe4iADdXs+Wy+N86UeVGQ3EZ8htFM4YAdOgvyu+dxCv80CwQ92udpp\ntltYCpM+wpuYvbg2+gtZqC1ZP4+L4zCLYeORsXWJnOk+uWcbTFY1jjvgJoKh\nQOTvoJWaETGL1N5vStPkLNGyaYpNryc8dtAvpiRkYwlUlPh/uQ6McwL0EfY6\nIpKE64nl1um0uTE8lgSSpR1sRaT2+zVcw4OVjGggxpkYRmivEOHQSGOGo68O\n1ML7DC3tViCn1xRxyq1JV91CWoYNBbwjS120lQFmKTuQY5huE5WG2pjdCOwx\nhX44dm32gEfEVf24cxrtow1RYrW/tMfcGR8V1jsJVTgOEnFmhhzQ/rcZOKIn\nCt8loJQmlOXDJ3zSPLrAtSoiNHMlKwCBQHYC3LtCIBh0RBWEV3t7zGC6lD1V\nuAmnAAuHwMFxw4u9G/kznFoLpeoxfNFqaDc1KIUdmYMoglOy6OrROqAwS/2X\n4l07vXAgmjkNI+XgEpX0x2Jw9MiZXmhrm6AKDHUQOCJncX1qgikUJ4aminpd\nFYu0\r\n=roVt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e214ca7cd3c1a65ab89d2fe2b4fc899aca418adc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/rtl":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/shape":"8.0.0-canary.c250ec52a.0","@material/theme":"8.0.0-canary.c250ec52a.0","@material/button":"8.0.0-canary.c250ec52a.0","@material/ripple":"8.0.0-canary.c250ec52a.0","@material/typography":"8.0.0-canary.c250ec52a.0","@material/feature-targeting":"8.0.0-canary.c250ec52a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.c250ec52a.0_1600373498258_0.9421398519935318","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/banner","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.e34e411b1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b452e465b87649430526071e398861ce0d99a2e7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.e34e411b1.0.tgz","fileCount":41,"integrity":"sha512-QlcSxtor7oL7x/wV5eliHKSCNGEMApi6lacK7OCg3MBD7wm901Tsl/asIckRWNhc9GX1/7M3P+7aUP3Zi714Aw==","signatures":[{"sig":"MEQCIFFMYaIMmjB5cwhWOlNsj6j1PzO47/HFmoG9YGVlc6x6AiBxZ0hqobC/y5Spth490gOfLbFdSPy/9ggoMVAUczAiRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SyCRA9TVsSAnZWagAAHaIP/RGKqU3LUZwz2htKmL+5\nEcJ4bwB2ynF/VUJLlDiRHBAVKrKT6q6zi/5A8WYA7I/X+IWqKaFqiWRF7C/b\nt+qbsfFBIEJRDO0Mg2epy1b5dXshY05Py8LC8KJsnOfCGfJmr+m1vz/Q874u\nQ4dHE2tfuNEL79I4NoTw43bAm1t4pPZkkH0UrSi9G9zrB60AGKYi8FozxBED\nBecpD37T52wDoBNzNEPk2dJ9pLfgs/Lka0+FexoPku8xxIHQpdBE0Tkn0Hp/\nmRyrD9CyTYk0/a6z2nb4+SDhlIrtHtHdbWxCqr2WMTAyFgN+/MjxrOfkmcVq\nHXIyXqQJ15w7wXGMKGYTboovltz0cUZduV/LXojqx1vhnkdONWyde/x4hgNj\nZA18D5DypgEAcd8BvMyhJnLXYBLEHlX/KtC9TwRJd9eOQG+OfShaxy5AGCm0\ngPNtgwZnS3g/5B5Cld+xkolapUUYhp6boF6LJe5G68wCoYT9hMcs/q4suEA5\nm3xksrTx6jDxDi/4qIqrklaq6rdkC4rL6Q72Hqh7BPKSI2EgcAZi+pfAMr9O\nDKh3kxrFCxsu0xKO7puhm+FdnFfbnRyxXgXSnQ2D6Mq8HREt2balSMGBET2L\noAAtjZMd/WpAWdBpMfFAhNql/5za4zb66JfXROdoN9BiKrglRMcMmxUe88us\n070R\r\n=FATV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"460337b237852aa88d59152c38df2b32b73792a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/rtl":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/shape":"8.0.0-canary.e34e411b1.0","@material/theme":"8.0.0-canary.e34e411b1.0","@material/button":"8.0.0-canary.e34e411b1.0","@material/ripple":"8.0.0-canary.e34e411b1.0","@material/typography":"8.0.0-canary.e34e411b1.0","@material/feature-targeting":"8.0.0-canary.e34e411b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.e34e411b1.0_1600373938308_0.8558245211514888","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/banner","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.4e9343929.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a39b54ba41b895423001bafb25e78996502e11c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.4e9343929.0.tgz","fileCount":41,"integrity":"sha512-5SYUO7vFrxxXLR6SID4V74Ro6L4aggkYJoFY+V/nqWwzyvbbAVmoA5FF44FXexZ0T2eVhvHLIqtkA596ThhgVA==","signatures":[{"sig":"MEUCIQDFgGDVyIxrQFSRRfsLSjAPVMWNVK0oqTBggH32jcJT6QIgLpDtFtcFIoVeGFeWa/uJGYIoNwJWv8/3npj7cv1gBc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":425585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qhCRA9TVsSAnZWagAA3v8P/jfZ/oWt9kicdcTzvmtk\nUuC741nCxxDughCwuTQGb7ngwWYk6c33vVqwwNjAFVOyOvXIH7uRjtNuuxXh\nDYlJkL4/MkdDXW42Lz9AX+ty155wg9LP9YGNxc3SeLQt2ZWhlp5i4ocayMqh\nxipbQ/zQ9QMV52PnBQH228G9XPgmfcORsIAKz52rMpY1RkBTxHTPdUsFp/tV\ne+MzFuBMZkS9RcwaurgL4TD6fx7PcbbJj2ZJuUYCr/XP3pNl4X/kehJX+5P4\nl302/Uz5HThrU7U3vUv+U1CN5gXN3pU+Uae3MCctG7x/s4vBz0NFedOOMPIT\nIs6vUMpxxsT8uTT2sHcltmJBNUO1/gAALt9/SI1MqnIfwVDYdJYhu6Qo5plC\n2lAuDiBBY6C86IGBT/bH0MR3Q3C12QYrgOqErYI7AUBcieH3m+923d4GK/ti\n+RoBxJWWhD1b8g5K+LN1CZJ0IPXve3Z720flyYHm/FiHtvpAThLgqbCnifts\nH4Dm4o1wkg8Mj/MGEESBvqHP04gbUrTsXWAWd4kM45Fl0og8hTLXusCAk8I7\nQTs3YkJOsKpuygUX2BOj/kanE21sXaqefqo4eJWjaYYX2Npzoe0O+oTJkiik\n7hH2uLgkhY15PhjiBUpcfQBK60rNBGwU2mGHtUR4zuQf2Q+ZIFSvvOI2zY+h\ngYK2\r\n=HoPp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7bab75a521cc7f81a2f78587d2146ac140e3cfc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/rtl":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/shape":"8.0.0-canary.4e9343929.0","@material/theme":"8.0.0-canary.4e9343929.0","@material/button":"8.0.0-canary.4e9343929.0","@material/ripple":"8.0.0-canary.4e9343929.0","@material/typography":"8.0.0-canary.4e9343929.0","@material/feature-targeting":"8.0.0-canary.4e9343929.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.4e9343929.0_1600375456682_0.829506212785273","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/banner","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.4e5c350c2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb4693719eddbefd9cc0b42b208e130aa8f1cc2d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.4e5c350c2.0.tgz","fileCount":41,"integrity":"sha512-hkasAi1IRRB7Y1EdD6tVxFZXfS2Ig461lTc2oUTPWtbhwwOE9uRDvoPptmhsed85uR78rWQQpZiCSEI1eitugg==","signatures":[{"sig":"MEUCIQDwuAaYXYLBxeSv9BC6e9gjBNTei4Q7meaQ9ClMwDNQ3AIgXaPuPdu2O1sC+mVejzQnE6BgVm9c3x1Bq44VoxtOBhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRftCRA9TVsSAnZWagAA6I0P/3WCXC4Jtq4jWx33RueN\naZZ15/DpLL3rC9NhhIli6dWrTO93ckDgFAYBNkoVkAcyiZF6t/ObzSLQCoa9\nPwyFPswYy9vyZczP8vchpnoANrwVZuUvURMMFuBvdyMjuVjIFsoKK89E25ve\n8C7/1t7L+j+YLQUtgcOFV1796mrZnoaE5hTEuvO0aEbGtAbGYjM7YuisxQjc\nNcZ0wzwFLI+R+6DW0HKVzGW/StwLhzvCUVUMAKkTF6RQ9tUeYkx8avDF929G\neQmTBzqLxbiE9Wi8B2UsYlZToZHOREq/jLN6V8fFUp0xQkzDhJ+mHmb94b1R\ntAs1HL2iJJa0LEyAoIEHzvBgTw/fr7jhP6JF/MaoQ+xfobcRj8sZ5zVhFH9c\nHQ/GjdcSAHix2BzfeDMCT0sWM5gtJNx5p9pDop1sI9EelT2heZEeBBULtSsK\nMtl7MIHNwOR7q3PwZ2dMUaHk0EL3cd8bdAZlnFtfl+YpG/Gxf7k/iHa2o8NO\n15aEIMudo7AdMVHB0LIel1m+Pfigia8WJgnrf55gjlbUNe0MBSQjt/s238bF\nBkV4VpTRoUadHQRo0oRbDfkHONfA+XWl27LkP6rlyjtXJ+NUrqc/HElGwKVX\nTfxHwY219lygHzZPKU21/4R1aGYFpNMIkVxQPBv+9TTJEhicFm5OnLZ112Nm\ni4ZK\r\n=4/ly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c753481bcbad808064a366112868670fca5381f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/rtl":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/shape":"8.0.0-canary.4e5c350c2.0","@material/theme":"8.0.0-canary.4e5c350c2.0","@material/button":"8.0.0-canary.4e5c350c2.0","@material/ripple":"8.0.0-canary.4e5c350c2.0","@material/typography":"8.0.0-canary.4e5c350c2.0","@material/feature-targeting":"8.0.0-canary.4e5c350c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.4e5c350c2.0_1600722925473_0.4670017139486409","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/banner","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.16c563ef7.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06bf5da8b17e9cb05f6c76a53a743f446d3c84bc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.16c563ef7.0.tgz","fileCount":41,"integrity":"sha512-D0XuMap1+ugLzEXSXJk8wsMFq4ECJm3VCVKmHiWKGV9JCPFxg27toyz7GElsJnxHGsMiPyPHAzcC3TxabBP6Ng==","signatures":[{"sig":"MEQCIEAD7xvzQz3XeUu1wPR/O+zw9SrvjVPKJ0Oqyw4fXh8PAiAtx4YUB0vsUBbP9KibM7U1834BJBQ9uD6eAyqeTVLfJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":427419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTSCRA9TVsSAnZWagAA5T8QAKNmKbjZP/NJjgxVfLSm\nHCXzPqSCRJG9gH3tb5Sf/4/inMA6367RpGoXLPQjHSFOZ3OH86qfJJ5OFV1M\n+Z+FqGxsGIr1nHM36VWY2NEe2kbP5g60DSt+pVEdXh5VqUwVeaz3Y1IN+g32\nj9/ufxgA+Td4i2vl5z/zugmEqY4SGolOBpMd8HTvffaxu2lr5ynbTZfkLujz\nRd+0zX5GRRYhCYlRtyFqXn2lFojeAYXHecQA+gyiWe3m0zlGOdG9AATKTtQ2\nleLf+bofiEgBJmI2nrfe7By3uaSLkq6qa1yk3xTACkr+2zA9Y100w/F0vXRF\nfPBoGlNEEodBRp9sp5UXHFH0Hp801N0Zy2EF51ETCibes9pj0eyf9LviPlOg\nT+RymwnRnUh+oE+wdey0a2XGjIypkTmD76ZdNIPxHXh5o3a1OJC5QxTXEzDG\nhMYvlFbC1mb7gzuxj+CqMAQUnDl05nqzl8WjrKKHztA/dOof182r6csu2CP+\nqKUqJ3mmCT6qt2ngjdZNOco2AcCvIidLFv4+IWnW+4UQ4hNGk3nrMYCfUaDa\nkOyaF6yx3+MxCWBc3aqMa1hHcNBpyNiwaYILeAq5XTL3YZNkA5NEgTfVViMJ\nlW3tWbtiOhtIFXAh/k5PslXctYADrb44xZzlGRGD3zxISrnnet9dP2cNkzkf\nMvan\r\n=vtfO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e3abdb235aa76184bd5171f68c237f58b8541f7a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/rtl":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/shape":"8.0.0-canary.16c563ef7.0","@material/theme":"8.0.0-canary.16c563ef7.0","@material/button":"8.0.0-canary.16c563ef7.0","@material/ripple":"8.0.0-canary.16c563ef7.0","@material/typography":"8.0.0-canary.16c563ef7.0","@material/feature-targeting":"8.0.0-canary.16c563ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.16c563ef7.0_1600804049635_0.14109826392712632","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/banner","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.fd8af3d43.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0bb804da2c6281a0a25541071fddad74f4679ad8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.fd8af3d43.0.tgz","fileCount":41,"integrity":"sha512-TI8Lzfs9Tqdana17WQ8AFwS78oGs4JnVeOV4CK2q0ampTEBvrJxvvUY8m2eCyFxdmdXqPynF9zDOM4L/u8s/jw==","signatures":[{"sig":"MEQCIHhWiiv3hhlcjdGID1vPSiIbx12H9h4ln30Gd9vQmRq5AiA8C2njVk0TEetojjTcuFIPAXEoa8AcPu2HwY3SFBrxJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MMCRA9TVsSAnZWagAA0zkP/2x/OXRslI5lMyQIurAd\nxzoUbEw1lbmQ6vGWrzz524IoZpcyp2Ds11AbPFljmH4le2PE2rXYYVwda4v7\nN/bzrOXTCBxCWadXcomVf/Gz6/wuJc/JlHrnB8pyu+eQKk/bLmZWjD1EbFLC\n/97f/tLSz3nlmzefhA0MWDOSBpKBczcZDGA+7dDlQsi1tFXpCrKPmQBjCSph\nQ6cV1wyrTjWS4+oNTR0G2De3cA4nUNr3pwK2IVmIf5TUlLuVYfDduplEBI7L\ntAPmdvy1nnREB+Enk6MKetocwSLX0Sy+Uhm84Q4I3IsSDv4plUVJ+hExuRM7\noZ6bGIiRMMiSrQq6sDWbYp0KQtR99kSBgF1vaWxwHYaVwUhMAMCXAVlmlU+B\np/cyyJVtP7uDhJW/VKwinB9anOl3o73CH4GrwZVN128r6U7vqbWB0eSIMjUV\naBYwL3LisEVXnhhbo7P4CL3irkfDNykOtKxNi8IXC4Tjp4oNbQ0+c6UWUm9Q\nqYdt/7whcfDDF8gO3FQX69vcAoX4d/z4qFn5hVBTvTsL6cyVWibWn9x7n96P\nT+WdcvRRWkPQUFuGzuH1u9A2ywHYo3EhwN64zDfttxWgM185bP+Kzoso/4cC\n0XU1cuKSB/WmL26QHlDwcOb+1pERS79LAtfzbUefHwkf+s+vlZeBsLucKilX\nXc01\r\n=FgMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0f295a5eb9518e726dc271a945985bba278bf9e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/rtl":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/shape":"8.0.0-canary.fd8af3d43.0","@material/theme":"8.0.0-canary.fd8af3d43.0","@material/button":"8.0.0-canary.fd8af3d43.0","@material/ripple":"8.0.0-canary.fd8af3d43.0","@material/typography":"8.0.0-canary.fd8af3d43.0","@material/feature-targeting":"8.0.0-canary.fd8af3d43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.fd8af3d43.0_1600889611968_0.9801160736253041","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/banner","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.d4cd83a85.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"527444ba22f33643c6a63fd22b26a0985da212a1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.d4cd83a85.0.tgz","fileCount":41,"integrity":"sha512-2NpIT/IOdBx+vUPzh8g213wzaEddkDn+605zmaoiqVXKAMNo7tgfjfdPm4m5fEvUxKoFYEMIjvaPu9qo1WzLOQ==","signatures":[{"sig":"MEUCIQCqVryjCn4HNV+/tQHaOgPtJV8I4MYZl6dm6tKR1dgTGgIgdBwJdMtmiF2HCz2GxVFahMTFTpzrWK7NwUU2QlKl/vE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTu3CRA9TVsSAnZWagAAwUgQAKR5bbu03eiMs5lyXl6r\ntLpK5GoskqbJvb3aEo1VGigQqj5Vxbabb4W1/qFpHquXUxJZj4iD49rgtd3Y\nWZ2svKEUKxXHDbyJRnBA6CIcEFw7PJMVFmSQyJ8/2bsMUTgAupRyQKJFzzyA\nTcR7yCraTpsfbvR1GXsFxG9rGVE+2ZgHS2j8YnX3OMoBj8BnO5OFQvpbkRzR\nIxvq18PibpnPzd2QtLRbZpbI4nVhcwMKk7CmA61vh1y1uXh/NLodviuoG+Vd\n/fahADoDQJoH76pJ1kDEV+1Tg19qHGzI2uriAMK03Bdw/d/SfKV91lmNmdwQ\n2AnYbM0S7OdBVlZJEPBaVcgAEug0lKGN3O2qItmR2ywL7SnJSWWQ+hMO9Asg\n+k3yRCLtrPTZILAi3Z/1FjsvRe6jGfaXkpjIlwpsO6hcwsIi/+eZ/cBsnxQn\noDRvKBFbhIJkt+HHnFkDUQHssuWCjQf2xol8249MjCMAS8k+5s7G0knJJM+7\n4PPj8ePYUCbrEfkI3XgV3GYSdQ68yzUipf8jWxyG5F70YKOmDOydi87EKJx/\ntR8dliF1J1dp+mJfy02hKKP5skEWsvyLDzBokPpnk42gObWjutmEmCc3wLlX\ne8OMMmwgNURb2dRl/IynY8VEoziTLtDoax7B0XeN2n1vDllpJZAbcNf0Gfk2\nnG9y\r\n=rkNW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"80cc7639dca83570a37de4bcf4d7501246ee8eee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/rtl":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/shape":"8.0.0-canary.d4cd83a85.0","@material/theme":"8.0.0-canary.d4cd83a85.0","@material/button":"8.0.0-canary.d4cd83a85.0","@material/ripple":"8.0.0-canary.d4cd83a85.0","@material/typography":"8.0.0-canary.d4cd83a85.0","@material/feature-targeting":"8.0.0-canary.d4cd83a85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.d4cd83a85.0_1600994231382_0.17158010192948803","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/banner","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.199aecdfb.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0ae89ff994149b3fe37844219c4333fd70a109ee","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.199aecdfb.0.tgz","fileCount":41,"integrity":"sha512-hfhN0PuLkE3qq/AZNJg6Mq/mUn8y1UNID9rDltl1WuMZUSfsi0a4Nrbvgc7yHJJsYYLQHiA9wXZdYVGR2/EFTQ==","signatures":[{"sig":"MEYCIQD+H9F3/VqCeBbXwo7KbNlE9L1dCabId/O93KJZfj6SXAIhAI5LgT2BpC2dfIBrUiV/yP/2pxEKBUeUADGWEhaEfD7e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhJCCRA9TVsSAnZWagAAbSwQAIqxiMFy9qzxNQRuxkmA\nlD81/dBdZt9G24eDRZ0FTQ3DfOxeOTyXPWWT/IRE1l+hi9PGP5HJM92isVV7\nE5sTZLm21zb8e03D81h/6cQ22yiSlgsnl66VRNdSaW4PLHnWYJRtImVwI3Bx\nEd+h/DaYVO0NKfalpyDilNY2ezOhvdIV351oXhHM8kfBd+/3QAMuloIfcJ9x\nphWxuSYHq4HeBwh34V29CgG57rnEuSiLnGjS0wNwsdJ3L81dEpVrSyvxwIhu\norMo4KUqOg93I3eVtoOS3enOAMLPOeJLHCOls4j4d7IpKHh6NR8HTXWwFkqW\nz/R87xJQyJVAAKXB5g8TZqY4QPY/SZAf8qhwIPi+aa0yg07P0Y05cUb9labY\nePU4NqQ8AOn8TRUqQS/EuC6BE+NusGMX4BbEZZ+0f0apEgQgASJ0iJD6XNc7\nIdc5UPokm1yndxYPRfEYjy9XMGDusdNJjw5omsw4qOo2PEPajnxWaMWfCF1+\naOmzKAsbnk1UOTjBBZ0+pY+6+xdQoEe3wPotfHbl8Q68s2+AXF7E1OywEvcU\nxbg1+KMLeSXTjcIo+b3T17Yoj0f/Y6CgW6pZPekSrKcoVDqeCZ4ifKWLyNyu\nyksDksdRa8HEd0e5Suu/FflJm7sZVtgctWRi810shFT7sh6vZlTqZj+c9r68\nOH32\r\n=pKCI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2ced06dc0aac728f58cce508c7393aec959895d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/rtl":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/shape":"8.0.0-canary.199aecdfb.0","@material/theme":"8.0.0-canary.199aecdfb.0","@material/button":"8.0.0-canary.199aecdfb.0","@material/ripple":"8.0.0-canary.199aecdfb.0","@material/typography":"8.0.0-canary.199aecdfb.0","@material/feature-targeting":"8.0.0-canary.199aecdfb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.199aecdfb.0_1601049154470_0.7272354363884939","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/banner","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.38ef4501f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1fca7c2dc748246b5e3035d5e4353bc69d895de","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.38ef4501f.0.tgz","fileCount":41,"integrity":"sha512-ZuPdknE6LPRs+pPUzLhA4PAX5Fo9ebf8HlgOySmJw4bto/I1AVBEF/i7wuIPaluPgB/W9kVPrzzXx/2ZoV8J/A==","signatures":[{"sig":"MEYCIQDLc3bEqNMg8Un9gMvzl8uftg+UTojJP/upL3UR7sDGOgIhAOmPogp7bDhIgATFr203reHbPfBsT4/QQaKUC5VnRe9+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2xCRA9TVsSAnZWagAAZacP/0Da/MkF0Ywn1KKK+lQV\nVDiLpvj5r7czAkpUPX+ohHuaeH8sdgGd6032n/kGgOuPUcq+oiD9x+pXljMY\nYVw7yAb52OWBb77agyo0le0CzFErLWiOV7UzzPmufriKxcU0/LtWk028yABG\nVyjLlarfwOwDcbENOINSCmm1JPSwx4uuCp+nQocd+zyu6BS/BSt2DUP3jhuB\nXSMfbG70BcDT9Jg6XtFb6WlcXLsu9UC2V3PJMu9sCD+BuFkRRyNgGJMKpqRX\nfwJTZAe4om5iTvTKs4v+9RvlCtOAwxY8QBVNhitG8sWeq7h8N5XQHPn+Dyvq\nlHZrqVtJjovV7YXYD6JlRxzcxpnx7zqxNudGEKC77eP+1lmcl/8jvl2CMVsG\nh6mpM5Vufc07Gm1VSWRGAkVLNcjMH81HJCOMuRA9C4B4tkFdkatcum1aBmZe\nDkSoiR9WPPfVmT9K/ZU4yPOEpiCICHr/Aa5UQE7VwzEbg5wxcSh7+KHQY5E+\nJRwInR4TSVg7m6Db0tJbFpz6bNpU92RzXxEXI5xjfz7u2OGjsboAcAaVgCxF\nuTwfp9WjGVHKa8lWhKJJLDfIncXXqbruGb0N0vdHzOHcak4IvnXMuwzyT6i4\nfgc5pSHPKb70JGX2CZG/49YYcy3qKPPcNdAX+tkbBCDxYCqE2vWybBopVe06\nQSX6\r\n=ZwDD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bace3094edebc680b12a257aebfe6170928076ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/rtl":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/shape":"8.0.0-canary.38ef4501f.0","@material/theme":"8.0.0-canary.38ef4501f.0","@material/button":"8.0.0-canary.38ef4501f.0","@material/ripple":"8.0.0-canary.38ef4501f.0","@material/typography":"8.0.0-canary.38ef4501f.0","@material/feature-targeting":"8.0.0-canary.38ef4501f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.38ef4501f.0_1601490352691_0.9138592236386136","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/banner","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.774dcfc8e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc38cabfead89fcd7d22bb9fefef17840bd2aa7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.774dcfc8e.0.tgz","fileCount":41,"integrity":"sha512-zF88MrrQ6j81TKLpxc8Hz7MVrtqkZ9VMnHfDJ8BjJK3y0jfPHmk9ldpJA1UwhU2rz2ZPGkUDUhxmX+Xk4LeLyQ==","signatures":[{"sig":"MEUCIQCwGfMuC5FuUd8mRvQOZz/Xxg5Lnc5FEU77W0JooUs4AwIgUBdKPpS1HeNPrZy9LLT1N/TLOOKIsZt1CgliIsSaG6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":430990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaeRCRA9TVsSAnZWagAA97sQAI2BXWD79CskHAC1TNF+\nC/tP9mNl7gTWFRCMHV6MczDAtQB10mjNKsCTgepZblKVn35EqLwV1c5v0suw\n6trJrF6bvuIoyXMYzzdkeeegkhAtvE5GFnJsb/Ewd1NgFoJcNsA1xb9+jNdn\nqyfDkE25bzNRAkyWDFixH3v4ECudcOYxL0fY+i1hXbupMfmuwDzTKU/FhhAK\n9Qt6zTgWbB/2t6GTbPycmuujWdDNTrZGQKBgQXfO6nGHAuERaSmboLSKsFXB\n9J5ILyioKJywsBVwDzI9We+JUy2fNDAyuRTFnyjLHRAaD/QzAF7POwN+VgNw\n87Z9bY4DvcdcYOO2T8+5ZXs+mjd8x4pYVtieMbqc9SVsXExCyfGxe8IToxXB\nHeNTOgtjD4va7/It94y5Y3TrdfeeoVv6Nhkh0AmxF5DKVT6rV+hJS4V/kxJr\nlAqprmE0WJ4sTfzmQ1tPnwFnyajdHfI/36PueGOITriL+T54PwwzIN7Bbimq\nlcC8wAMuk4Zi8UE8dtwTzueyF1vcZnsB35tQARnLPIKjk5QxfuEdYVuAN7z2\ndNE4wvpbDvg1mMb/SqR4TaR4/1lacuX9HnU0VuD97zQuofIYsxzuSga9mQd7\nIX37UMh0G4jMrJHrH9VfCcURrd5e3NoQlfEgg1wT7NOezJlXY46c0tnKsHdI\nM2Xa\r\n=Rtzz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6c37b80b059fbd4c815253f3a3868578afcc1afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/rtl":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/shape":"8.0.0-canary.774dcfc8e.0","@material/theme":"8.0.0-canary.774dcfc8e.0","@material/button":"8.0.0-canary.774dcfc8e.0","@material/ripple":"8.0.0-canary.774dcfc8e.0","@material/typography":"8.0.0-canary.774dcfc8e.0","@material/feature-targeting":"8.0.0-canary.774dcfc8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.774dcfc8e.0_1601546129459_0.6981444829046046","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/banner","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.0f60323a8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5b3b0249679269ca582edd4c2e355ba08b5cc3b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.0f60323a8.0.tgz","fileCount":41,"integrity":"sha512-51xvIBIjA1rhmk91a+BOpduOQBa+pTttr1JJgxgGt8ABGi3bco3Srw82DSYi/0O+NcLrxxM1Ga52fDkim0/m6g==","signatures":[{"sig":"MEUCIQC5oopVM2mYfqpr1/+xQI00tSorfNMl5kOnwnVQax6NJgIgXZ4GPvYLesL4PYZF4qR2Eh99vWdgBxIcP2rgqGR5Szo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4B5CRA9TVsSAnZWagAAoCAP/3Emjv32xtSHL4adNZRl\nNbz6DyZkXlIKfeJ1C/8Uv1q7eInBnL6VnMB0mZ9ORya77fDCFPhnsU2JJIsZ\nmestVMlu2jue0tIDp5hCb20lubTKNm005ZWEGqSC6GXUdbypDqZUX2IcT2Ac\nDr57QE+ln2S2jad/w62ofdbnpwx4SNR5dmqVHft4xOgzZfU8kX8VSoYyHjCH\nt3BodEx6FZ6xjwz+r7pEXwWaUXypAWvEOJthhATi9xdXX9bLu4Z2ZPC8K4iK\npKjRnTvZOr2TkpVvqLaQSUoZq4U9H3t/liGE1QLpxY7V0d7GL14LEmRSL/Bj\nBraic8RWLLS1rwUX2/B5OBup1xd49TYuhubrytTOWopinqxW3CAn9dyxtS6y\n1pHZdg+711BIx+ur60N8NlRxosnEpo6MDjDOThLseDsXD2sxHqf8/oahTb2I\nu7B1NLljZZwpDRfkJ8+Gd/SZ+Ut8MQqeAjG/Vx+WG2WvCl3Dxsdmt2d7+MzP\np5u831nmHhZaz8M+tZ6S3SvLTC/OdiqDE7BIO/Ne2Cnk9M6pLhJ3p30AeyP2\nTX/jZZx9bUppIjGHhfKWylaYwmVEXMEtzdhBTHuUo7n481WWMjSrxBadvv8j\nUVmPpyE/Lbb/noCVGcxUYD7NSqTU3hOAO9D5YSA3yNZTNuHr5bnFv6OXO2bF\n68/R\r\n=XZCd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"edfdb55487a31cd5f5130aad32b3fa8f369e6d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/rtl":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/shape":"8.0.0-canary.0f60323a8.0","@material/theme":"8.0.0-canary.0f60323a8.0","@material/button":"8.0.0-canary.0f60323a8.0","@material/ripple":"8.0.0-canary.0f60323a8.0","@material/typography":"8.0.0-canary.0f60323a8.0","@material/feature-targeting":"8.0.0-canary.0f60323a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.0f60323a8.0_1602191480986_0.1620416267872229","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/banner","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.d71622574.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77fe2b2036f0336d340074a4bbd64e3bf1769978","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.d71622574.0.tgz","fileCount":41,"integrity":"sha512-dx3/+mbIA/UqXWqiMzkYKhmBUPg0Rz9RQakHx6wpFyVQDWMDRj9IUWkjzqlyMNfgsD+U7BTT/QeBg4GfXs5Tow==","signatures":[{"sig":"MEYCIQCi/MM8rQ4otM+LTS9S5lhXrGSIVCPkzz9JIQhOpJ/5YgIhAKGcO+rQa/4ODrZZ42mNGRory2sA31gHaA31t6DHdaQQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJC/CRA9TVsSAnZWagAAnWAP/2u2bfuq9QLFRrE1rJ8o\nPtrEfKntpLGFJqnxhVjtyFU1FWJVdHud4qGQOfEqalhN0X4MHM+9hAVO9WD6\nzQLZRlrakF6Yya0tZJN0ccVF120nITrK33HnCSJAAjUbMJAe23dbe75whG6R\nBY1Jl3mkfIjtVsUxR7dtELp7HeVngwLZF8XLoTPQNsQ8nExlnAHVPqMhOIpd\nN1HK0F0iyey1k7PGgP3rRMcW+nn9X+RumprmxE3k13Wo+myaJYSf1R1UIvMj\n5MQPKbUDTb7SO94/mpMSRmK+lV/8HEm/+GY+AyP6gQd5NsIw10hOhgOs0DBe\nnCJi0sQNRmvOTfV3A/Nrh1zdfKLz+wDX63IFBSpoQbvQqsKIlQzg1kDx/rUE\nmd1TNlUPV3ARfq57UtTv7fsX5u1PaeQxVM+ORMu3nLY0K19SU8ER8iKF6hPk\no2cvep/d5Wlcqs5LtQV5VA4TUN7POeqadEb8s2xqDUj8Xlf8/skCmaudcKaa\n4TASZ3JFCyODM84uEvZ1a5rJHZyvIWrC01mti8dwQPDssujXuKaKPrTBOGTB\ndgdG1BZawGBfPZJDuabupfWKTPxG5N9Ua1l7owKqRp5BE95VW45IDlCB1VyN\n69W/VayDb2uu86hgRBcdtDP2h52tl0p3fE2S9Nk1pMXVLyIfeR/byOGGBFlD\n1agW\r\n=6MpL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"19a45f4824305f22d61cbf9deea0fef067dea3e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/rtl":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/shape":"8.0.0-canary.d71622574.0","@material/theme":"8.0.0-canary.d71622574.0","@material/button":"8.0.0-canary.d71622574.0","@material/ripple":"8.0.0-canary.d71622574.0","@material/typography":"8.0.0-canary.d71622574.0","@material/feature-targeting":"8.0.0-canary.d71622574.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.d71622574.0_1602261182618_0.4391326821676391","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/banner","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.7a9afaf4b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27a681c50e5ad8255db28c28f3f4f9e1e6bf8e09","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":41,"integrity":"sha512-m5niKeJmCVoWjs/d4ZYCGZURI4imvy87SARMupB3mjL4hQ9XyjcXRxzJmIg2ayKz3A0jidWHdc56Ms5FXJ1FcQ==","signatures":[{"sig":"MEYCIQD8rNK3g9UyoPLlHwU0cL4TBeG68sNJQ+stodbekzYnPgIhAMc7MC0l7moLTw7Ri11JO7AuETSA1mJNw8wpeDtTSPQl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOpRCRA9TVsSAnZWagAAf6YQAJXYpvRGYGUnowWCVG2D\nmFFZt+Mm9AtLJA7HuGMvRZUgeGVhM6ndCalv3aGBrHwQx+HJsaltQJdmi1Ex\nFsFl/M2UW30UpsujDaCsIiV28BJZTxujAyAYqYjSLyVKTk5d0AGP65luc2qb\nW8v5w86qPYkyInAiT9yQLr0vu5VkiY9LzabPgZfuRoUgsUXSD6QdlZ3SHxgD\n+uS5NCcGNr4G/SK1jFcLs5JHxwiTp45JMiGSmW7eJDAKN9Zac6+Rjau3OxRs\nKoy+l6bkkYr6wS/OBKo/PCIieGFomwCL3EeLnvC8F85LA6xQASYyxTpqd1St\nuAkvWSciyD9NkMDJfiX26D2ZOxNfxIcdCOmIwYQeMRoOnz849qwcOvlaT0uE\nmGXCRVYmmVrK/sLdig23rm1RhpAPyr14LKh8QzgIhDtsdJzgeVginR3fG97n\nEeA3b7DXlYuBMNj3gwbzeEVQda0lE+AKpgjSKjVRySU23agqkY9J3aljxXyH\nRFLuX0Qnu0iza1Jcl0Yq87/7iqLtd9uWe9sqaKMBS1A0IzBMYlcHjlUvE5/M\nCNWieJfWOa4Q0VuvJD6RgTOqcCmAngSrkP7tgIai9LZoE1LLqifkMcKs0fV7\nRoLLjc1KLLMgbWOJI0jkOJIpWRo4ySqwoSKk/sp96skJ4JPRoaWoyYqpI8xH\nxCQb\r\n=1oCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"137d6fb8ed93c50312981c75fb37199ad460dcf2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/rtl":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/shape":"8.0.0-canary.7a9afaf4b.0","@material/theme":"8.0.0-canary.7a9afaf4b.0","@material/button":"8.0.0-canary.7a9afaf4b.0","@material/ripple":"8.0.0-canary.7a9afaf4b.0","@material/typography":"8.0.0-canary.7a9afaf4b.0","@material/feature-targeting":"8.0.0-canary.7a9afaf4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.7a9afaf4b.0_1602284113364_0.16355907738457387","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/banner","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.8a39352c8.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8418f63da87317584fcfd5674c1e42df26405337","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.8a39352c8.0.tgz","fileCount":41,"integrity":"sha512-E5CLfnlPE1oOMViUWrdLEe/DjzeTavbt3h1i0vluEDgZb+fxPnCnEwnij+gMlmFoY37DRUyw7ford0EcJCUtKw==","signatures":[{"sig":"MEQCIECjQ4U4YHqNHrwKlZzekJ12D5Vecn6MthJlwSyKLNX1AiBOj8OHZuMElgiay6mEClkcUwvbhQSj2rDk80asUybWGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJbICRA9TVsSAnZWagAAIB4P/08tummmig1cjqvka1JI\nbQy1pWCoBTEX//mZaGZvOlTDWnoF/cbSgHnDnZpeJpi+H/ichNWzDo5jNRn5\nUgVJB7PkWbrOIL6Dic9UmOZfXA5bYqFX2vNwwygeX7wASDIVZy3xXkCbgWzX\nGU33a47o23hvUgcfRYVilBXqzmB/XHRd3GA+3Ps0Ullpy4/9Kz1mIrp58FJW\n1IWVpXhYZWNV/d+8YGV3Ae/t66dpd2nlJMmqkepvrcLedPOiBsE2D7lCy8bk\nwFw4s9tAXNsZqfzZPTpOQz7mScIj20/qFv794Kog7sy2MYOqJxsNUDqOJDcU\nUkhrg0Lj4qo93dsHpM0iV/oXHNUBUUMO/fWHDGMVuYSWzUc3z/BCS6ENtWzJ\nsuq0JAd3WtzDEuhcVz0GMxJ6xOOsGidh8Q+NO2BLPnBTLe7eEJbejort6T1P\nEueVFLvvEj9HhnAMiwXjwZLbW/KZBmUjXF1WQmRxaAiQJHvhgLsHptT3uYN7\nBVCunMAxOKrQUHhDbRuddzxz079MochrtLoxd/BmLhaNVLFA27o3rvceUo8C\nPJIeAjfsuLRZNqFg+a4lk1YnwXobCAA0NqRhZAZCYf8YwxBACJ1uVOf1070+\nFg5LpYfPI+Oqh5w+8HoZ4QxTugMSS5XuzlSoPQVIFdE0Uuv3FKFlZnZUSnLi\nN4+x\r\n=783O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cedb8cd906516b8d460c813039351e951b960c50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/rtl":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/shape":"8.0.0-canary.8a39352c8.0","@material/theme":"8.0.0-canary.8a39352c8.0","@material/button":"8.0.0-canary.8a39352c8.0","@material/ripple":"8.0.0-canary.8a39352c8.0","@material/typography":"8.0.0-canary.8a39352c8.0","@material/feature-targeting":"8.0.0-canary.8a39352c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.8a39352c8.0_1602524872367_0.6266558910376463","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/banner","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.790ca85fd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6890c570b60b5b1fd595b878b47d83485dab12fe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.790ca85fd.0.tgz","fileCount":41,"integrity":"sha512-KzNblQu3n1BZZe8ObqjeoDcrS3MYu4azEflQGj7uYEdLc/rLWYU6HRAmzm7+As8Yl6iomh/bg/d4p9MH12D5Bg==","signatures":[{"sig":"MEQCICgO23uXo+rARZeoT4q5LTd++kPGnMpmaPxeEp/Z/gb+AiAqxwWeEXK3HlgOYTAMcvf/bYqgzi3RV+R27c3DOJUrTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFnCRA9TVsSAnZWagAAb6cP/AnMSDd/U8YOlAq0zuxI\n/B4DPzsQ7SuknygAlEmfGN6XJXhPE/PPQ46UvmKEvTeWNLSclaYtNZPNZmp2\nutWr+Y+SpGqlJoi0asf9qUMFYR8HGItKDsAW3WVcr+qswV+jlUaxmc9UdWO3\nGE0bRIsCJNZcGGAYGBM3G55UhnRaTBL4M+hdoVMsK4nE00Bm1sPqJyJMYPOM\nKIfujJcj8Gv2FDk/EeTwJ/D/wNSQ/fSD8/HkgOStK+cME+ppUIQN/NHHhHzt\nfGP5mvcot6cZtIM5g4tE5emjybSAwZhWP7E+fPaCB1WFjdB4SQH9hV+R1oLz\nG5eQt+B2Ve5FlBSk5Hjojfe3LKOTA/IRHxZSJJXI3qUOYr0cZxMSQEAexm7l\niDwTjjvl1LtettZav7oQaIut8PRh27kBQwIPVFuV664Mdc4K5olat3osX/A3\n8rAVZgPe4e7ISlZvjix1bH5xOftdQyc2yr1Xfp31NNu991ZVzrV5zqimGpDr\ngGCR9OAXs8tpip/5t9KhP3/E7NFOMO+ZSuINzJeK3vToGk16eTBSPq/6Dyzp\n9Ro3c/M1TXOu2R/Thc8A82qplIzOArXXvG6EjNPDZ7uXgF+y7Q6sKdvxMXDM\nQqKZ9vNP0KSY7s4atkvwEyLntPSOJJnyTua15g1blw6yw+ptuq+sSqk5nqRH\n9xLa\r\n=CcH7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8971e891898c4a8ca082beda756a7b93097f858e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/rtl":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/shape":"8.0.0-canary.790ca85fd.0","@material/theme":"8.0.0-canary.790ca85fd.0","@material/button":"8.0.0-canary.790ca85fd.0","@material/ripple":"8.0.0-canary.790ca85fd.0","@material/typography":"8.0.0-canary.790ca85fd.0","@material/feature-targeting":"8.0.0-canary.790ca85fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.790ca85fd.0_1602539878934_0.31599061085033253","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/banner","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.174c0becf.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6959c43f78c05bd30156df9c2b967d74143d2c2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.174c0becf.0.tgz","fileCount":41,"integrity":"sha512-52j9LtSxTKOovKgkdLqfxQNKlMLewvPwsBRGqVMTPzzFnxTaWYetHaPIHc1H5dCaKcnJ2In8PSmFeWf91XR5Uw==","signatures":[{"sig":"MEUCID5ckWWxMq21Sn01RnbncWsmmb5ZSgSiqCVyoK87TylRAiEAwEeFt18nJjw8+7yLt+o7iV4GklZfZdMdbhxYks6g42Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+YCRA9TVsSAnZWagAAfsAQAJk9wuDJnJqpWqkbG3Nz\nUDQc8zJanfrp/m79V5kdRofynmrE9xzEbOpheqtUiPIhoO07LELGgj0urlEj\njQNNAcamUNg056yEVVAuYVfMD6Beop6CdNCkkXwLb4T+DihkAkS+oVqhwt5D\nG7WX0gSN5+V2ter1jLVwDHshirMKg4vzKevUn81KUynLqvaNtRejMXVL0WB0\ngCIXFb6ejTmIQ+VdrgaPEOBwHkVHjZZpgad21i3puI9eBBaLVuUPoT7y4Uoe\nbOUiSdfO8/VxZZQb18nm4XW2PdWfMZxm966G9Q2nz7xwe/FoamnWuIarfMgh\ndqPKY1V4HgvpVDmgkmV0mhy/M5VjBJK57znOA2f1e/AYLFVMa+m/cdiyHKyG\nnjldjJl37fGSIeXGofohRdleqWD1pwXFYFkXYABeI37oV7ZeGDqgFrgRJRyG\nDfmbAh1IkLnXx8XtRjxErooFdKYVaatx4Fa2Q2sme8j7XWAhigVR1ouPqTBq\nZGsWnZOkbBYHdbzx7LCTO8S2M3FoyzRkNneXZNMJrP/499wp1GGzBZWsFt+e\n4YPkPRhcpBNbg5HnjEheh9vcE+PNS463zvXkSDLsB+YDxU3PoWZUCK2O2eQd\n+oLXjng/Q/anWogMtoAKVRTo4ludohwLf5KiECop+zVWP95Q/BB6yxBaoDXH\nw75A\r\n=mH89\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6dc7561b8695889178b3e884e84f5d9c3d59e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/rtl":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/shape":"8.0.0-canary.174c0becf.0","@material/theme":"8.0.0-canary.174c0becf.0","@material/button":"8.0.0-canary.174c0becf.0","@material/ripple":"8.0.0-canary.174c0becf.0","@material/typography":"8.0.0-canary.174c0becf.0","@material/feature-targeting":"8.0.0-canary.174c0becf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.174c0becf.0_1602641816340_0.7289755883301143","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/banner","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.c71ebfa02.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39216793fdf154f5d398df8b5cbe39f2980f3b4e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.c71ebfa02.0.tgz","fileCount":41,"integrity":"sha512-GXT2TlL1D2+EoZimFFMiy6+5lWOMWxfigS92u3z5BGe+luDwhDrMtPoH8qrOjTM43pWXjC892vuic0ZIoA+GeA==","signatures":[{"sig":"MEUCIQD7mPq7MUIdwEwrK6L81zU989mc9n/uKXFYgQ3Z2CMCigIgbQOCuyD3kzKb7Cv0PGSM9Q+AgEjU6a/6Siyu/rU0rak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwsCRA9TVsSAnZWagAAT0EP/2w0pU6ufnVKq9+GHdaL\nhK1VANGIYHDmXGvf5fewO7QwnVBQCC97lNxLsWx9RPEGYHMGCoE/fuHtbhVY\n3jRkQo8CMJL7CQmBiuGTDJnodRfq6K4Ridrag0vgaY1w5WNVXS1bjkrEatp+\nF30a2am6tLpGge9UiGiL0tZ3/0BKZ13iHZ7osf2R6N49+pGzK0AIebKvSimo\noIcuAGCli5LMQs2oScQZqbEhPuYHjBLbUvLd8q7rvJWySz43nPg+f9Ut/OTX\nzq1bFC8ZnhZB35vdoh4YLEj+GhnYlmrANBP4gYHN91e7E4YUt7oGm59AULKz\n/bqCvwOAZov02p5SFV6HfX5s243LUo4tdKq18y9q6s0FBC8CHI/2rWvrW3DD\nAoNXp0QBrgb/LUX38FVi4nC5Nk0Rc3em6gFYwb/GO35H06gSaCq5ytNuof+0\nUi0qkxnVrOD2Le9eFKVTYSdIieYU0FPacTCTnggpXBmeMeqQaWq/l2VcEzF1\ncEmcVfrAeVL5kAjHoeCPMUcxWK9pUfKXrwGQ1O3e7gR3v74cVo4YuFYFEQGI\noLqOiJ1p6e0pkMj89WKJ6cAW3uhgHZgrpKJyVuz7QAdaLbaPAkMGbb49JTdX\nzGUhuWRa7U5DvYVww1bxPFkXHxeSo6Ca2Gni/Onkx3qDmMyh54z+qov8xiq4\nWbOb\r\n=unlF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d1158a184d234471c81501e838b409c54f591268","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/rtl":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/shape":"8.0.0-canary.c71ebfa02.0","@material/theme":"8.0.0-canary.c71ebfa02.0","@material/button":"8.0.0-canary.c71ebfa02.0","@material/ripple":"8.0.0-canary.c71ebfa02.0","@material/typography":"8.0.0-canary.c71ebfa02.0","@material/feature-targeting":"8.0.0-canary.c71ebfa02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.c71ebfa02.0_1602649131724_0.5245325899179536","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/banner","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.2ab716cbd.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eae8597469d0bc1ee6c32f84776f957aa1ce7878","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.2ab716cbd.0.tgz","fileCount":41,"integrity":"sha512-I4AKtSzAnu9xec9U7XzuywtBaIZdTsHvUXf4+4ZBHEtQ6kUfvzwY16vI7ZwHedAAVdnfy5ipRs3C/x+vhlqFlQ==","signatures":[{"sig":"MEUCIQC3eA3iATXVR1csg2x6oO0JIbZNyu65JEiYx23GjV/VyQIgKuz8/4IAB1RjvH9kta62DLayyHvQ/zCIVOIAncMUyc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPQCRA9TVsSAnZWagAANUcP/izpnq4NHfvMoSsSEtoQ\naKZ55VmciBdSiMs5TGDk0zbUCU+Wz3FlzEA0G0pUlJhf8k1c2DmQ4MzVm4/E\ndu/jk+823KKATXeL7gIyAuL2u07ZwkBqKGS2s9LXcKQN4ozYFT2oMKsMGoQs\nKVvEM4iBxZ7y6oQ6wJW/CJ1UMA8KdusEqWZibb8dnMPXRIhN8tjT70G7mB8u\nL2k001BUVdZX9o1Zm5Krr/sZa4qYVElz4QR+DUHlO4Im5co401JzXZPZl7pq\nuMOWY/BeQbdxEyT7diQv1CXcdf7StVanM7PV/EHdg+aOlU3jzLTOObR079hI\nR7qjEuY6fQMteGG+6JEtw6hF8VDq/XSfI35HYbb98Yqs482hp0tkOXMDI0D0\n+b8Knxx8NFtxGVigULqBtRYFkCrvlYZyV3OSZ3oj7DbhqeqxtRHGHF3ddX1g\nN2Uk3n/RrKmJgNU8ehFJ5TxecYTLkosO3ORASntSDBOtFToMk1fWYE/8Xxc9\nvatDMpTyh2Rs/YSTEsOIgYyWNOijAIY+WiLl5H+Dxqm55Iz++8UxY9DwFcsE\nJ8KiCAS8SaRswzlv4oUhbhZug/PcHe18z5o/p/f2WcIT0ysKe4d88MOQWieg\nIyYVghTGmdYfsqi3N2yxMX1wszz8z6H09Qq4ruYCyuJ0gvku3QcDvRrJaje2\nODd6\r\n=bDXc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a3f41127e9d90f7e393ee6fa5e01829e52160131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/rtl":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/shape":"8.0.0-canary.2ab716cbd.0","@material/theme":"8.0.0-canary.2ab716cbd.0","@material/button":"8.0.0-canary.2ab716cbd.0","@material/ripple":"8.0.0-canary.2ab716cbd.0","@material/typography":"8.0.0-canary.2ab716cbd.0","@material/feature-targeting":"8.0.0-canary.2ab716cbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.2ab716cbd.0_1602806736353_0.25397583272223745","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/banner","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.43c1c5e2f.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2ab77ced4c9b94d136e143520d14544d5bd7ef7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":41,"integrity":"sha512-Y4ZXeEKMPZ3JQpahfNUl0yC3/ZsH4qoe4ZcVwLbaueFWnvtiwLl+tYCvqYkEnsxl5KVJypzh/teGICtV2nNaFg==","signatures":[{"sig":"MEQCIASzaL7yhLImBJOG7ICwziMHuCNtC2k+7zYRCj40oJm+AiBH65etEDtc9sgrm9MYtWtf8zvMvn5UhlkUdYTe7481cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433172,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4lCRA9TVsSAnZWagAAxicQAJy+sCjUgPT/toUXHKdL\n0EyxTFwW5WV3BMqAOUfiNRDhqcBPU4MhScnu4K3WKCKBjh7pf88xOGaOgaOe\nAaolHlrgQeU7Xx2UoL5l0OyE0PtumcITTNhxZDwZC2nltI0xnk1vESSWcPXT\njoz/3AHu/K5RfdT4S7dUAHF5wdIS6tLePIet1p1PR/s1wnPUAj/y+axWEU3g\n5j31INqCuNXMjd/QGB8eKE8esWEAA0rdywmhZ2UGCtwVTwedT1HXCvO6iQYJ\nwGmyVCgVIDomQalY7TP/N02EnT6r9gi+fl0HkVWwXE+gidxgO0rTbLrB4Hly\nQb2ohJvvsm93QeVJ+epSakwbNDVNqS8xrJZ9EKg9fbTvyo1q+WkiihaImZUH\nls+0kkjs7fUWmUPzXbe6tdt3+Np2leECw1tnuzmKLlvJzs5+e5cNlk803NPG\nXFPQP200h5Ubur8HFrcWcFvefQcbc3Bqw7p9Bgs1RknfGz6WunF2YYKHMg5L\naGdlLbmfkhDeUA3e2bHWP1XJdyu9drm9Z53Xj8wbOpn8a1CME0ORavywiVC8\n1FTpNEy9rwIcDTUggPd2AsiWS1e/OWxGKRzcdwxDrT9EoMne9OwzfWDcWLCg\nIvIg6gcpMOk+tQPJir/VvPGkmDBDZFAldhd3qvnITMcAL5pB7IszjJyGJ6+D\nVzLg\r\n=pShD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bae89543d5336b4583fd1519cb63078d2a5c39f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/rtl":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/shape":"8.0.0-canary.43c1c5e2f.0","@material/theme":"8.0.0-canary.43c1c5e2f.0","@material/button":"8.0.0-canary.43c1c5e2f.0","@material/ripple":"8.0.0-canary.43c1c5e2f.0","@material/typography":"8.0.0-canary.43c1c5e2f.0","@material/feature-targeting":"8.0.0-canary.43c1c5e2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.43c1c5e2f.0_1603116580789_0.39150466580495324","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/banner","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.ccc64eea3.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"440c8cbe3f3b2c82c4e22c60d63287345b73174c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.ccc64eea3.0.tgz","fileCount":41,"integrity":"sha512-gEAy0U2UVi8FUxcgBckCb52H7CH8yr4A1rD16k/mkUKBMOxqGIsnGnTQwtNJjKq1SOOLAJYoJ9mRCtrxG62ktg==","signatures":[{"sig":"MEUCIGTeZRZOofeLjGJrN8rsGpBwlG7YDAUEMWLGxb3KmBKSAiEAgG9JrLkzqJsojv1LaYTFPbkIELgNfNlk3v7NyFj7mfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1NECRA9TVsSAnZWagAAm1MP/Rh4EBiT+hySGspRFI0f\nEwtIAsWXJQ9PUgwRy/wcrdvcB6nbHLXnn+L3XT62ZYsPISj6CqeVCcDxhLPQ\nkDFk86TlsjKVIHVSjqNDfh1ldFCB3wFVmyJnG2RGvduE2dp8iSjN4zN0zKkH\nF0ZnCRDcoei8kuHgYECqmxzr8AxzpdrhhF2+F7xc4w2vEwnNvoSZfSgeGiBg\nvY2jflLTLXKfAMaU5Syj940ixY0vdiROiuphB2NyUs6sbDhoD6H1LtmMMm8S\nzdi+Ov029TfT5gtPIM9pNlYBUUb09JfChiFRG8AH7bIItZCC8WMZcOiJZOSL\nXWuNf7KSfoiFaztleX73LocR2Z2DlTOj8+eXs3id1CLBQkXQ84ibVkixCwq7\nMIDn8zdJSnjj7RCPO8J3kthY98LaAp8Jpn0rm0qrcGtIJMMZ/EevTyNo6gcB\n2t1XdcZ06nqONLRTnGBKRmLSu5X0xuytqXEubxMNb6Om46BnVXovI6vFzHlC\n1HDrAce/pTiR3mpVz/m3HXotgLqOGDBJ/ZH5gKuC9j1SJnGi+bpiNahfocC/\nYNSLNyN4xf29FapmcWRxxQPKeh91fa39oSIlxK1iVSDUFsoIlRolp3SeCvyy\nuajo7ev+Bm1uy/rXTdXkIQrwA9giZs+HFYPcmsoeUsNU0j9/fbIfchx5fCMC\n5gu2\r\n=6Udq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"26df299f75c86dada6da463cae5df1b0277d5c7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/rtl":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/shape":"8.0.0-canary.ccc64eea3.0","@material/theme":"8.0.0-canary.ccc64eea3.0","@material/button":"8.0.0-canary.ccc64eea3.0","@material/ripple":"8.0.0-canary.ccc64eea3.0","@material/typography":"8.0.0-canary.ccc64eea3.0","@material/feature-targeting":"8.0.0-canary.ccc64eea3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.ccc64eea3.0_1603752771897_0.3357449840972371","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/banner","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.a79cdd019.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c36d728d3c8f1a7a4d69d042021a81e18dd09c37","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.a79cdd019.0.tgz","fileCount":41,"integrity":"sha512-MvyWsblnfGeT3M687RT0KGwRSvPVeWnH8wLKeHzfdLcYW+Jr3uFBrxP4VoUsd5UNTHxSjffqj95Qrw7N35Jpew==","signatures":[{"sig":"MEUCIQCmJ2/vy8KRiy05tKvoGTsI4cSHbciPlVDvf0lxGzocYgIgG1ro4UDvodJYlhnlcYy7PUL3sLJpaSj9DIRTJG+VzEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEvBCRA9TVsSAnZWagAA1AgP/3KOt6/199lHUCR1bXFJ\n2CPFovntNamFGgx3gPzyt9574a2z6cGphLXPlVd4LynEBJhVTDHSoEsWGOuq\nY8umQoutVeyfzV9wVg3Tdh7McdDZiSWKewjW+dMiWibIvFWJK6+SdQS+fCDn\nKaX31Mq9aztyXjRF4qVnB+ZzSmMPIiCyYY4cmG4BlENAW4GKZYAR/JuUu+sm\nOQa3GPiOSR32KLZr5mfATXKGn9RHKY5wHB7okuoqdR3WqNynwGEHh0n2ITiP\njpGZjU4s8QDQsIrnMZAbodkF1EVw7c+ox/2ZXNcGJtucr2CfwSBHbUH2YJ+e\n32CfMgiY8xcNsb7Br7IKQxW8fZQHVmUQnI9Rd//oi+L25A9W6g3pU1Ah9pdP\nRQP9vGqOYvjE862j4mwosjDaom3Mc+/z1g4ycrzfPbcGbQaXij7hpqyzqWE1\nwYLK6dKks35SstKK/bzIbG3WIXDctlgj4AH3VSBLkNzWt7ZPp7qabV3qu98d\nPM5KW/h2vhXeCvJpKGC0KHuihsBH9BWDe85lg4Snelef++9NjkamgRC+i0oq\npib2bbmCJZoqyu6oDbQ1aYAV9YovAMNa+G/eGXDtN2lkVPfRWWNpFqojxFEu\nX1qXlNgN5xoi4ToDU6xVoWdiYbNSWS5dIN1W42xWOrgK86NzagaBoKZYsEAt\nPA4W\r\n=Ratl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c54ccf71e4018e84948fec32678595d974f80c67","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/rtl":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/shape":"8.0.0-canary.a79cdd019.0","@material/theme":"8.0.0-canary.a79cdd019.0","@material/button":"8.0.0-canary.a79cdd019.0","@material/ripple":"8.0.0-canary.a79cdd019.0","@material/typography":"8.0.0-canary.a79cdd019.0","@material/feature-targeting":"8.0.0-canary.a79cdd019.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.a79cdd019.0_1603816384570_0.5667768837490883","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/banner","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.596e98424.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c6e0f177817bbba89e56cf92bfa9882cd290e9e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.596e98424.0.tgz","fileCount":41,"integrity":"sha512-dauz+najw6im3wgaGBN3s9D1iM+YzchQ2O3J6gLdSovzuYux0KUh+FXQGMsUNzML/nSDRZRHGUAN4nUQlTTX4A==","signatures":[{"sig":"MEYCIQDZ1lz8cAedXa8RsxOsDM/m32ME2CABlf+ruIvJnmDQtwIhAJ0Ly0nK0gDZiEOiY6tL1iEpzhlcq/7RG+eia8r/mzHt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZa1CRA9TVsSAnZWagAAPPEP/jIEjfA4pe3ANcHObRIJ\nnpVPO0ZPKivxO8Ah2rirYHTo7vus3cJzTNqekofhjKpHnhce1QvhaV7o6LUQ\nTipNj6/Lu8v5dBFt88W4HJFC02kM7hwRg7hv6sxXJD33JarbDFYcitBfXqrl\n8VyzpUHw34/Y9xr+j8okDggKdV9D+I9RehFJFCNEzMIzGMY8dcvH5RcAS/M/\n/dRjHbOac6nsJWamMNS22pxagfcs8KahYtEY/Fam5TCWCI6/K6ltlNFZbpwe\nNTevD2vWXDOX6EOofd5CygFTQQ4FUKov1myJ4K9j2gg+hycBXzTntqUHUhoj\nc4ma0aq0NEHfWlvgCWdSKZwg0Hs4eWQe8UXC8rHlroOzi48zgqzq07BE5ocp\n3Kn4ElfAIZvDEJOxqFCRU5FxlPWRTqmzosIl3nAGKHQ18Rq39+5p+JobgQoM\nALRxf4isKR9oZkLGKUfaf3U6oidwH9rkxgvhA8dJvSrog5qTUC46D76xAy4e\nSK1naACfLMWouS/utWt1pFkqUvaPOs0KfDGgNKpe8l/6kUuEbhIa5BWmHRFl\ntpeMVtf7GNZuCsoscNLkNbyH0twgP7PFqDT1IuMMOChLuSOBRVOq8yO2TdkO\nOhN0wyEe6ieXSUAsDrCddJJpr027hJLlRZQZD1UR1Zht++YgvfnehjBhZu1K\nC4s+\r\n=wL7L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8fdc1f444b4540a876847c7c3fb4a934e75fee2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/rtl":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/shape":"8.0.0-canary.596e98424.0","@material/theme":"8.0.0-canary.596e98424.0","@material/button":"8.0.0-canary.596e98424.0","@material/ripple":"8.0.0-canary.596e98424.0","@material/typography":"8.0.0-canary.596e98424.0","@material/feature-targeting":"8.0.0-canary.596e98424.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.596e98424.0_1603901109238_0.1685217655268414","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/banner","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.05d5facc2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1f47c30a601df420b6f19316fa8bb83e9ab47959","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.05d5facc2.0.tgz","fileCount":41,"integrity":"sha512-dodyZT/IiaK3fxAImPEVa9MokfS0PhmaH2hR8m0rE1WjS/OK5dv4R/Nyr98btSI0xGPLgNXHTryXQLol7HNkRA==","signatures":[{"sig":"MEQCIBGmBPTWL0ysBjaX2PRZtwotuTSiVL3rfwev08yy6tSLAiBV/SMnp83OfrxhaMW0zIvokU3GMAiA+2SKFsDv6lOAhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZiyCRA9TVsSAnZWagAAeDMP/0qudyyMa3jCtEBIYn5p\n4MzXUr4XXC7KJFEwu2uCE9GoRPqvz8CZBjObQV9NrNayzUXqPDrEnd8vxFBl\nwlEaeJ+BvYkWWjTJeONcL5ItgckbuYxXh5YOhANrcVA+67lp2XVISew9J+dF\n5TLASKDUOpgztyY1Ck4KBAGpKzE5q2vEr8tVXlKTAiPZV2Z+iY53oRioE6lE\nlDGCVhNcAENk83Oky9D2gSX05rVp20RG/yWjb9+P5z1ubNM1aEb2tuvxg7HR\n0/Hzrj/uswQ5BeLqQBa6ibUS3utopk+yUaHq8PUXfVKVMIwXyUHj3e0dWtXh\nSYFeS9GgOVS3NzXwNcqj8sUFYu6KGiRT0skmX49bwTwB2VoHDitI3RYq0f+y\nmG8c1KIK9TifmF0/K7sLb3oknYH4AP+kZhQp9u9pLweduwH1JN+qMJdB5t3i\nWsk505VSmfHeyafCKW5sCYhqoHE/iC4pu6QcAgGuYUGcNiIlVMqiDF9QbmOU\ngkR2e3/OMYO9gqDcbOsfyT3xXxqKj/K7+jrtfAYIjkFX+4lniPaq5m7NDdUg\nwHdlRB1RZuT/YZZUg6205YVqXOp2ya2N+pyq5NcdbTImH6eMAvnniw6yVkPH\nnvKK/ZL0Nmw+SvJwiL4e1xW4liXufPBQFtJy6ui/gZqsQgLom2KOoNfQazs9\nrKth\r\n=0ZgX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"db17092b19dabd6628edec5bf226f0b6a48e4f95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/rtl":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/shape":"8.0.0-canary.05d5facc2.0","@material/theme":"8.0.0-canary.05d5facc2.0","@material/button":"8.0.0-canary.05d5facc2.0","@material/ripple":"8.0.0-canary.05d5facc2.0","@material/typography":"8.0.0-canary.05d5facc2.0","@material/feature-targeting":"8.0.0-canary.05d5facc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.05d5facc2.0_1603901617560_0.401831310053846","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/banner","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.291b3553d.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6793fbf4e97add257c5912c1ce32b8a8b5e0c08","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.291b3553d.0.tgz","fileCount":41,"integrity":"sha512-B7Y3L3Kz8Dyj8TnaiJFK0I28RqYN2p72XO+KwTDvuid5DgKPM3c+fIJBzAcSGfy29txRtpDX1NBCpKAQiJoQCg==","signatures":[{"sig":"MEYCIQDjO44An81agnu3kFMAhfme/ZDmT8+m/H3ShkjxlSZbRwIhAJmpSVS/uRfyasmY3z0MwsDg6YvoOkmAuKHdqJ9FWjcu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":434555,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma51CRA9TVsSAnZWagAAh4QP/R0tI3S6CFVKALKXGf3L\nDhk2N2Q9SF5u7OcI6Ws1OGW7s22S9Gt3JiU/Ej4csWlxhf3R3yVNRgFFMGTr\nV1VP4th7Lx4bSuEwQvrx5/SsTgmk7+neilIPIPCPpAnyEAPCXzHfABgqHccm\nx+jww/u0wfsiksVoo07JohViB9tO6uP8HWfX6UrZvF2IoolnzQju1hE1w3rB\n1AG6vkebMVpVzCVmC9nJzVf5jgmoXIc2Zxw+JOk+LnNdRiCxnOALUcMDQf2g\nr77B/UDhjlOxcY/+5Vk4MxgugOrIy2ozR2rrKHOF6ospQf5d6ltPGTrrd23G\n3y7m7vNdFsCSeoZuIU/iOMlQJtaNdQDnd7tbJJpZzOzO4DsjsEeXhswycPqS\n86Tyh7bj3DabAAS15yDdFrwqHeioIJmmfA1xADq2TRA96vep547LjjogLaxb\nUI43YoS5eNWt2jEjLYTThjKg29xDmSI151eJd9aUmi2j+B3btT5hfd+mO9zP\nPBYhxBKFHXwvh9Cr9tHZ34+VmDnfQOUB0e15OjqJ8fTAQSvWb3aJVuezfd3z\nY7hNsy/ZPYp64VvKxxAexdhCfDgyOvFBIZJrv/lXgrtA7UDP+VrWsFa9tHm9\nGMXUgnB67Cr34VHkqx/Tl/ef5dWVm5QevsQZ0kPuCQGgdpwko29eMdrGuljL\nLStv\r\n=eHxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bbd141e6c5168a84cdf50ef1302c9f705f0eb283","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/rtl":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/shape":"8.0.0-canary.291b3553d.0","@material/theme":"8.0.0-canary.291b3553d.0","@material/button":"8.0.0-canary.291b3553d.0","@material/ripple":"8.0.0-canary.291b3553d.0","@material/typography":"8.0.0-canary.291b3553d.0","@material/feature-targeting":"8.0.0-canary.291b3553d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.291b3553d.0_1603907189137_0.030671286289607025","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/banner","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.dbc449b09.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d38c6c56e2356565ab005237ec81ca5ce8753019","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.dbc449b09.0.tgz","fileCount":41,"integrity":"sha512-Yo8bgQ+ygKNF4np7EEUILf2Tmwh5kghH2ygxygReg4q03Yx38ZrWUScEXJKgz439tRWi+6Y4kGVMbMu6x9Cnpw==","signatures":[{"sig":"MEQCIDAI7NgV3NqbjA9Wiz2nwW4PtdvrJkU67zhjHbVacLRXAiByKmZTm5S1S8ogkehJj4msf32MG/ofKhoHP5u7iXUc5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437853,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTxCRA9TVsSAnZWagAAoDAP/RvjYCYXGvF2OV4epw7f\nHHk41YvM4FfjvMY/AqQAyMbvFvvxfmt3k+WU2zHKxO/bLJ/DzTynRnbVg2rg\nfuYvOZdnluk+UbG3FLj3a83LMvIIFE53QdQtahvBWWYc+GKzwOyIkdMA1eg/\nkAgx7+6BRsJGuRHJV/qPZRFdDugdXkKRK+gEteSvG/1kvILDDi6MJfoGNvgv\nlSxQqtdWbjy6V+D2+AT2TyjnCGPFFoSJNLyfc242x0NjMqqMBIeKlXuzyv1E\nY33il2heEe7qMq8Ovyh3iMeIXJwIUds/kZZ/adI3osRMnCtOvkPn3DqnXbkk\nA3b7/3ftJJ4IiKWig5UvCkPpOFikG0sjzUyHJlRQ4osyYrfpq8JOyCvYB0w3\nm31aSGE8gV2/v1nAY3+sCiAHYFhA2K4bwqPy4JerH5K1dPBwAfkRNv+7XZ3l\n0nsOI0e4Hz7OfJgo10U63WNp6ne95e4P2LLuieXoSue9EUCRBOh9Gg7KqKZO\nXAUV2v/MDKo5JD0AL49KyDCsGZ6whlzEUqiio33Q4WWX6ZKmG+p3aIyppPGc\nt1nfxBZVylnRUxUQwCaNo9L698usnZnGtJCCEH4hb5TOXlcd/y5+z+Oe72Pk\nqIpZ+722cRdrKB7MAwNpqBdV0LyyOJIPeUzfMYo7/9EjauR/aw5wNZBwpkKY\nEvqp\r\n=vf47\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7888f3b13baccffea8b2b02ef5c25e264ae321e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/rtl":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/shape":"8.0.0-canary.dbc449b09.0","@material/theme":"8.0.0-canary.dbc449b09.0","@material/button":"8.0.0-canary.dbc449b09.0","@material/ripple":"8.0.0-canary.dbc449b09.0","@material/typography":"8.0.0-canary.dbc449b09.0","@material/feature-targeting":"8.0.0-canary.dbc449b09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.dbc449b09.0_1603908848975_0.9327940637024754","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/banner","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.4794b25da.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3281bd8bd7101a61b6e5b6c88f1db51843557f79","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.4794b25da.0.tgz","fileCount":41,"integrity":"sha512-N7+sX2aUj5stC5nbKQ/eY6G5HRecPZCU/IDU13xpc4bLrSWhLE1C82LB4q728GWplAvAc0KHfnUzDJTXTlBz2A==","signatures":[{"sig":"MEQCICvmnXlmMeYj/H4fL9hsd1zZ42SSE4AZ1a7GMncj5JvoAiAMFEODXbb2eaSIPzQxNCuXz3ckKS7W4gIGpibE+tltkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbuWCRA9TVsSAnZWagAAZhcP/iIxvMBmXDAyhFrvAmAO\ntffRZAyKv6o3cvsSNmdaPD1UZo1SHAOIgmSdnNI6HwC4h5bh5zX1cwmluQTn\nTTAdFzciulMsaas6gn0OTGiYNPpHPHPkUf8liWWPRiTz9hzW3KF7URk5RoKn\nj4Vfu41/+iyLm/sKDmpIP9VDhbCmRXtK7miU3phf33fkdm4hILqRh+dEvD7C\ngnDBZ7Usnf+OXgho1IYj4HyQxLfrfeLdHxxqAM++kilIn+E/f5X9HBjHhrQ9\nnRk3SsGKp0FGispi2pOGh8DgJC9gH763MsWvqLR1KjwWXz0sMyLX/icgxRFA\nePUpf7QgedpLenvzWFjLXJUkM4zpw5tT0LoNyHIqhK+k5Xlxj6TkcRJuVHDi\nuCzm+6V+UBjTu8XyLeI0Ka1oLlR177FAm2HQWh2ZMQ/6XbbAIM5hyZ+kqJR3\nCNhXpDd/W4N4dGEILhyGC71L5MYdFkw1pROpPCxVTfte9IgvCxU5VEL5tl+7\ny5A191nKFD3+EyVn3XbrdzmC8cYycwpTwfVgmH0dbLEYw+2kUxO5ZkLM8Mw4\nqU5yLoI46Ty7gZcRGVdpN84BiAG5KbE7jMgWNi507usive0EfkmOPSLTuc34\nA3Qk27gs3iswkeqnyElg8EJPh1/G4TWmZaCD+/tRxbTvMPk8QSA+9kU8pYzZ\nvA2m\r\n=Z+01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0c2eec6be7b76adae9376847043bcde093f59d3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/rtl":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/shape":"8.0.0-canary.4794b25da.0","@material/theme":"8.0.0-canary.4794b25da.0","@material/button":"8.0.0-canary.4794b25da.0","@material/ripple":"8.0.0-canary.4794b25da.0","@material/typography":"8.0.0-canary.4794b25da.0","@material/feature-targeting":"8.0.0-canary.4794b25da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.4794b25da.0_1603910549405_0.8223811168598194","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/banner","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.c61db90a5.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5487cf4603dc68193df13e67a9a472c1a9dce630","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.c61db90a5.0.tgz","fileCount":41,"integrity":"sha512-LdkJy5AL77BFSyiigoSKxrgZAY9ZYSoXOztSrj6tzv+ETe8IcUfIC90GnK73JNbK6gJhv3JnwwY4DcK+PNRBFA==","signatures":[{"sig":"MEYCIQDsxqsbu3lN3f6ZgUwLCQlhaMZIkz+GxtB/Ocz5qqwfYgIhAMGTBUrgkuC6K64Pf/FsFxl0LNXSyA8bcfYao/+S6Lw/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmcAGCRA9TVsSAnZWagAAD1YP/iRUGZAzA6QjkMCZxAIJ\nwKpMfQjLRd/u0jIHKrVMBAyi/NBvJ+qngFufDlIqJzTY2ZqcaVJg4w/WtLfl\nDPImgDb4a7ZkgyVE2E8L54ltcKBxqLGnFJRoRNMUhZ0kHMEMjhOLqZoRph88\nvp2ikfu2ADv9bGpRaeojXdIzlv2JDD+XrFMAuS991ONC2fYh6l8Nrs9jj8wQ\nZuSvpdaCQFE+NscPRw+um0wWkQtEiUkO116jS1PKVOW6fcGBkmA64w5q6Rqx\ncc7+31lj0ncvf90FLP7pX983Cd3SXW1BR5fJSdsUs5BNo6qw/wvNXPGvHiE2\n/W9lvXdTcd3MsiVQ7JF1xF0/5QhCRRIRPGB/QEFSBPqbtSjEgIU9J1PoBtl/\njRJQwhbpX/7IgpamcBB/fjmDM3xuIK+Q0aeHVSLIfvxjc5vAanxnzOicliUo\nVc/rRQIYPombRzIEdIWTRiEYzn5i+dSQ4KA+QWYDl43DOHcxnIJxwE2t5G1X\nkXW+Us9/OQUfgKnbxzu9X1xLgEZkA0N64SfIZ2UwEHa+X+3Z89L8bSqHPg4G\n3zrNuk9/EhivxxLcO1n8jq4wdG1U8po4QOqZePKUREPKzDDTn8sLay1weEZm\nPE5K/EBURmOueJ796zCepHJkm7DVRzxy3/5qDT/fHXK5/KRdbsFCmolKzLfK\nuhBX\r\n=1bPK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"695570eb7478c283510b9174ac7c4911866e0868","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/rtl":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/shape":"8.0.0-canary.c61db90a5.0","@material/theme":"8.0.0-canary.c61db90a5.0","@material/button":"8.0.0-canary.c61db90a5.0","@material/ripple":"8.0.0-canary.c61db90a5.0","@material/typography":"8.0.0-canary.c61db90a5.0","@material/feature-targeting":"8.0.0-canary.c61db90a5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.c61db90a5.0_1603911685825_0.15455294363306238","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/banner","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.6d9648ab2.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4d063357db6245645c5d972866bff84c6628c4af","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.6d9648ab2.0.tgz","fileCount":41,"integrity":"sha512-rQBeEAbdZWBVYT/h3eMYDcX3MgzG0ZE2BHWBAYsRiPITmHeGGilEIF7kFgBUvdDi+zhIj2jm9FVIK1nlp8gLCA==","signatures":[{"sig":"MEUCIQDF5RzMsSECV+0px//Hm13nkg4L81Y14erQY5IHAZTDRQIgRPS9NJ7qMjqy0bdXypCumsXS7uPsSA6uk4gGd8A1aAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyc4CRA9TVsSAnZWagAAmVEP/1mqe1G7xF7naNaFNMUA\nZjUr/njzW7Y/9RHFokjFhExFVbPKKHFUJA3Ne/3SXpfHTEaDL+J8z3K87EJ/\naMsD/KFFCzkuJ8fTkpCgnbgo6KWHT1/nuB2HVvdEkauu8g1ZE9QhkLZVYCCJ\noRxIUbaAJ4Pz8pQjsJBPwD7UcLwchkbnrlrGrfTGISkUmUz6SNTSL/R2xVUl\najKI4eOcUc6zvUxlPg/YIXfaxRpcfDX9TIa6SoKs82Nd7oA5kwbbKIJKHFS6\nBeYFx2ebB6o03+fS8fqz+zkH+Rdsa+rXTXsoME1C0gcVoqKSMilI5SXiVmsz\nnM8PU7adJR3W0+nDh54S944DIZbUCliejmfLEq56WxRnB2xr9d1AjAlFkr7c\nIsPvRQuWFoPP+RbE9Yqamfainkbd82jx4CUwETac6u8HUuh4O3DZhDMJHnfT\nB4yWo8uJSvxpxvFBILhtgVyB/YNwRnnkntJxm4HGoE2XxQ4dW2E2c2MbnfkK\ncD9N+r628m20HmLB7TbWGe3/w9ZV63zEyJyBx4MHG4w9iCdNWa9M5a/Bb7UG\noiKA9L2OuNNkCt0sI+vjICyu45U5bT06KdPJuYHlceighDvB8tFJeaQgfv2e\n1ImULZNPeK8NTk4hsKii55Us0YkeDA2+FbgVgHFUdDxlu85HVDF5k6j9nuyu\njddV\r\n=5CE0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5de6a39d4b70a98beb71cf8243a219f454b11aa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/rtl":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/shape":"8.0.0-canary.6d9648ab2.0","@material/theme":"8.0.0-canary.6d9648ab2.0","@material/button":"8.0.0-canary.6d9648ab2.0","@material/ripple":"8.0.0-canary.6d9648ab2.0","@material/typography":"8.0.0-canary.6d9648ab2.0","@material/feature-targeting":"8.0.0-canary.6d9648ab2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.6d9648ab2.0_1604003639685_0.8198320902968534","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/banner","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.5511c5254.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8367b8d5b5841849218cf8d16a6da80488c2fb73","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.5511c5254.0.tgz","fileCount":41,"integrity":"sha512-42+lWyva6FSGq6tPriiWe9lzEdhakVSjCkL9d4LHTNKGh5lkJ2/vUAVsacSgbcvj6093afp3T8Nw4W02hAX5og==","signatures":[{"sig":"MEQCIEEkRBYz5/l6fwU6t8odylAfMy30NN3mZeBXGNMK/VpnAiBgp5RB7y05R+oZptRNlOIHrtUfAtdZSAI6zbKt4el4Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFT8CRA9TVsSAnZWagAAhRcP/0mfpM9qOOWpFVI8B0AX\nxE+7uoQv17OKQfHdAnShuVTDHaig7jTcc/IaBaUQesIvRUiYyzBJY9hYlo+I\n4k0VzjEXqkPPiIeF38vY02X/zFntmyl5/mp5AzMkkDTqPZ46MgFUQUulKHQr\nr4up25/ximBdebA6A1Yb9pRICqgKjltvyZMqzl3r2GnXlOxpbkrYiQUbdoNi\nRuTv3R+HZOWq7Z8fACnRb+u+4JZCqiWNHd4IY9u8QB5RFNJWJT2S9o2OHF+3\nyj5rT/t+MMfl+DCwAWgZx+QPxc7tg7t890QAuMLp5gs8PDHNleqsUEqpiEbV\ncUZWgj7D7RncCPXx+S6NTbLzhzRcryXmO1gCZftaGgeOcAnU1XX/H1glBIsI\nN6bhLwO/Z17n/Yh0nBQ/2Z14d8SdU0FIfKDwwBrOE2wX+tWRW4EWJZIOc3+c\nwapvRjcEjDHgOgyKUv0lODRKnjFyZNRSEVHWiSuy8xdngxVSEDs6Enx4aZZv\n1xMrYwLoo/qoEuFN7FzAWFM6CD865IHBcwj/Y0z5qi2URrYeUEDplY+kVoj3\nCQxCXHp17OGpibxl6KTa4QxNNciLbIv6jVypIZPFsbWYuICKUD9tM5d1pqUa\nzjBgoMpj5k2eSbvByoSgP+Ik/e28gQJm1z/0c9GdypZA6cX1EfyXKE5SPhmy\nFSj3\r\n=mh9B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e847a627e044cecc475be1f0140e17a4e2a68dbc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/rtl":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/shape":"8.0.0-canary.5511c5254.0","@material/theme":"8.0.0-canary.5511c5254.0","@material/button":"8.0.0-canary.5511c5254.0","@material/ripple":"8.0.0-canary.5511c5254.0","@material/typography":"8.0.0-canary.5511c5254.0","@material/feature-targeting":"8.0.0-canary.5511c5254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.5511c5254.0_1604080891712_0.5623173620352551","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/banner","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0-canary.bd6e302a4.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20491edfea0689e3832386399cd62f674505a3a9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0-canary.bd6e302a4.0.tgz","fileCount":41,"integrity":"sha512-9enFd+Xtvk8/GCBW9vpMvEJkKXol+iCmrvfgIZCrulhIF2ttzdLkYY1kpfNvWscNUW3E17QCDeTepOSacc3SWg==","signatures":[{"sig":"MEQCIFB/7O0eHGUmfvOpclBygK0XKRTGuOqXj0kzDSdmNtC0AiAzuV76gTNikmAcYKPUVJLdmjpJjDL8BH9I1EO7L9bDug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDyGCRA9TVsSAnZWagAAuyQQAJlyQU0iXkWRX/ae+en3\nMWZaZzK+j65/nyjN2IB8syvIaPWxiUf+QDUqR45owjM8wnSZm7mroWrQi3Vs\ncJbIvwBXCMCcgti0nLn+jwjXSQ25Mf7bYlEEntu/UoyPlPi/gwTfYmMg0m9G\n3+HGWCT9lC/wTtDpZxyd+EIzll8SBCsZcrbyBK6CNm/TWuFETjvPOJBtzPaP\ntahtJ4n8CKk013SgLEz4fkUYcbFs0aN6o3n5hGCVtn9HZW+dnFnIxFZ6Fdlj\nIe51ep/f2bnYAuDK8b7tYuc3SKfZOzzb+D3qgGncg6ffAJK3EwzKPQciI40O\nmhndsQWGeVdb4Tnfk2pt7zHtz3eKoImyyGSTPY4GOZAPlZNMW9AKmzIwFMkV\nEZaZIU+DA0uCueorS3QRxG791Ko5NYcSBIpgTzy+f7rGIsZa5IUhhZ1rSRND\ngfDulR6S2ERr8jbtF6WPH75CsHVdyOduVt4jzIsuu68aA/3R3dhNQW54iWwE\nEx7bBLtuqzQuH805lzcPFGbAR0ciQzytj4M50vmD/CUu3eEe6ePKHhoVgt6o\npvqEwhsCt6+w6JT2k2ttVNt8ru9OeNVMZNlLuSEHA3EGtUBuOGPI7oegvJ8D\nH390K78oPoqwTy34lvpgIPeHQWTm1VKg2yfiKheW+17lbnBc4fyu+b57sHC7\nNM/3\r\n=9ZMz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b48f791b92804fe77eeba96f057b1baa89c48e3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/rtl":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/shape":"8.0.0-canary.bd6e302a4.0","@material/theme":"8.0.0-canary.bd6e302a4.0","@material/button":"8.0.0-canary.bd6e302a4.0","@material/ripple":"8.0.0-canary.bd6e302a4.0","@material/typography":"8.0.0-canary.bd6e302a4.0","@material/feature-targeting":"8.0.0-canary.bd6e302a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0-canary.bd6e302a4.0_1604336773885_0.6505015038834856","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/banner","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.d6b5cd418.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a36bf94a7221603caa939a39723c5896415916ac","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.d6b5cd418.0.tgz","fileCount":41,"integrity":"sha512-m1xe2AnlMC/MvQlJY7LHlPHZOcyclz7YHTIaK3Spyz/X8kxIEU8xvhY/he7otoFqPAMgr+0hfUkr3sEKOgBfVw==","signatures":[{"sig":"MEUCIBPYTmYpStGUO8vfw4hkscw6dyG0beHP0GTtw1XtM3heAiEA5hRA8vnObB/yngvFXqx+ftTpe0fCIA4kDL3Zn9Fe1Zg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+hCRA9TVsSAnZWagAAmmEP/1BbFqdSrCmdRQ81jN8S\nC+ufKG6WvSf+i/CWhk3Q8cQq1kSTt/+sfRheef+ghzGA8b1OYqKS3stuT6uH\n/8hzBb0vAqbY1POancc5wcPqAKJwi+/pnRxEnrYTWX+r3ori5OaDOs6Mg5ZI\ndNS9pUFBaKHe4/rx3v4WJCy2Dkr7hXarvGwJ5MjpVIIhB6ypvtHb0KSQeUsy\nHp+YiezuPeGOj/HmMFTzVqVDdTY8oEABdETV3HnUfNlQDtxw+JGLg64404Eo\nJJivWXBX907PYHT/rMjM91rB6ilVuvyZ9sXCCFbHYev8sGb3dFBi8jR4YZqD\nKG2uP31fWyiZgzC3EXITc3uVx+da+qvTIEISrmLhqkU0dIT4OOuiNsr4Yq0Y\nHgD4devGA1m+8b93ZORCHglXn/n7btAg68nMH8iAclv1yyJLhk6PI1m8WIOb\nuWetB/FkSL8aXx+iVN2WHFBd7yP9qHBkc71QpSRBbuh2T7ANDGbH6fXvXcVb\n+bx5v+/AsYggj/acuKDRE9MZvCDc3nzXyW9MwKD4Snsea+nGV1STX1fmFpdA\nTxax3B31GygNTTJBbk2Wk14D1YvJBVgOaw3QbxJjudmxnO5VMt6Re/8r7Z31\nvHOneS60VMQHbADxiE5ql15Zb2ywym2kGUQqGUI8uBJpKEmuHoaf28kJS77v\nQAOm\r\n=/dPC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4fd5e4f9dda92417995fcc822b1d02016642b511","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/rtl":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/shape":"9.0.0-canary.d6b5cd418.0","@material/theme":"9.0.0-canary.d6b5cd418.0","@material/button":"9.0.0-canary.d6b5cd418.0","@material/ripple":"9.0.0-canary.d6b5cd418.0","@material/typography":"9.0.0-canary.d6b5cd418.0","@material/feature-targeting":"9.0.0-canary.d6b5cd418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.d6b5cd418.0_1604358049186_0.9360821328008242","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/banner","version":"8.0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@8.0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3ef0b5758b4de6f151d88cfb5931e4346fe20144","tarball":"https://registry.npmjs.org/@material/banner/-/banner-8.0.0.tgz","fileCount":40,"integrity":"sha512-+Cu577cQmJcsJSGENcEBoHIce3xr+XvVUXrkCGSL5LJ3N5FyxcMlkx6x2qFddAiW0uO69H0URMx3D7zIkequsg==","signatures":[{"sig":"MEQCIFpuLA8eIa9yGm4T1u6HtXKbxIYZ39u+vlJXaNwBPrLmAiBHaUY9+ES5HFbtFua3kIX5REySk2lgON6SftltOziPnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+pCRA9TVsSAnZWagAA1VcP+wXckHmVXpWq2EV1Tl14\nG7UyKScrcWzSk8qfiEJhMYFUk9qNsRIprQGnl7x0rKujKj6/BQEC7DKrdRQy\nMWwB7ESnzYGldgdHi6THRLa1jBKOnfszaVYc1mXXyjSLAv7dTqhAHWuHgcwq\ncn3T86HommwxMVBErkWnK9ROzqO/kukbdj2MRW/hmRk2LhOpBB/lJkl5JfE7\ncsVwwR5e6mTDy2VybJVkOJhIXyWmAV90dTqaiXZB9Q6a/qDWstGuBkWOXa/Q\n9HkHW9aCr+1jzfP/DkIdfg1XuQ3b1fdTVW+56XqHVwFEqtqFyxF4ZWM16Uzr\nVhEpwx3TnC+/dzqQDgpulmCgkKN0swuJBEbnPJTLY5NZkpPhicvtn7mnaTMp\nkTY5Tc0ScwDyLs/QcoNzL6yns82ctyepLBBLCA4Ou8Qx2sgj5Miz/1lw80e+\nDaLa7tMwsLFZmKO+WCyzdL9Z/zrt7b3p7RIssxIiXHkHF5bMEi23+nM1/v5s\nxpqJqk6FGZl78U3szk68j7JapU0nrYtsUi0oTCeXMdTRlQn/+4dDsdPGTvvb\nOdYfVm7+TetiMfx5lZeu8DKylmw80y2LaHD23tWlkZsQAHWthZ2v9yXAwkYM\nCyCuPVwAQBBSIAbsM2zIMowfKEppzIiNfudx8Pjz7TjYPNEtDbgqY0b3JWDs\nq5eW\r\n=QQ4k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","gitHead":"d6b5cd4181d0bf11b598b5ca142343fbc87976b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/rtl":"^8.0.0","@material/base":"^8.0.0","@material/shape":"^8.0.0","@material/theme":"^8.0.0","@material/button":"^8.0.0","@material/ripple":"^8.0.0","@material/typography":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_8.0.0_1604358056859_0.8706684399306972","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/banner","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.fdf9a2634.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"442f64a094bfe706a319e936f74c0628dad86734","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.fdf9a2634.0.tgz","fileCount":41,"integrity":"sha512-ZxiUrchGsC3jryCI95EqMyeyR4DR0S59YwoKnqLIw0dpaY3nvNO5s84b30brBU3WnEE+zLah99S2KyRk3bBV/A==","signatures":[{"sig":"MEYCIQCXKk654O7FZ0k3rPkiAtDaof6o0uXSZRI7tkq3aM52TgIhAK6zEwG6z9gWEU8Ww13wNNaBt9DqOQwuW8OEG3MmG0aP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeZACRA9TVsSAnZWagAAHdoQAJrtn0GoFI8r9MRNMGAg\n2WeQQilR8wFuto5mJIqT7N1VN51URcIO3SzU3IxSUltZbCOzEWw8/iAscN9I\nFEmgAbKop0ghCE8CQD10HG6XRMUYj5IJtuloLI0yW9CY8scfS1NDGMIONygx\nDicOxqIfKsgo1Q5RAjop1Cbr1n798jjgy3q34yKM5iHbkeGUSnNGFs0EOnMJ\nVxC3PZfojNYF8lAPHgcZ7oNMJqPkFoWNdn1dHII8YzMtX/tTdDkuye9sOr8t\nis0HrOe4iVwQtfdjEJA5p+cK+qxuB9OZ39f+3oEy+AJWuvzGQv9phqck8NJQ\nxvLgfCqsQdHO0hafw3ysLGBPLZp6t7YpqoscI8j7Hrs2u/1/3j0uN7ZCWn/O\nGybqIk10N1ydYFqdKnKNqaMK6hXGbYC/kPEG+VDzNvXqbGAeNw2z61ppt5cJ\nLABIJcJtZKxpR/lm2hTnE6gMTTx5qqrwF34ZsSekjltBaZi82/dw172lD2P9\nZKxaFLW1AIFgG37Lpl1aNnyQHZFpcIbZQEaref+Q8ZZoqZ395VZpe/xIIUrT\nixADWevZrg9ZL+HBxUbsoxAv/9nxR4/bPhlLdfUQHH+Jvo9X1tmpPgScrFU/\nv/WK635OOE9bl2hIK56x9eoYXcAk3rdNc1b/YAXc4pLH3N+IP//bTD8u8YQo\nqcq6\r\n=br0+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7d38b3b1a677a24d709697b68fb697f1367fb5d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/rtl":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/shape":"9.0.0-canary.fdf9a2634.0","@material/theme":"9.0.0-canary.fdf9a2634.0","@material/button":"9.0.0-canary.fdf9a2634.0","@material/ripple":"9.0.0-canary.fdf9a2634.0","@material/typography":"9.0.0-canary.fdf9a2634.0","@material/feature-targeting":"9.0.0-canary.fdf9a2634.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.fdf9a2634.0_1604445760269_0.6781039762755765","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/banner","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.4a86f30a0.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c33579663e164cb8e4e6859e52992e24535af217","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.4a86f30a0.0.tgz","fileCount":41,"integrity":"sha512-E6kzSLDnJ7JTLpvbCjiCvrpg+J5FICQN3TbXeLFf2bn+1UGtGM/gIWbiOKNbtVrQwbxkSQDfC1gXphUIAwxusQ==","signatures":[{"sig":"MEQCIC3u8R8I4CXLVYk/3iApxuPZQuZ3iEiPeN8KWRvXLlsdAiBTZ1Gaw6/V8uxMXnMHd83mH2RMI5j484q/6Y4H3eWf5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoefYCRA9TVsSAnZWagAAk9IP/R1hGn6jZgiekm0BTmiL\nRlWq3NKASo5OioWuq7jaMUVGSKDKAkES5bYWHLi0CXw9gz37T3jqqRUBWRNo\n2JDWs0k/is2W3dEWx24xWmnh718UC6sEURV9tXglCBfb29gppPDlG3VMw8zW\nh+CJeasxvXUfJcYWtChMMgite/GhzLXTSU5Z3IeguojbsoRjMWNOTpgOeNvS\nNoj7XNKvpG5apNCWtXOgi2Lhy3CaelqPrQFYjui4UIGs//Hl4r9cu1xqCJLs\nteG64EhgxdVSDSvmz9p3C+C7srLlGbRnR6SDexgk2YTtYDoU9MG7Kij0FFD4\nLtox8tULqoq8H9+KNIRi58dKN3Rcgm/wDgu00+8mY5lfYT0Awq4GXRFDz22w\nYZ1/AJbb7AbMtqOsf7sL2kGQ+qxfEh/tdV++gnEZxy8Px8iH+zCkZg3mr/ZO\nZqXHpS7L8Ga21UzNr3ogVqN6IHHtQOL35nTJa+HVMqar1xlGfAjUzTfnGQK6\nbUMG3QBekHT5S0zncpY7sV+mO2g+J+txwrHkNzOi81ohtg8liWr+GN748lXx\nsTFBWbQHG7wJehIcEl4P979Yk0bz0JwW8EzrPvpu/rPbmJMhL8ZYwzBq6dy/\nJ/24q2ah5lHt+un9xbe1w9LnJbc9ct2vepT9+Wkn451CzZahJkFdTUXhqj24\n8iJ/\r\n=pI7D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ae1cc15cda11f90ef629a1f536e69a9648db906a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/rtl":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/shape":"9.0.0-canary.4a86f30a0.0","@material/theme":"9.0.0-canary.4a86f30a0.0","@material/button":"9.0.0-canary.4a86f30a0.0","@material/ripple":"9.0.0-canary.4a86f30a0.0","@material/typography":"9.0.0-canary.4a86f30a0.0","@material/feature-targeting":"9.0.0-canary.4a86f30a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.4a86f30a0.0_1604446168447_0.12610415969508848","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/banner","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.fc8b045f1.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00c5fd2284cfd9367fa129defe070fd49298f351","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.fc8b045f1.0.tgz","fileCount":41,"integrity":"sha512-phOGGM0K3tN4zbVD5c52v/dExA8lhVWsnrksutpPx12DFopcaKeYtnjrdWWDkyHdhACEGfNY404evchNS6VyTw==","signatures":[{"sig":"MEUCIQDn/ZPbRVe5Dz3cnPaFEM3dgJlCLOok1lbQUiadzwFbhAIgIlC+IrdzV77BdaCTEI2RRvpDGXfs38oUZnQ9baseUKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":440918,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoen2CRA9TVsSAnZWagAAczwP/0bFvBGf1vZnSusRVb27\n6xzOuhhjgZAJ0YiPdlzlr2sH0kTtFiYOQlRVKvz86cgi+1J/Id5n64tAQvQX\nxEBCO0OzliSXuaf1dsH731szrO466TJkPKab499JshxKIiy4Q+TLMZrBIUvP\nUbXnlILNtxXX6SxWr6FwFZAjypnGa6vind5RE56BhDRVyRXZlk+MAMevlx9V\nm5s5gIHWz2MZEYxhcU6MAc50M4MI6pzDL9KXP5mAxQzYwR/T5c9r/1w+an7q\no9rnHbh+tr8bz7IoH10RLJaqbDv8EoGDV/KlEv0w1R0nVW9+lhBwCPm2VP58\nw9PJY3NmiJaBMboPeveDtCFCdJy/Hal83Viy0DcR4oTykdB/hmR68fN+kOhd\nAI7AII9mVG0GW/DqErbLtvk5/mu8pfhPvS2ybfiIM2jhFLdxhgDA+fZyrWEs\n7SNKEBU9uQkBVrUfxnGc1AlyR1Ij/N3fw3yEB+Hd9VSDIyY3FU14hKw8UbCL\n8ujNlDmC5NnnRbCeixguv1OPi6QGVE64ITUMnvz+Ixurewv2ShdMgeYWLRl6\n+LoTqNHT4Yi0Tp8Xbs2UDSnE7yw8PbRgXQ/xI/XxjF0HPqAW03Bjd2YPTu9M\nK+VHFBDe+xVznwv7R8vQ5/YmXxKnRCGzy0S+NINjbTMLGrGuNoGVI+VreQOm\nrr80\r\n=ngM2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7df7659dcee84f0af6a1e7d8617abb4056acceb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/rtl":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/shape":"9.0.0-canary.fc8b045f1.0","@material/theme":"9.0.0-canary.fc8b045f1.0","@material/button":"9.0.0-canary.fc8b045f1.0","@material/ripple":"9.0.0-canary.fc8b045f1.0","@material/typography":"9.0.0-canary.fc8b045f1.0","@material/feature-targeting":"9.0.0-canary.fc8b045f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.fc8b045f1.0_1604446709566_0.414109454740214","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/banner","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.a0b2db26b.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e05a16a90b6ba40aec8c95424a44483620420387","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.a0b2db26b.0.tgz","fileCount":41,"integrity":"sha512-oNDpJ5QZFhpEMxFU7cgYZNNrY/MMZwQgqYUtK04eujYA7KmYPb4oddVZapO0Uh1Ah4EWmjkLCf9GW+LsIk2MHg==","signatures":[{"sig":"MEYCIQC0YljQtv1njc19KGysZa29nBpi2j1rqhpxquaISBdjJQIhALCfPifHLc0y3MwMU4V86uL8vbNwbbp6pa0FP8M+bvgy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444537,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofF8CRA9TVsSAnZWagAATw4P/jbuUPUnjLPQN2LrPRI1\ne//6Skb1K6qfOsE312okFkHCwOqW/fyPJEpz8+vs0uU3H8cR2aifGkXIFmmT\nV0TxBw3SJ0mipohkb8NZef4yiytmfZmxsvcMnlGDEQca7BvNsW5Ywxg9Htl3\nUESm1ZLIOTTLJ/Arzvu+qxSitR0ep5/GKJOuHL317o0UKv6hqEP0YERnPFkw\nmMvVq/vWX7wCwAg2wKBDOCAAcJ40XDJG50ZawJljr17MIkqfcXvfkJNmaw/P\nUTBImH6dNRYgHF1ZvNZwC5U7e8SCriok2uww5QNWdLgSrZu/V50cwsu8FIa/\n2XjGttXNXJz7TIAdkiz8cyQ1T339q4tabd9/xER9PLvXyDNLg1KB2geAXgr/\n2kJecOPUdWVgfEEtiirdA7aVLkq7T14Er6rvC6BN6OU9fnEFI29q3o3Z5+92\n8n/ChD+TCKfXj7WpP3FCu1fYrpT+nTDVLmNy/JZxRl1PjS8Mpwg5R/1gC1oN\nXw8Vc4HWQqdOw2UfUj5fM+6mI1vQJIeWCHA3iHheiVx1MZmuhVLjr8uVejcv\n9yDfaLGIagroVaTE+BXklXWDBjpWBtFYRHawm7yFygdpLxI6+5rvv/UAGV04\nt+EMKEKeXtpoJSgvavtJVGhkZXRhrg1HL4GTMbjL/siPlD25P8ICMdOyLIeY\n1ggO\r\n=AsIM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"885abc8ece3b0c3cab58996fab25be733f65b5c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/rtl":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/shape":"9.0.0-canary.a0b2db26b.0","@material/theme":"9.0.0-canary.a0b2db26b.0","@material/button":"9.0.0-canary.a0b2db26b.0","@material/ripple":"9.0.0-canary.a0b2db26b.0","@material/typography":"9.0.0-canary.a0b2db26b.0","@material/feature-targeting":"9.0.0-canary.a0b2db26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.a0b2db26b.0_1604448636006_0.20606955633213841","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/banner","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.419e03572.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0537228e56d957919a5784e8fcbfd270e29517f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.419e03572.0.tgz","fileCount":41,"integrity":"sha512-RSRxzbN3esidD8fhONKTTEpRP6+PyXpUGhIjMPkcmWaC25u9vUNmPcDtIXgjgrQtGpoIh1WXVgdhZUGBHlLD8A==","signatures":[{"sig":"MEQCIDT91OspdreH/jSjrCwA9mbbWQ+Isrh31NmA9qylARwUAiAi/SLn7tLMVS9s71B6CDM1zsdu4vKt5RNRNgDTHHK8cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUeCRA9TVsSAnZWagAAJHcP/3yiM0FGe1ZlX/oiJa67\ngqIHzRQ6o2caC0UqpqUAquAU7brXQsRESD+MgGwjFXTzboS88MABYnVeTFxZ\nWZs5rfDUaMFfCFlT/mdOCxw0FqcKCud/a/3ZVwGCoyonTw5u9DKr2tsOCvZs\nCy2Kn7NnTZBTKcI48JKCVz7h4uzLMqdSd6Jzv++0lky2Ctb95CpN0ZUYEmVQ\nNarMduIJoQYtZWMrubnbCf48FEzp+2abCUdS4lBjepJ+TTKahL5OEi7JZF1R\nHoCEq/UUhHe1Zb+UzGbQ/KatzK6JMLJw4smt0TVlMigPTE7pmP9QAxwRKbIZ\nhCgsIwD/D6HN8x/bXOAzCskUXBljGleNl99GMEB/R8qjrHnN49buCBm2oTnc\n4fxxokWVCrKXZa3kuYU2fLBKUG+xhiwmM5UBzlhDdGNh8IMfSJixGcVPyWEs\n/oEsRrn6OIkDz/+ULjd/j/VZ7PtmSs2l8ZFyaGrgZ88pI25EOtcuoB351f3Z\nOjfEMA35gJiLQNQi4B0evV0J+vQMA0YNwUTDbm/cMQuDHdG9aEopfMzNfrKP\nV+wpFriIOqBnKTUE60KJIm7Zngr4LOU8qXEhn/x4793D99yNjmCYqDw1Xq6g\nj8N2OENr60IEHYXzMP+/SUWX8cVlPULvPIN7ROP92pQgO7k8pOtjRM59WapN\nmB/W\r\n=lxL/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c9528e0a61f88c4fa2a5bcc6a5e406ccf027d7d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/rtl":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/shape":"9.0.0-canary.419e03572.0","@material/theme":"9.0.0-canary.419e03572.0","@material/button":"9.0.0-canary.419e03572.0","@material/ripple":"9.0.0-canary.419e03572.0","@material/typography":"9.0.0-canary.419e03572.0","@material/feature-targeting":"9.0.0-canary.419e03572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.419e03572.0_1604453662502_0.9516705627089979","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/banner","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.a432ad542.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66af4ca530171c971a3b15879cfd0728e7f05742","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.a432ad542.0.tgz","fileCount":41,"integrity":"sha512-qFN4Y1ZbIkwjBQBBxUn1BWW1VoDNSFMtEq32MrgFoa6PgNHNM2QFvJ7L3s5cm7euAEyiVB5qyglYjFZ9GTJiCg==","signatures":[{"sig":"MEUCIQCjFyGPbOffmQ1T2DNWiOQfVoocBGAibAGTsszFvpBYqAIgeCRKlXWKhI8aqZaiNXyOEild/EI4mxGogbTzVP+LKVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKsbCRA9TVsSAnZWagAA+JMP/0UxuEi0bA16TKDo5bJv\npstCGxXmy++pzyne6M2RlkvM4000RC3DbX/jMMAjiD4hFSpmE7AJaO8I0Sw4\n5PJ7MNcls6J45NWJL8pObtXSo7XKv43TD+a7ksOjwHEeB3EdIrOsX6IT/9Ed\n5iEZrKvIKMQYcZWxc3V7D1kjqGeFg0poE6GXTryvQN096/ds/c2fu2zp98sn\nCKYtj2D27Wq6nVN9rAo3RjxpdQD+SImsx9VcQSlTt7tASboKd+FUL+bj0Efw\nxIvpGKCh+E4ZEw1ATU+8vq3h9oxDBHclV1mSf2C+N8zkLDy/B707VagPSQ8o\num00QXrpw2wsFjsPCF1rMMOo+sz4Yfg7IBmfzuMkDcjRauMeAIep1kEYdMXP\nJo3ieh8u/mz4T3H81rHMnpgB4AIXlx4/KUi83Bep66k6OqJc5ezK92SbtcO8\nKp3UtWqIeFTOjqtupKnAEY0X9dIRRA/xZWOBwbWxdf8lLvebFtfySF2QSkKV\nTSKVs6tMiiz0mAFAYvmMvUkkgR4oUl0nL+HtaCJQX20Je2U/ucm+rNsrLB8s\noLUgAKiFgEl8+eQzldHhaJSfG1y9/1b6OuB+wt5HXpl6fqHPYi/9Q4OaFPze\njwULgIrNE7NwJMbEi3+o9eT9WzxCXR7fYFNwvUwFAu0j0fVlJZhL4p5WtrqW\nt7fw\r\n=KU1F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b873a7878b871d2ced45e7f04055b3d4ef0c7af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/rtl":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/shape":"9.0.0-canary.a432ad542.0","@material/theme":"9.0.0-canary.a432ad542.0","@material/button":"9.0.0-canary.a432ad542.0","@material/ripple":"9.0.0-canary.a432ad542.0","@material/typography":"9.0.0-canary.a432ad542.0","@material/feature-targeting":"9.0.0-canary.a432ad542.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.a432ad542.0_1604627226965_0.5312115773464665","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/banner","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.e2e8aef1e.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"effef9d9c6cbef1e25988c2c46dc824d93a5381f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":41,"integrity":"sha512-hftDE1byhogWhSMp2iDs4cdgAGF+MaMGTpt3PcbH9wZwd2ak0Hv/2uvn/BAsoqFaRNK0gCnDq6S1AKdBoyivug==","signatures":[{"sig":"MEUCIQC3tvig5aI/PbNu+M7d75pIZyc6CsxR+30q2Wgwm1ACgAIgKgU0SnC8dDq0n261KxfgVUvuYwWT2CAJHsoP789zBbM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+vCRA9TVsSAnZWagAARTgQAIxdRqeDD1Iv3MNaIj4h\nbKIlGISXVccseYLvN162IZ/ucxkxezPKbElz+sznEH/+ysbZ6Khub25m8Z4E\nX5eHHxitBYV3MrUCkgIwVlnjOgPgMi2/27Pgb5e05XokL6BDEY/LrKZ+EfaA\nubu8Qikj4pyDMKIuFsDk+qUhzPAyBpf+uG5XILHzKzhC3bdpkm3aUzVtTS1H\nSu5XxUQAmDeCL7n3riWBSjvJtbQ4oKaReoUlW78fodGfWQd/qa7xP/wu/roN\nUGQ6Bqgb2SSdnWnTtlndZqRpzI4zRnkYtdXNVa0rINj6aEhItjMHBCckXlJJ\nvdvXQNnlEX0hd9BZnYN63cfroeied9PfI2/ExITrsvB/8fCp1QIZ5z4SU4Y/\nJgC/H92C8s8m5VrXEymrKtSddtPNV9+vGcp8BxsHfpfizXDN2yV2VY/hVQI/\nr/qZVdvJRGEN3abpicIZrVlqwEk+i+q7d3QPnEik2+40b/ZvsfenvlmjwKg2\n4osOPaqinprVrA7Lz08MO1ddnz4+Tcc1FqP+8kGbRU6EVNnFbt+/6DAC2jxq\naqDvPq9y4N3aGcPsBh1NEG/aF7Cm0BmLa5OQ9GJVuEsJLubo1fkIBLodxCVJ\nxvSfMeJGAq4s4UwBhqqteaV6nGkWnYfJTuC/zDSeDNlcua9+Q1itliN2FtfZ\nP3GI\r\n=UaKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"59b208be2f946b47ab6905d82c0135e81316f2a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/rtl":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/shape":"9.0.0-canary.e2e8aef1e.0","@material/theme":"9.0.0-canary.e2e8aef1e.0","@material/button":"9.0.0-canary.e2e8aef1e.0","@material/ripple":"9.0.0-canary.e2e8aef1e.0","@material/typography":"9.0.0-canary.e2e8aef1e.0","@material/feature-targeting":"9.0.0-canary.e2e8aef1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.e2e8aef1e.0_1604628398654_0.5548050387484114","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/banner","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.ec6b68b34.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"247391c24c761786e44ef14b636823d580678966","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.ec6b68b34.0.tgz","fileCount":41,"integrity":"sha512-Rgj5rOd2EF+wcWkf2yD0cLcgYSZD7MxMfflVkIkfZZbVN/L+vvEzIsUYAncBoK7r/Xl9EtsyF+MohPXh1TXtmA==","signatures":[{"sig":"MEYCIQDXkWOwjBHC8V/o11WJ1sB2R7x0J5Pjh0J+Py3B8E8vKQIhAIqfcfqNOsTeqbOVKCxqz1zSV816k5JrHbkth5lkFnuJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZytCRA9TVsSAnZWagAAYZYP/3blNAUr4HB/RcKUnHec\n2T8QJY7qtXkmBSzcycfTbQENmBvJX/cZzaxvWsw2JlaxhualGb2Vg06vgP39\na3F+HTY3tSObb5tLKlSyDtpmXeDpLO74J3fHLm/WWvJCfL7MYi1kvuNf9ewY\no1WRnnBJh4+qETGR1Zsai49juaZGqgnBFB1JzDlH7SH4LwHoarH21qGjzImB\n/F2+P03ixXWFuk8Hx5LxU1+lHewZ2b1P/KLACaFA7tF6nf3PltpHtRv0o2me\ngcI4d0sgSQND6GXB9hxf36SeJOeQvMGQZhhGm2FoZzneYwo1vmPdOOizo3ZI\nU+OxRMLdOIAxSde5v6xQRmAXG53sqibD9uvDcO1oCzbYZZhxc46wdaRyfZnt\nRilnVZE71jFTWOl/tH6nFTbY6011REltuLQpUvTnvQxErBZXOSxddfvmPqw0\nPVfoeUH4L9Vv+4742xPKn75R++rQMpSDcXmgJGAHo6DIEiZqO2LwklWgGZbR\n+yoAey5NK1KpSjgGSBqhH1GQulKTePRE29ha+MxElVP/arKW31vBQGsIRWW2\nGvcgsvPr7LLGAmdQ+pCkIX1Cv4QypsJUjlHNi4XjI0ShvtF+8plO5RVjsmNc\n7V2i6KnKgk3iHD1P1bDOhkDTbgFjWp/QXZZ9dcqzsWveuDCrkB163Mlp661P\nxmsy\r\n=SYQ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a5005840630991931dd5d6aed79aa4986773a5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/rtl":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/shape":"9.0.0-canary.ec6b68b34.0","@material/theme":"9.0.0-canary.ec6b68b34.0","@material/button":"9.0.0-canary.ec6b68b34.0","@material/ripple":"9.0.0-canary.ec6b68b34.0","@material/typography":"9.0.0-canary.ec6b68b34.0","@material/feature-targeting":"9.0.0-canary.ec6b68b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.ec6b68b34.0_1604689068711_0.49820930322782697","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/banner","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.b39094d14.0","maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6395da135bc57303c8a9278e4a639c079bddf38","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.b39094d14.0.tgz","fileCount":41,"integrity":"sha512-Zbpp8+rWqS464xO0rnd91i8fG1zyFAVejB5t2pDWuVp97B3RRCHBeEzqAMYpwsUrWNHbAVoQ/VZqVZJbodiJcQ==","signatures":[{"sig":"MEUCIQDK1AmfGaLUHuBJhLuLvOSn8iB7ajLYfXtY8sRKItwaMAIgQbN1RW9L5rsM4P19X/jvPBVPCXZQ8JgAFulEr8p7dLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb1aCRA9TVsSAnZWagAAg/8P/36vKxd6ov0Q3PZ2veNH\nCfdhAmaHEaSVkauxa6mO47i8Kxo9yKINCgdlT1q3XNQ2u0i/e4S30INKKZsb\n2X8K1llnQd2n+cYIFoVPdcRmz0qo2oLLYU7KxFx2H8p7hFfZEONgmZjtOV41\njRRzVeu3BhQNbFphWrDhyTqGLEz1AMBR45LC8Hdvd6HXSnATdIJdwzDsvSEC\nI3CwEvTVvayp/6ll5UQRE94UsSg3Z9uL64Ds3fGJLjXgMdy5WcSrn67mp+3m\nCyTSGA5TB+dEwf8uH+OFDw8XpQqBTgGkjPlraEIcNZMdmyJV2fRTQcR+0vHS\nZPKfXxxFwNhWi4Rn0WL2WxGsx4mkbR5A5dPEqAmlhCho2oNIa2yngiXZDATS\ne77uDLwr4uP8LNxk4gfHxhy+CAC+T741ziNCnHAJbO2mJa2WQEDsMyVHphoX\nu06X4bD38ldILkLKMtGRtegjDuEMhgR6kk4DoY4dTzUKCZo5dEGl4WqYFmwQ\n+4XXGz6T6g4C0hT3MD/uKVKdpTFB23q23G0Wbn2weLuLGcex/XIQyHMRCIhN\n6W43FNlhWJm91rlxuUrvBC2/7vfYO0wz4TmiMo8hrtWdkt8YuTtR1Qwyc3iZ\nGO/ky7VtBvgvMEa60jxlBL15PiBvTcarv1QsnyPAVuXo3kUvo4dZu5vvyBU2\nHmSO\r\n=vAso\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f8c5ef7d8cee2d0a63421ee4afe42e4e9260cd47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/rtl":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/shape":"9.0.0-canary.b39094d14.0","@material/theme":"9.0.0-canary.b39094d14.0","@material/button":"9.0.0-canary.b39094d14.0","@material/ripple":"9.0.0-canary.b39094d14.0","@material/typography":"9.0.0-canary.b39094d14.0","@material/feature-targeting":"9.0.0-canary.b39094d14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.b39094d14.0_1604697433941_0.35431511848045893","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/banner","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.8648b8258.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd4994bd34a6d7d878eaa1e0f273603cf9463628","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.8648b8258.0.tgz","fileCount":41,"integrity":"sha512-jQ9RM3dzPYTrYXaR2uiOy27VxFEPrkAk7PixrzjJo1UOpjy5FapvRoYLZQ7oBWIcc2oTJX6oXYsJ/qv0N52Sxw==","signatures":[{"sig":"MEUCIF1yY3Lny4Mdbr3ks7ow3eTmwVT/4cqZC88A/mIXA9AJAiEAs7y1F+xsv/Nh+vOuzvBEt/M8tx50yO91DPt+4PyyRh4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJvCRA9TVsSAnZWagAAOxwQAJbKQzrqkGqHxB3ghSxg\njGN8ctCl1JdR+bui3og21/BXKJGA0yav1SfjQ61E6XffmDQy/WoBMUDoRdVb\np+ZfkTmizfvEnJGZZO2PCnSccEnWO0P1Y91tIANHP4k+tkVVWKAdRUHEzzvh\nnNB7P4eQ4U0Zrk2DN0vhomAiEqioC+kMSVdNls0RCZGun1Yg0XaaJE+yZlyQ\nQ9zla3azNyK3jHPceL/yZERMYlfIDMz8eNcC2C9eYRJ3E/BYKdTS1YcPaJbb\n36YRzLYyuLdZThNfmSQzL67YZKSWv7cwLtclh/EeoxQGPhwYD++kMccpJ8IY\njMOyLCNjdKBWApE14AVDqXQxW7SUQvHYA4qxaMfRtM79yOuoRDM4lujNlwKR\nhEB/sK1rq0RRgDuvo6W8z5/w1FLWLrBlKxTMUGHjNdEofbk9TRX9UgnNqBKb\nEs4lNHY3wM1wwwx1xiosAMGBsLr/jXW8mqtw81nXkYWt6tSDAxx2wXg+TetE\nVSurDdJydpJApDv4eVH6caoZINWeA1Hmg/GFzBbVv5eth1K79MnBWhFFJ6AF\nq0E3dXA6QphI7di97FbY/5N4jkSgWB8lstmIzgplHv7K0H82A9qU1/Zn26m1\ns503JwLaR6voqPM2bxEFMaC7mrN9xkJ1zY6TKShAFHXCLPNMpHGDNwh+s2Uq\nw1Ua\r\n=UlJC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d98de60dd3d91dc14a84abb664678188ae936030","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/rtl":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/shape":"9.0.0-canary.8648b8258.0","@material/theme":"9.0.0-canary.8648b8258.0","@material/button":"9.0.0-canary.8648b8258.0","@material/ripple":"9.0.0-canary.8648b8258.0","@material/typography":"9.0.0-canary.8648b8258.0","@material/feature-targeting":"9.0.0-canary.8648b8258.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.8648b8258.0_1605177967045_0.6387338279522907","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/banner","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.240c5f74f.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"42602d977d5751f709ff0aba7f98e510f6f9241d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.240c5f74f.0.tgz","fileCount":41,"integrity":"sha512-n/j4fSPVqe8M+01jstuv9kdloXy0H5+BW2Ze8h0IVFVJDS+thOIhsx3MxOmr/nkSZKQfVt2fAnoetMG+YJZujA==","signatures":[{"sig":"MEMCIBZ6dySQCPAaCqNVYQP2aECzO/yz5LNn9bRaovtZ+VD4Ah9Rs3lTG+YpWwCWmdQ4oKnefdAbTK6LApv2YoR2ou5U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZltCRA9TVsSAnZWagAACccP/012vWdfVbEwuSq41QSu\nSCfZ2AcqLcDCmw3arc7XWIStiOqFrGWQJ2H5TTM5nH3XLWnmEB2+h5HI1r2b\nAvJ3jkzivph9zrT76d9fUOhlWqJzviXEWSXFzdx7b3himp7ttCUZLXRGgZhH\n9wCk8xQCLyEwVfpr8EBuiq59/ZR65MMotorA/MJJtbv+q8UH3n+rH8Vr/s1c\ndRFrItFpmLcqU6yZL3850AyzthC9y06CX1gynpzY/r3Cgmx0mmv5Kj/4Je58\nga+OIIOtC34aLD2+pCrt88ppIrWir/m3LPRFJHn4io5zp4t9ouDj6k5PLRCn\nTA2g7nYpT20UXPsolTaWxwMRs3QiNyq3PzxObdo1aNiOunG2qQ4rLGmfRUWj\nOEh4ew7T2uiZ212jEq/EL+IDHA3ZQJrf47IPGPFfmmYeCPfJZFnxzE/Qvhry\nE+Map8vCuMvrPY4ewzadz8d91rFLVopT/8yOMKieabZo+1dnl0blhZXkX2uJ\nAGawrtBOGBBoKTFHrK6FBfwUcGmucgv2vIBzHGpQLyjRMb8glemYLUF4haQR\nHsoP4eUJwYDLO9AEDWYZVjX1CC+2ADAIJtjp+PLCWNW9tMDX3K1xvbN4PBWJ\nvdhesDSi0/chxrw1INpJpkMErDPOHeqe617H5ZdpANOhIcld245qLonV6KNf\n4+1o\r\n=wVvf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"33b77622681b24909d892ec906f608e75f5e9809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/rtl":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/shape":"9.0.0-canary.240c5f74f.0","@material/theme":"9.0.0-canary.240c5f74f.0","@material/button":"9.0.0-canary.240c5f74f.0","@material/ripple":"9.0.0-canary.240c5f74f.0","@material/typography":"9.0.0-canary.240c5f74f.0","@material/feature-targeting":"9.0.0-canary.240c5f74f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.240c5f74f.0_1605212525226_0.8617290097376311","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/banner","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.6cf6ba4f4.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e1184ff574faea024e4ff4f1d656c861651b8e5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":41,"integrity":"sha512-77difwUJhRpBZOUgZYGM08vasvIW9WFUgvKXXgZPmDbe4TTjf1izUNTH1HEepKPunOSqamZdmdrNFN4nt4S3IQ==","signatures":[{"sig":"MEUCIQCiGuv5aoYKALMXJlCtoifFLga5KReYljO7tlNKZFr/nQIgTiilhyIPtim98EvG+O87ifwwRIOPJtcU5QQ0ciWdIx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfssomCRA9TVsSAnZWagAAk6MP/juqN/qtO+D0h5I+hypt\nvFirWhEQ9llXMfPhWD0XXNq3Ia2ZDZpemkWGTlkqYlA9pWfe0IhtjERwaEJ5\n00KL9Tg1JNJsxbAhGkumOLAw9DkE7c0BO9nhfba0C2C2t81QiFA3X46dokIH\nPTFtJ/lDCs7Tm2vRmRnPIuzQFq9sOaFrunRBqq2OO7P2eUSd/SCtMhJe4jxS\n0grqBonS2wwnL+4PP76TBJGwfh8jzdW7QacahPl+WhEJRAnXTf1hC7MYVAeN\nYsIhdsIShMaok0DLNC01inrjCXdmcjfA1bWeS1PcX7rmajUzXAEQCOJGsfzA\nq2dlCVM1CbP4vLZJ2SsUQLo4zFHvZWmVn6Coyj4Dgqxxnw4UsL6DhPLSbw+m\nal+ZHf78o4uA+b64fbPy2/w4i/JrPsDLUvUwwHxY15sWnwhevJml9SeUpzGz\nMsYq3YwcbTbaFlLHvW3UKDzp1RgVGKhpFc/SvcrGmAiZYSVNuenDVIeQwr68\nUEqIpHIy6pPTP4j/avDwH4mPLHmDkprlU6nedRdofZ73ds8jOod5ovf1yaK9\n6WfbO8V9/6V9nnMXdWIQ0wvDPi0IjvxJhUyQImSJmjhw8wPS4Hxqqx4QypW4\nfTV9eIcC2gkAW9U7IspgZji8CdTnDPxPqVk/79NdTjTYaJdahH47PzOS1/MW\nDNzE\r\n=zL/I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d2d4890ac5812ec797b5f621137f4e8a077c3c0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/rtl":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/shape":"9.0.0-canary.6cf6ba4f4.0","@material/theme":"9.0.0-canary.6cf6ba4f4.0","@material/button":"9.0.0-canary.6cf6ba4f4.0","@material/ripple":"9.0.0-canary.6cf6ba4f4.0","@material/typography":"9.0.0-canary.6cf6ba4f4.0","@material/feature-targeting":"9.0.0-canary.6cf6ba4f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.6cf6ba4f4.0_1605552678523_0.9763356855680339","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/banner","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.07f3e01b7.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22795801804678bb0f7758cffd79979fdcf82d25","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.07f3e01b7.0.tgz","fileCount":41,"integrity":"sha512-4TKLRyIvCbvI6rtZQW37DYMULa+BR/aBkpOPx88ACmJDFVXAMvWTxiP1tpX7fwkku0PJ1ybfk4lPLQTYSeJmSA==","signatures":[{"sig":"MEUCIQCLmLgZx9nM10s92RCJF0T/dfPKD3dqNit46KVK+/YhEAIgFENFPrfVtMymSYTWT7tT+E9NOvgA6ElxMG2U0DSbJo4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNXCRA9TVsSAnZWagAAPSkP/0ls4thoUiHyC9lgwC8T\nY0P9qU2qqz2ypZmoPu04l4qHtCRDeoZhMyDD3dk1qWJpTZa66QY7D7Kda+eI\nEZeq4C0RBwtucWBn1eXsssbUEWsHHvKiGwKs9rOJoAWQ8hAtrlLgrYYQMRLA\nNM3UT+EXZjEsMNo0j+gFKLZKtpfCccQWpYw4ttiqvmU3dFrG4eDBNxoqsBaA\nummMPrO8OV+m7wk6nqd3loIFGOGHJufpIeHBKLW2GNq6ydKo+qALUz0u0vwp\nAVj5/TwShJXywJIssieeYEUNoxTB+WgUENypa4zmBwOzx6MrE6+B1x/HgdC1\nTr5Mvja/xu8Xlx1dA5D8gomyaAjnVQ6kelJSQuu306BKoEFU1AOvYvxtgJrm\nvZaWtfBJOU1oXLrdLXTKNt6/Wd2p7lgj/xoHXIbjXbLXu9jpoV6wHDRl0W5W\ntyiYGYpC67hDiGmli2k0S8HBNzMr3nrBdlqVqNcRVrYHAK+2As3h6h8x2WWA\nTIo5Tq48EwqKRAGJw15ixZTCsRCt5eygKPhS5LdbrDtfefKJp1265IgY+1nD\nSCMs0rAavHwP9VjIK5EbISccc2SBHKlEd8/At20iybvWzW9qVeYdOD5kgJ4w\nqp79CTYSQli252NkLDIqnSNi3ynpyV3ITqNn/Ou7gRio2im9RYM8DZANfdi/\nHY5J\r\n=f03R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"39f1e043d0db0c6881d84b3d7b54423f64cc8c0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/rtl":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/shape":"9.0.0-canary.07f3e01b7.0","@material/theme":"9.0.0-canary.07f3e01b7.0","@material/button":"9.0.0-canary.07f3e01b7.0","@material/ripple":"9.0.0-canary.07f3e01b7.0","@material/typography":"9.0.0-canary.07f3e01b7.0","@material/feature-targeting":"9.0.0-canary.07f3e01b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.07f3e01b7.0_1605563223394_0.045763558189192866","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/banner","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.23491cf85.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38025e61c06234eb1cac8adcf4527068ca3a1e37","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.23491cf85.0.tgz","fileCount":41,"integrity":"sha512-xn1hUwt/In7Q7h8D57WHwrFtdg5xvDXrXR9PEri9JK5gp3qmSiNwzKvs2pktsCC9g7emimTJt4K8HL2iwljfSg==","signatures":[{"sig":"MEQCIHSohMcQOu2egE87Zp4GtvmmHZDxAmcNOOlMHUluT0AaAiAUalatrSzaQwsV1FP6NlvO8ZXJtzJA0BJUO3vy3T1oZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbaCRA9TVsSAnZWagAASDsP/RZTi3PGRz1hdsnClUkZ\nG94DW80+BIpk45sQHBfKR9Xv1VTkIJMutitug9Xx9OOT5uRTO4/EXUY5diA3\nbLLRM5/u9HVMkhzI/MzjbTFBDu3uS1t75baXCwzL4bb2hHUQE89qFFX+S+E/\n9Mmal3atv1yhJJH4yoJq9EM0awZWNTozXj8I0RLS2i4X3ImK0WZIENYzJSOL\nhzXo99ngXHCUtkQkqX/jZrF2wVLlENKxx3VHMkSl60Fd9WeAcECjJVeAuW0K\ni7KO3yLdceBlUbRUXFvnwu1PJg9K3ShWlwiCZ6/sjy3dvgaBDnRSEIIrAMwi\nR+zloxZnScs8o+r6sm2X+Z7WbzXj+N+Ltf82GZeUY7D2XtCAJG+5YXaEqiVK\niQTgELH5lulLSBbMktuBc5/Ng52h/QHNxZY94ksvwSUnpvY+tEzez+1BuUCI\nggZR7QD6wqS5yN6dGqFkB1lu5ekXuYjaYvIOTDpva4YDuaOaZ2ruTcVGb+zY\na0q55x7i/RFDu63tbC61x3u4M7MEn2j8JwDOsBgokqA7GP4H1NKQsq1HTNbR\nV5ag554bX1NeCEz5FtMVNS/6AUZ/JwDV0r0kKiDdrOtm7ahAemdyOVuTgKkD\nop6fyGGQc/gQ2XpLW2taSXYFlF8Rvdmq6E9sBZ3RNPoCGLFp7zdaWPm/d4G7\nejpv\r\n=eF7e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cc2535ba5f66f73426d236b8a85291d7395ce589","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/rtl":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/shape":"9.0.0-canary.23491cf85.0","@material/theme":"9.0.0-canary.23491cf85.0","@material/button":"9.0.0-canary.23491cf85.0","@material/ripple":"9.0.0-canary.23491cf85.0","@material/typography":"9.0.0-canary.23491cf85.0","@material/feature-targeting":"9.0.0-canary.23491cf85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.23491cf85.0_1605572313653_0.8939338587768233","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/banner","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.b659d4fc3.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52a137a291faf393abfc433e5f7db372620121c8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.b659d4fc3.0.tgz","fileCount":41,"integrity":"sha512-tcF7Qyd9IxK8En6L2cqApC2gJQeeKeNJb4fET4rhTR5O4vfG4aAJR8rKVuoY7UPCYLGVdHTGRiaOobjYf53/qw==","signatures":[{"sig":"MEYCIQDlMLUzMr3ioLBsvEUCXLvxqEBmTBtlZQOM9yuZyC8qpgIhAJjhYqGUZBqTTMWxYuoa0FR1NqT7bhv3DzpsJmqVeHsk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxiuCRA9TVsSAnZWagAAm7sP/in+NpSovKkY4UVDvALk\n/3OaduxgQuLU3tFQJA8kde6YACOkdeovM5UkjUwZGtMF4t3cXDPDj+Zym1e2\n2IA9HagEKuzICOzi9a1T3D1HpUgr4XWxFLOpMAWSkjoqfCKo7p42dPB8INnN\nODC65FciinzfVvGY+Zc/M+/OOIiAniL9P5YAkUjlkGdWLshZMiMs2B/Wjnwo\neHpn5HApir+f5E9uDMcb6L5hrSPed1XtDYt7fw7LPKmBq7xvuWsiJjpq/KN/\nu2Z8MNwncGbScxx7ayPXjN7owgydybEnGA6awZPu+gB52ntbySUyjnwrybf1\n05IVSxL/dU114bOjUvHeziTBvn+4Ex1vWjBluIwS85ad7q8ndlfw8hOgMjTO\na+IcJFsVZwxgSGYBjayj3QhY6nHTHULZhhEd+sTR3hveQ3zGzVAGIzAs817V\n7G5qF/YPDKUBqgUXjwjOSYUrggxNgNX1qui1RHFgwypEAsw0o9fqJJPudjsG\n4baDO4UuKzy4ARlr2aZ82ZSIOR1wFkAvG9YMAFoqd6exNarZKVh253eJqn8k\nCQj81yzzLu484afR+m2UQna+SWqY8EpLkRYFr33BxDuchZWvISNYrrFbu3bA\nHtf1wgoBraNIR+PI7YYpIg95SbgsUYme+hVoInffuAYKs6wq3QxggaaHnii7\nM6j6\r\n=44Eh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"da948526208886bd05bb015d249db8d19d4b3f05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/rtl":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/shape":"9.0.0-canary.b659d4fc3.0","@material/theme":"9.0.0-canary.b659d4fc3.0","@material/button":"9.0.0-canary.b659d4fc3.0","@material/ripple":"9.0.0-canary.b659d4fc3.0","@material/typography":"9.0.0-canary.b659d4fc3.0","@material/feature-targeting":"9.0.0-canary.b659d4fc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.b659d4fc3.0_1605572781723_0.9115030932767614","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/banner","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.d8a3aed67.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7528db0d14bf6271246b0b96dc85e3711b6aec94","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.d8a3aed67.0.tgz","fileCount":41,"integrity":"sha512-++UM9WLkWKz69oXYJmWnAdrCjktBZx3Oa/6FVDJL47Miod/wM2phVf/v40AQplgCHAQvHBIDdoDV73zc/CWpAQ==","signatures":[{"sig":"MEUCIQCyNEO3HK1WAZWue4R29/QqUrlNfJtR1Slk/lgTqN1GrAIgVdD5uSla+j93cWPn3/psmIvk3GZZA8Z7eo8h0NBE9ao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+wrCRA9TVsSAnZWagAA1hoQAJ4EPPRXaTh2v8G2sxhQ\nxlRnY+16dj8YYbfPlNfS6HD7Cnf2+sz0Y8w8VM6M1SGDjBfrV3kxtS6bSwdP\nO3LTjNBaLKeMd/zQNCCJPrJZPRorOVvp5OeqHpotst9/2sfiZUx75ks0nXjS\nFLfcZ/W7gYg2o445XguKC06T1Hn9bhaEMoGjsiIulLzuigbghx3qzbJatt/a\nOUvayHKE/7zTFve9TUY9tEuFCfNCgkKw64BGfU2Qs5X1kCOywW5EuPRLrNqn\nE1EUPPoRi+pDEVM2tJsqg4YXKWxvLYvSTZUlZi2aDe4/RkWpUUwoq8ebOU73\nLWViaRl2pcwyTMaVH3kkkcSdmEkwEp/fWNwrMG2AFucQx8ZXSonjeX/o8rpe\n8SokPAoKHbmFfQsZHbP7tFt3hp5h06lK8i2Ms0vV7cwpIxjD83ooxO8tVa3B\n8Ro/c93QWdkjf6tYgb2lLlqd4qjiNMDzNP5Flw3uGW/kenBiRGhnxXEOAc43\nmgVmxYr3T4vIJBCFcQrlwW7PQ4+6GpENC1zSkyyfAQAKSZT/9OSwkDLdBI6h\nYupyOaHpQZvGpYX8z6juqK8/aQWbIkzf07QACmp3I6P6MrmsupY8oYI/XQIe\nZzAAwmBhn3IN2ElzZabcemfaazYHfYhGuSB2q1OUs83CCbcKg7e8N9zfkFp/\ng/pC\r\n=d72K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e70765503f122fcb3d748ffd41882655d9d4035e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/rtl":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/shape":"9.0.0-canary.d8a3aed67.0","@material/theme":"9.0.0-canary.d8a3aed67.0","@material/button":"9.0.0-canary.d8a3aed67.0","@material/ripple":"9.0.0-canary.d8a3aed67.0","@material/typography":"9.0.0-canary.d8a3aed67.0","@material/feature-targeting":"9.0.0-canary.d8a3aed67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.d8a3aed67.0_1605626923075_0.33828598419956535","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/banner","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.482ff9091.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd5f8a8762c3c3a913c9abae53de38a711d939a8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.482ff9091.0.tgz","fileCount":41,"integrity":"sha512-tfmxm1m6AQzNKLfH9kQJL/cpZQtD6jG2R9S+2xmBg6ChPTlVXwL3eiEidRhmPXI5OApidZkpVGsUjKZ0B07XrA==","signatures":[{"sig":"MEYCIQCrRK5WOYsABOWtm90wOiF6M6gkokFjtUklNiawvoPV1AIhANfWwoqP1Kq1G2c1OJ+CFyllo58kZnuimz4GOctAr+cv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA99CRA9TVsSAnZWagAAJ6IP/2RychldH2GAPkbdZNE5\nbN1yBbP23sAYlDPjG4/mZPT5Yfphed2EJHS9ScLqI4juTpTO1iDza0dL+2GT\nVNny2UKWKSzOk2eo/vsUuIrrqPk5xwid94AJSAzu73619r70MDC93ehJKKJs\nFm3sr3rip+nQ3WT/t/T4tM9273S4pKlVGqHqsGkOxK6wzJJw0VwA/4l/oRLF\nmM6zf5qcJioan5CEhwcHi9EOOXO/Qvh5kCmPwsEEYKT1iIWkDi4pH0b2zO11\ngs9dCE0M4dbHAzELkMaEOWUNhf1Zgv6k3Lki2AVH8UeTIIoZVIt9doN4WDDy\nB2+SO9JxgsAaHHUsdTrMLKQ68PgfUAwj6W2wE9LqbVHxCwyGLBHNhzl9nZxt\nWSwuBxVlo65tamopVeKlcKFHURzg7AcJgE2kLA/E208gJHVLjVFFgC4UpA12\nF4qL44VzgAio4gjvKY8A73MvcbvgkMMhykBN3R3AwkClkdzJXDPJZvoEv4de\nkZLfxibXMbChka23JeaWyt/Up5xbJ66wW0Ft+THQ6qQWYnMclABZKFku5OhV\nmi6PnmSyLhZXlFr8fvRXt0VNyeQLSyfESOIJdYdJk2oaKirVzofvhmmYNqLq\nPgD1oRusESBvFWc4kDF1k1ulyURkYd9eroTYQzwRbIPMkWS5jgSGM2Kx9xdQ\nuxzo\r\n=MdGJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5b4b306ef0e5d1d3654252169bb9fb9d75490dc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/rtl":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/shape":"9.0.0-canary.482ff9091.0","@material/theme":"9.0.0-canary.482ff9091.0","@material/button":"9.0.0-canary.482ff9091.0","@material/ripple":"9.0.0-canary.482ff9091.0","@material/typography":"9.0.0-canary.482ff9091.0","@material/feature-targeting":"9.0.0-canary.482ff9091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.482ff9091.0_1605635965103_0.759275885601199","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/banner","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.99cfb6bd5.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"93afc033992677b1aff78c66db996b8176ba39da","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":41,"integrity":"sha512-8ufpI9o2u5vieNaopvRG5wqbiveNl3ViA9rhLOowOTkgb0y6KdAO7JwWyp6GfyyOqPYeHhXCQFK4NWCXozUXQg==","signatures":[{"sig":"MEUCIQCDSr1nT3iEeXS2FJRSEsh44BC5sn7Lb4HVNqDyuekJNgIgfk4dIeRkxbBZyldZDt6U79dgzc/WFz0LLtPkAyH+tco=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWu+CRA9TVsSAnZWagAAjWMP/1tkd01JHn3JckMwSHwa\nH5UdN0owLnKEpM3qggMzIzu5Q4WyVHuU9ttz9ZYAY95dOz3TCdljwuDCGp59\nnz67avoj/6NyZ8LUJ5/NEeuSskpREw7jA/EvxC7oGahgel9HF9Z6wisjU/Zn\nj9bTTlcarsNxQw2+k2BJVukZk9h3LcqLJQQ+iIVLh8RbFwaCKKM8JhlCCMbZ\n82noFl5gxBibfzWuzEwEz5GU6puP91/sSCDQzrJob9uTyTrOt+dudNw3YuAX\n3+PWNTnZRV9LQtmCWZaG2HfI+lfkgEDLLqrqNt0QuELWOt6pXb8RNDsNNJtU\n4lVVYh2tMjIQErGj/YGu8IsF+R8OrwAoYE2blu9JxFjErqb37DJn5d7vpyAP\n4aJVGXk+l6s1ABMCmbmYqdnkIwVA1eLvQHT2SsO7aRJunLGanQMHOtPq4ckC\n2YdDIQB1hj42hZPRfv8xlYX6F5DuVEaVq/DOTXBelpzOgqSpcbJhgLLL+TU8\nBwJnjYTXuBY3zmTijL1tH56RUDT4cKGnZmVJxE4uPwJ5/0eAbbRRZzqrLkcJ\nWwewAC0+TfvtS66vg9QetdQ339gm1qlBfuxvB08S5umE5XWRMiKWuas8f+Eq\nW4ohiCWO9nkiEYo/N3+u9nRJwflq+C5dk/EipHbqAw02/uLFGbf9LlpH/fjO\nBEBj\r\n=fN5X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"97b5b434f189a370838c9b867dfe1b766ae52fde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/rtl":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/shape":"9.0.0-canary.99cfb6bd5.0","@material/theme":"9.0.0-canary.99cfb6bd5.0","@material/button":"9.0.0-canary.99cfb6bd5.0","@material/ripple":"9.0.0-canary.99cfb6bd5.0","@material/typography":"9.0.0-canary.99cfb6bd5.0","@material/feature-targeting":"9.0.0-canary.99cfb6bd5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.99cfb6bd5.0_1605725117753_0.2944673277966101","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/banner","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.b98d15d90.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdfc1e7944a64d2992eb02aeae6ed44ae14e7398","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.b98d15d90.0.tgz","fileCount":41,"integrity":"sha512-wCuHT+jXkbt7bE7Rr7Tv5lgP2P9zZFf/Wbrr/QimVjGjNdAkOmiQ8xEjpFLVP4yHOgm45Veyiy68Y6JfdKvX0Q==","signatures":[{"sig":"MEYCIQC4ZIG4qVJr81rVyoHzlXYZFC7FSyShXEw3xRMfc5dnNAIhAOtW58kyRdXclDP2u7TzmEouQDaZwzIiFGAEu40brtKT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHVCRA9TVsSAnZWagAArT0P/3CbzYvt74DvZkZiRxyD\nW1+0HUqVGdcIBWOGhUsHV6u1jZB5bwW6jkZFNG8vydcrw2fh6SgnwESQjWyl\nGGd2l/8P+2ihCtxDuGG5D4ewoh8jNxeCVcuaZo7jB5xolL+B5zWKFsHrrUUn\nLVLqzqhBO5wRqQTxXEqT79a3DE9uT8GI8xqc+HGs/NwX35FZH+dSRz7j3nRi\nTQvl7ay8KCsPkCiAO8crHQkuJlXymPtPnQzU09SiEbW3YqAletl2G0dfaUKM\n88BS5G4DvOfWBAhoWvnOqjFOPdMsTZhqLJcARoIBBNNrb1HDucHsZH7UNNxc\n2k3oGQvM7mcY87UuSCXrscyEetrrCZ6TCdsGe24S8FSo/uGiUyx8+sf+jqYR\nL95zASLJjCPIk8/VAaGcFlLI4ULI21MXV8cpFpqnZu7AedPr7l3rg+iiNkVi\nGihhJrWJaCKQvfSIUyRUraDbBMHo6v3H9kR2uzAJt2p2CQAPK6hdNyQFxYIp\nWJsxiTjKRNhqIkR3e4OCZseqzXXuZurXt+2MguBeWdkDQd6YVgmwQ5OJBHjD\nQ2JfuCydd5s+3Nw0gMbNuQ2tu51IGH0Fiahp5cG3C/Uh0pLedW86mInA+wld\naHE4wk4rZ6JJ0rlEWFvv6egv67waeQTXCf1DeMO+1VaXfcWxsvLY/CF8+NeS\nsjOF\r\n=X7Zy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"abbd2c5bad9fedd634d7a0c98bb8e4a8b0bf3439","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/rtl":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/shape":"9.0.0-canary.b98d15d90.0","@material/theme":"9.0.0-canary.b98d15d90.0","@material/button":"9.0.0-canary.b98d15d90.0","@material/ripple":"9.0.0-canary.b98d15d90.0","@material/typography":"9.0.0-canary.b98d15d90.0","@material/feature-targeting":"9.0.0-canary.b98d15d90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.b98d15d90.0_1605738964716_0.33503741971164813","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/banner","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.30c11bfc2.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfe242bc111f94d09897561566ef72a10e5ed988","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.30c11bfc2.0.tgz","fileCount":41,"integrity":"sha512-2Wceau6XjbEJ4QwhAA0HVsON/iSe2nSP8FDbRvW9JS/niUk89TvnmM+YboCAJR0T9uUyU5toabW39G1LMcUtnA==","signatures":[{"sig":"MEYCIQCXlQSrQo5OucuWlcf8ANuN6QyzP2fDU8FhYJq+O0G3TwIhAOBkwI2OUh/IysCl12yOXro978LFkmoWjAJFZAWR4ixi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcn/CRA9TVsSAnZWagAA7oIP/3tSSWh6Fds2KKfInVto\nW9to91ftTlXQWbeETzdD5K83TzoOi1TPl854fbFHG4YB3tWr6olEoEf4l1YI\nTqMzv4xBgAb2Uxwq7E2Jo0gSe2e74VmES5SvKR2mXPBU8pQCDbV3uaF3SBCh\nCp4IyvTcSIqpTHNxuwmoqVszebK5TFOkrVH5gR4SXpB2kXe6j7VITZmlr3dB\n5mXvr3rQpB83peC2zEJL2GeIIPJ+p9eXnhNuT6GnKIMTL/qEGVgf4SU7613q\nNwjiTRivZLPmreQDW4B5dDfIw4o/29Jamho9MpfNQu16u3L7Ky6/CttGb9A7\nkToG+FIpBHkezQ2FwE5GKtJggsiyHbB3xStlmRL0jKn0RbjKFsy2BEn+DeWm\nRCOUEc2vmMgMsXBCyCyZM4w/TNgpielgXZCR2Cnz8bNyRg5zj5F9wNt+nrTK\nlPHNz2VD/Y2J2kgGuT8GkTeXIk8OMYzxySJOKosnuwSxhP6bq0QAGLtrZc8r\ngUMQ5BcDrDYO8Bk978gdJPZo3OhDvpMcoc7f7JP25i3mtXBtxHNyp/qcOhwx\ni2f/TdKfvjyneCU0D/txyXZ1NkSgYhT0kREcKYSAwXwBP+oU768DQ/r/K+/j\n9sohlu2TANF+AaBCMeMegr0lUl4AMLpx5Wr90iP7rug7l8qgUY1bEs640/hV\nHyZW\r\n=z9ny\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bde404a844a4528a097cb2c90d03c4ce8bba9d74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/rtl":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/shape":"9.0.0-canary.30c11bfc2.0","@material/theme":"9.0.0-canary.30c11bfc2.0","@material/button":"9.0.0-canary.30c11bfc2.0","@material/ripple":"9.0.0-canary.30c11bfc2.0","@material/typography":"9.0.0-canary.30c11bfc2.0","@material/feature-targeting":"9.0.0-canary.30c11bfc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.30c11bfc2.0_1605749246487_0.7206894713037022","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/banner","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.1b731d51b.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c924b2f66e560413f2d0befb44baa291d31249b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.1b731d51b.0.tgz","fileCount":41,"integrity":"sha512-We5Lz6JRjYiIgj8C3NEN/Azftc9gEsQs14XGbHfpIcT+WUKISde5EZgGgOVWPUBR1Rc86wkAI4YtgFly/H1qpw==","signatures":[{"sig":"MEYCIQCJchMXi90Jtuh6J6KJymNO53bSOT/Ojer/4Ffr21T7UgIhAOs+N+jWBDQ9rWfCuIfmcSRZMgfO8F/jX5gzzN6ydlNs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8yCRA9TVsSAnZWagAAtL8P/iLkhNnA+n0InI4ZzjI3\nMVVzAuRUqnBePGLhMFOUSvCjnUzK3Xetp5V55oGGWsWbCfUpWF1cPCik9iCR\nyD7rynFL74Z3bVmKtJgIz5Yv1lR3hiLSsIPcbV1wSASq+VyzITAkNpoVi3L3\npSYmYEpeQI3UMTCirKs8wzcucHDjh1K8SWWpl97aoSpZh9DGHXNjxPKUeF1L\nbrjsZ0Qc7m0A3y4VWtHIrqZE3EiHNBBLO3O2CBdxg6Pa7en7OMMBaCqRxlQK\n2Fvux/LzXyZ9WJ9ZJGFpR6nsCvbP+QBxKiO7dqed4LdzCtTZNNGPcMH+2JDQ\nAiSHrAw31vW9tT/daM30v9UL9ThehuDnmk8+/XQpy+mbA5K6r835tnu7b59D\ns+e6dDZJ/p2MCzjT/IEnXgjhklWPOEzSde9NEXC4a+jjuHFITwgqBL9ltAt5\nQ6OMMdVeCQKxj2XcATvWhKEZmMExw+mDV03R8hFBsr3ZtMPlvpkPblkf77EP\n0oNLtUTeA/dzjKIR4Wb/KXa0whimBRIWOygMZe7Fj211F5We6vv3ROCtdC0G\nPza6DXXYSi/hPVuRKRDyA4C8sJtRpbI57fto3Ip6rHZFsTqDGNCZ12Gq27Bi\nUgTN3mjMkaTN0EwrDdDF2A8NNKIIIql9YK64R8Y/tqTJbZG62hz4QPcFnRl0\nHJHG\r\n=7cXp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"22fd036a79b754fbad742c64041cedbac73ce410","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/rtl":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/shape":"9.0.0-canary.1b731d51b.0","@material/theme":"9.0.0-canary.1b731d51b.0","@material/button":"9.0.0-canary.1b731d51b.0","@material/ripple":"9.0.0-canary.1b731d51b.0","@material/typography":"9.0.0-canary.1b731d51b.0","@material/feature-targeting":"9.0.0-canary.1b731d51b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.1b731d51b.0_1605812018257_0.48883410921577153","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/banner","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.4ae94ff78.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1951654dffa50cef3f2d61d9a60676164d881ec0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.4ae94ff78.0.tgz","fileCount":41,"integrity":"sha512-35r7r+7xQXMoMcJCAZ9Q+MBakjGqBJQ8cKPHMTAuQol1fvQGVDL6Jn86DRxUbj0kIhDQ1AiaLVYZFr20vQleKA==","signatures":[{"sig":"MEQCIEHwJ3ga5UkFzZ/mfgAYeaIPuzSngc7hSOy4HlhYMrGtAiA5UcgGuX4kRc8uexVhH/FQ5iAznhehKZ23v5sE87+v2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/fCRA9TVsSAnZWagAAlaUP/Rm3vQA5RYLc5ZsoiKNM\nLNg4wWr26Oh+xvK9F5aIhBh7McmzOWktCiVqtYC2EGNndnJzY8cV0zqa6u0x\nKXcU0AQZZa8/xunOPc9WEJz/9K+S8XVkLDxJ8FAe7j+OEe8hqx1/z7TtEw3M\nkG4KHpyPdqHjkMi6cdInsyGzOEc2f3tBNVG/hbIYmLktV+3WXxItDCEUtlLu\nIJx0WqJA/z/CeOXeEXNPO6nXgSiFpT0QIXWkhQwONEptJWwfxa+HphkatQTn\nWaeMKAkENpJswNb8++p6fWvZvtfzmBpdRWPbBgjnZEizBfhqcJq/iTvRNY5I\n2AMYhSm1teXDyheAnXh6EVkJmu8WocBtslJrt8WjWxQU4ojbM8TtChnKrcPF\nqLrsWqrHwliEqGCCSLoVXxPzIlcRCSqwfGamzXTw1o9OI3UbUnfqVskO7smW\nCFB94tEUzYZ/JHgdSCK0TfoHbUSkPf+dSAKvKOaCIUxgvJVf7JmmIFyXO/OB\nBJzq7iq8u/u7F5FMUB7RmQkWwSMLxsmRcQOjOzGGeIiLYaJOO+/MDbcXif9M\nsz6WSXYrIy7jp5YJgLQX5diqAtDIP7BjSYysqMHvuG7pGsR7YzMqezG77Qeb\neeGW2Prnir4m//h7K34olP/qCbIdNwgc6bs1e4ApKs5/bzf90bdYtv7QbdV0\nzQSL\r\n=2uff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"34c69ebecd44026cff9ea0d681fc2be3de9900b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/rtl":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/shape":"9.0.0-canary.4ae94ff78.0","@material/theme":"9.0.0-canary.4ae94ff78.0","@material/button":"9.0.0-canary.4ae94ff78.0","@material/ripple":"9.0.0-canary.4ae94ff78.0","@material/typography":"9.0.0-canary.4ae94ff78.0","@material/feature-targeting":"9.0.0-canary.4ae94ff78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.4ae94ff78.0_1605812191551_0.9166758486126392","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/banner","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.7ad038e1d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59b700c484e707abfc9433b8ab0aaf3a20b4a01a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.7ad038e1d.0.tgz","fileCount":41,"integrity":"sha512-jQI6ZoUkFDYc+q7NVsVq02Y7vgBuL5qNd5mbYP9rFjbr2T0pn5NAmPU6SPxqGQ/EUpHVMhQPFAo0fMRjy1aJWQ==","signatures":[{"sig":"MEYCIQCaC1wSkz91oKHWjghRupCPDxQOKk0uBTI1Ix0qIt1fRwIhAK6Y4lYKbqEA5bQLtxZE4J6OiXSq5nAGPbNo/Muiul54","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsVMCRA9TVsSAnZWagAAhj4QAJkIGtY7JxQ0M8FRAuhC\n1BD4xxJsi5sgi3btvb2kIV34XlWmH3iHQnx6vzASn7avHrzl2VEzL0mSgRu5\nlwdodIK9Lvg6CDNBoQ1XLytyge+brBs04led01tEdqLXn53A+d5lgalzaV7M\n7jDW9U9Tvs6rilxbiV4jIyJ6Rvav14+/B2T4NVRQoZbCZNWpAuHzKNjLfEMJ\nk98Z3uL+pkokqbHf24p+K2NXU2GzWOM5JvB7yOhiJq0oCH9sObn6/wt1ZgLA\nEDxZqryMu7VPaBe2Yv33ZwnSlJOAxUsasgYiljtJUirWFWd0B8jF23L/iO/+\n8VrgjsbWTAybuwL8ms22NUMKqjadhMczt3UG9enqyJBHwTzLq82L7HODljKe\nKOkFBo86YeDMWLvy1NDvWBvrF+S/X6PtyEhUkrCuq/MxRLWl7ZwVSQOlx6+S\nGsHYDAPF+kdYT/bDXWle8t1hNQeCRQ/Y5WjEQq8lP3/nVFvacsPQkzg9KozE\np3B04eErG8Q9/kFxJR9W/r3JEbRZKrh3qwegyfiI7F3+d/CcIF7BWO+xA5O3\nyz3WwTiF5hdbsRlFxc1h/8px/THZJ6bcDQd6JK8SGO8zkrf6AwsjmelONesM\n0DTiM1yTfuBQ0KL90PyIwDS79W3BX9bIZqv5/1LtZrSVrC5C8nDImuLPzuvP\nTA8B\r\n=L3Jm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ae5e88e00f948f916eeb8f578dc80b6aa2084116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/rtl":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/shape":"9.0.0-canary.7ad038e1d.0","@material/theme":"9.0.0-canary.7ad038e1d.0","@material/button":"9.0.0-canary.7ad038e1d.0","@material/ripple":"9.0.0-canary.7ad038e1d.0","@material/typography":"9.0.0-canary.7ad038e1d.0","@material/feature-targeting":"9.0.0-canary.7ad038e1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.7ad038e1d.0_1605813580117_0.8743671498306653","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/banner","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.a41527604.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a1c7e62b65e415780126e92a43a14c67e3c309e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.a41527604.0.tgz","fileCount":41,"integrity":"sha512-dPxFHqPw1yKtCcL6VN4gvIcdhwLfFow+YnCmm+vNeES0Ct779IY14T92cb3QkebcMvO81CXHmwDy7wSQ3+WrGw==","signatures":[{"sig":"MEUCIAQQ/TZla3HrJ2tpLDh4yxM8ysOVfvqSrgslDFaIBCRmAiEAktUB3+oZM9hPAow/um11rrdFeOsL6KiOLlzJfZVuWXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts9OCRA9TVsSAnZWagAAqM8QAKIiRM+L+JfiJDuHe3fF\ngLqxuWrKp/DUlF1M0cn8GCX0bo9+BBdo0fVtbQsJqu9UPmQ20sENVEMj0xjD\no/kH3JDoFSWeqPt2UsrYx7PnO6PU2lWQrxvdvgtslWkOj7c6TvFMpbrkZX+/\npA2ye7BaRM8/athpK81IRfYL8B+KadYwwX0fvAfyGAJzpqxCqo25/7rQICGv\nGKEuLxjoPcsFuhcED4XfSzrXtKFi3PF7i4k7CjG56m9tR76H58M19644gRpZ\nObwObv6SKmRAryN2vTidYkIOFSgR78MuV8dy7LvJy13LWDA68wTQGskLRUnN\n228eocFU5fycnv46CQP+7KwdwXovgQszahyVhpbk6ziqWNYBMkH0AWF86pRR\nY+ZaqEmvmV8TVon2SBA+D2FX4X6ZnGShdR8O0I+APXdmMd7Aq18z68fRS/Sx\nYfQnjZ7Gntpm7cQUBHmXz9pVT6zqAaq/uPRXIIfMLxSivcYTX4Y+/u8F33/s\nOc5Ft700mWoJRzbh2LcuybOpJfGdp4iZ0T5PuLpnyK70HWDKkfIA+TdxMrj8\nkIiM9sMuhgt2eTBy0lhwHjoYYcoQY7XTLDLC8yZiIJWEHQ8xU05NBsz3Om1X\nz73wOkKj+GEhm144XGloedPSf8Y3W0h3Y4iNrXbWoIvn/BI3enLLbwKyxyBX\nAT8H\r\n=Z6N4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4419897c2a5ae382f471047e38ac619bef815058","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/rtl":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/shape":"9.0.0-canary.a41527604.0","@material/theme":"9.0.0-canary.a41527604.0","@material/button":"9.0.0-canary.a41527604.0","@material/ripple":"9.0.0-canary.a41527604.0","@material/typography":"9.0.0-canary.a41527604.0","@material/feature-targeting":"9.0.0-canary.a41527604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.a41527604.0_1605816141260_0.5788370828434837","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/banner","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.7b0e2b377.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0079bcb32db510f195cfff181da99fb6112991f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.7b0e2b377.0.tgz","fileCount":41,"integrity":"sha512-cpUX6nz7vnGmGVhQtu+dp9L2jwwtiOBiHUDy8NWRt3Yx1HEoTr2tewWCYOjgftVPSoF3I0WG9L75oRQf3rW+ag==","signatures":[{"sig":"MEYCIQC2+L55UD1gH555VDw8l/lrsh96IVVtLhUSn4+maVkwFQIhALEZaxbdKK/Ky3KnNTnkTG7zRYs9OSRv02qXR1DHLlid","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEnNCRA9TVsSAnZWagAAMmAQAIjr8wKa9OE+5R7JB5Sl\nl7NcZvjw/krtPypwTIeRJhvX40vpAzw0zgYdtobcNerdq47l/d6ODrwgRM/f\nSKe2xBALQXh81Fbe4zJp5TZIDDtYVD2fkhwRBuncep4zQk+wcdjGaNFIrzGK\nG90tL9xrpF1taW2sUvFcRckathoEaysyRGvNSscAsPkxgN3409xHOMb+2QKK\nd+RZ9ibiMkjKNFWNWKMezZpoETYGql/okDw7QzdlzW+l5K2+6pnxEEkwfBO6\n9nevgZUtzqiQEOo4IHaF0Hy96yLRJLRnnx+Te76NYLONDWHRat7WIQ+3+MCF\nFeh3ZDTIW4bfmdI3ydFkBebU2R1DtQFqpcbvjZKTjZEc71JyxVect+vhOcUX\ntF1PJZnMHN6fIlzTd44mS8TBWJuMcjhY3pNMVxBXQsqIyITc0P2dGRMiOjF0\n8Gcxh92la8LG1es/kv6irbgD7Q613bemyde6i4JGpHfUgZolxw0Qpw2W4Z3h\nLleJ1RQ0c0ujhBNl5YGV4xGXYNMyfOw1wiK5Pyj6g04XvtOzqtMKHrUkbUZq\nZEXdETeeM1CRsHIiA23dCRZiC7qk3y08Fhp0yR54e8QdwQhsOFpEaic3ad/z\nj17378kWNL28HK+mWw+sKrv1oLp7jye5H5COAuFE2v02fD/Mg/XiL3qCDjua\ncKVu\r\n=j2R9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"51086f360a63319c786c7b166e515a34aa76c112","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/rtl":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/shape":"9.0.0-canary.7b0e2b377.0","@material/theme":"9.0.0-canary.7b0e2b377.0","@material/button":"9.0.0-canary.7b0e2b377.0","@material/ripple":"9.0.0-canary.7b0e2b377.0","@material/typography":"9.0.0-canary.7b0e2b377.0","@material/feature-targeting":"9.0.0-canary.7b0e2b377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.7b0e2b377.0_1605913036623_0.8335800875383532","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/banner","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.c927a5d05.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d11ade8f440ab4c9ecf8b56320e8fe982558f7f8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.c927a5d05.0.tgz","fileCount":41,"integrity":"sha512-4OIy0ZRovcEr5yB6psx3/jxy4wBPyhLTWieOV+YfKkrIaXjiGq+V0DNIZ4Ko/ItgAEPP8oiF2L4yY0AGvB85vg==","signatures":[{"sig":"MEYCIQDu1sODA8+qnHs5UvuuJvdh7C8jgmzjJSqXU9417jBBCAIhAPEpAglJbmkSgWEuxTXBfigbpcIajNm+E0CRor2LPFap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBImCRA9TVsSAnZWagAAyJ4P/10Vv89q31p3GMH5WqSm\neFLEhYZoQL+Azatu2yFTtfmZB5TPh4BaNJEDOXQ2QjuZIibrXUKZfAvXch30\n74nXQQLQaRUZoP2ixqtHAo7C8Q0IZk8U9z4Beh2vxzTkgtHaYjSir48rQXYY\n8Xe2lkdiutLx2+PmaJHKNuFtAkkPnAQJUw+MdzQ3cCkq9PmZi2nd15Yy2Uxg\nNkl/nInQANDgCihJ0HhBtJGXeJIubmIWpFn6/WpcQQjZOdzg2/qgwAFUNnUZ\njTbmMxgDw82xRUUGJZO0cEt/eRA9eDRNbpggfu063b5xhOzBH8V3YowEMk4J\nsLnf/VjrkfDHo6jK++Ldkel7r3fJViw6khNCa+IxUhWdOE+1u+hOyMYrj2nv\nIpNfJSSBkYz+fJEyPCmpMq29HzwqIMX3mt2wCyP0vS7+YVHFpLI3oq/2kJA4\n/6cHkwaminr2MtNUnhUebph8t3AxUe3nrknN9qJXMhnbh5UXnNWORCIP7btj\n2CnIzSFHvrP66LoqdZPW0by3G4SDz3WvM43PIhWQs4ccPpw8VFx1BXP6+Veo\nIrEn7LdpX/mZ1ykyKiBJpy00GVkxx2n6rx6Gpc4YebU/TYoISx4JskvssPPk\npNlJSJJ57K+eOjwArtPvdeVCZiwsVScKMP8hX+VziX2SKfoS1nK9lzf2YZq+\ni3X4\r\n=tY7x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1e41eddb7d951c0eeca983e08e3fbb7b21cc3776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/rtl":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/shape":"9.0.0-canary.c927a5d05.0","@material/theme":"9.0.0-canary.c927a5d05.0","@material/button":"9.0.0-canary.c927a5d05.0","@material/ripple":"9.0.0-canary.c927a5d05.0","@material/typography":"9.0.0-canary.c927a5d05.0","@material/feature-targeting":"9.0.0-canary.c927a5d05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.c927a5d05.0_1606160933740_0.033424162826991566","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/banner","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.b349b5185.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c7b9f774e566435064a28841ab0eba3c0792115","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.b349b5185.0.tgz","fileCount":41,"integrity":"sha512-nqDJIYwmyZqKfNUZY7C2xUGEbMwjnxtZNHw9RLFxk59DRZcd8Cbsz1ogYMEgSKM0OlI4hfEyVj0j8wPjqbW/dQ==","signatures":[{"sig":"MEUCIArsUigiOnC98ugQvJKcyX3pner+0RLDZw/x5yc18ly0AiEAwlHKN3VWOoo74z0pVo1gHUCxLoIJihI3TnmTA1UX+fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT50CRA9TVsSAnZWagAAR1YP/21V2sPCLYCCbIdK38zu\nls2aSfouTIff0qPD5VaYb+JVCDd2+ZuEMYHQDiQYLvN2oXS9/ASx/rfyT3Br\nVOINFAd2WIp3jCyTWyoPgjOx1jSJ2/QcF2/VfuyaWayNeBNjEHP+uWo6T92D\nXm3YLTscLKWIxcytGivXi1JBC3mInatzlqgZn2ATMQBaU1VeI4xh3BG+Hw5d\nC6uweygunUXeB4GF2n2QOcHnFz7IcqMXX5bi245g8IPyce7BrvkM5kXEaIaX\nj4PHjqPVIzCup7fXdlUTc88t+PTE2cCwn8fMlu4mVlZNNAUglY0JDpVtdQ3N\nFdmQV2KVozM0inWFZu8naP5SN3DNVXALGMEk8p3lMV94TJwt86y1GwbEs/ii\nWOIYrHe1onLrUC7c8nWMsZd1VVdGSWazaeKS+8v7F/UwzLs3BpPJcyMU2u92\naXYNOhjidWccO4EG3N6WzfhuXRQceO5LLKmOw+7EUOzNJGnBhwmyOnlD417K\niCSvzYv8n135Fvj+NfuELsRBjnxpTJoIKQA29E35lT2u2TYYEVcTZ8scrTKd\nFYzvmd5FoLKx+X1s3XteXhc2GQOeQIdLW4L5FLjA6/khWvek/LFA4Dvq6BF4\nuNJpIfCrc2MDtidw6Cwmk0NUVaKitBhRm2kC9XG/E8x6trsUJtIpbGJWUGwl\nj5Uf\r\n=hV1b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"92e0cccba580778200706f15aef4e667fc007066","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/rtl":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/shape":"9.0.0-canary.b349b5185.0","@material/theme":"9.0.0-canary.b349b5185.0","@material/button":"9.0.0-canary.b349b5185.0","@material/ripple":"9.0.0-canary.b349b5185.0","@material/typography":"9.0.0-canary.b349b5185.0","@material/feature-targeting":"9.0.0-canary.b349b5185.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.b349b5185.0_1606237812192_0.8254927089818349","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/banner","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.9083b7d61.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09343bead60cb430164b43d0af0cd3f19f43ea2d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.9083b7d61.0.tgz","fileCount":41,"integrity":"sha512-ydJ/PAhvERVnQtLzhGa3Hde/hZZv1S8onmE96YXzWAakDFxEIQE5gIrdfywykbxnE030EFFsVzAxcOgG6GTtfA==","signatures":[{"sig":"MEQCID0GfN2jktPFYjegHw1BXVTOiDDoujCf8oyxpl61Pmc7AiBxiVHUAtTzGZBUU1A92Z4Ukgr7m/Stk+cyyR+bnTVesQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXhACRA9TVsSAnZWagAAWlIP/2xOeItXvKnrOnkUxtdN\nnU7LK5vbjAjNuKcpAS1V86qnBnOd7Rhn5F4zmxWW4q/c34I5Ywvkq1TdBZyo\ns6ipwGB8KGl0CDlCSkemnbysr2v5qweoePxvGYQvJ+9scxR8GDV3gNVUEawn\n6tHws9sDtfGeCmKFdweb5Vhqs+dqNLGQWrDCR/cwdma+m3g6QLAQtGkQN+SB\nq6IQr7Da+wGy70Dv0i09sWrnjHDaFzX4wi929rh+xFGyGGu5J3a2QMSR6lTN\n8+kuCyP5iyc4/tgjOSshiGv32T+lHlaoCjyTWvSnzrdD0sXBmwEkbxLjeC84\nHoeBf+7nhHvGwv5OMkm3mM2LS/jzyV0b02EX6yXgWHAATxUqXHU5gpRNkFJJ\ngSAu545XaK7Dj3ZFYqrPLVFRnGMTsPOsrWXF7UpKRhWnYZtPH+7tZOVkK133\nocFxOT+FZFZOW9qXrfTO8piXgBi11azPrOw6xWB/jJNUv7dC6hoeroUKTthv\nM7ciuFtnY8+dBzZ19ciXojPYfLPa23EVe3qh8oAe/Ga0l6zfvF6hQN+q4Oo2\na+O8szwDd278K6xC2hOHLytPGmdvFmB5MYpGb80AH3APmBLKvI6ehX94FQn5\nWJ7/sFkFLFHrdaYXlz/0aIef/usCBRHJDPW268wWPmMb4HXm8bBPpmSzSSHY\noUO8\r\n=cLHf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c6192773b6d2ce6a74a5b464d7df3e9b57b238d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/rtl":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/shape":"9.0.0-canary.9083b7d61.0","@material/theme":"9.0.0-canary.9083b7d61.0","@material/button":"9.0.0-canary.9083b7d61.0","@material/ripple":"9.0.0-canary.9083b7d61.0","@material/typography":"9.0.0-canary.9083b7d61.0","@material/feature-targeting":"9.0.0-canary.9083b7d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.9083b7d61.0_1606252608069_0.32671506889864776","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/banner","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.eff7b46ac.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfb5e67d3807e47e7ea107cd6c35b76af43ba48","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.eff7b46ac.0.tgz","fileCount":41,"integrity":"sha512-Fbar8N4hXoKP4ak7JZToMVXykzEbeCmJAvbYBbDAaFENLf0ng9ytuBK7vm0KSxGAvfDQATtHdmStDxGORgfnJQ==","signatures":[{"sig":"MEYCIQC8j42bhy3cE3OG2gk1JCxFm7Cm9xhRBaMT1fg/gw12oQIhAOea5+Pc6LO8aUv5417Zdu9KNYeF8q112fVHHAV2pwlN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZgCCRA9TVsSAnZWagAAJc0P/0CdtePbMdt24+rDhsx+\nCGtS6BoBi402mF3M6JG0vgSAg0im1rmnU9XOvuA3xNBTOnkWGcMB0IbKAYxe\nnGp3C1tCAQ08E4jGC4GQOlaJeDDkjaFDn/5GnfUEt0KsiPj7l0aepR4KBZJF\n9JGno5l8u6g/RrWPio1Guw+SO02PC9fNjw0n3JtW0WeN2FQzYlScXwBtP1YR\n8eTAogwdIVChcCW2tHkJk6Bg/OgJprgDFL07pJMVM3yQxSIKjXezE+B+VUqI\noV/G9wyR4ebVCi0zyPme3ckaZpNwAh222/Rlkj87RKim7S3cmuiHGUePavWj\ny983NuKwK1qjdDUOPNwaEG+wY1PHQcmbMsMHHQBI5xtv7rmihL6YgJolVim2\nHEwLh/u4GV5MJ3pGbeWTYwPoPebs8aPD0PfUZpuFdG/PcUiMuhxTrt4ndkAr\nEbvJiSi9A69hODIRq1PZyExSfmAqmCC/p0eC2IbY7EmEdMjvBieITDIl+QLu\nZGH55kf/Y9iiQe3XrCnIiJng40YO1uvROhYSMzoXea4Z29LUkxG0tJJZqK9a\n0tn1OpjXel0QHL5DpsVcMTbkDZviQzmQfWXdY9v28GwvBGGyloThSBfbYDI4\nxRRch+LR/rW41lJ/9D3s7+KkiFNb0pMrqZmE2G4q6pAXdrriqkH7TEKBtdNa\n7irU\r\n=p/SI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b8790bb41654e5c7f7a7725e8e58c9dd08551129","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/rtl":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/shape":"9.0.0-canary.eff7b46ac.0","@material/theme":"9.0.0-canary.eff7b46ac.0","@material/button":"9.0.0-canary.eff7b46ac.0","@material/ripple":"9.0.0-canary.eff7b46ac.0","@material/typography":"9.0.0-canary.eff7b46ac.0","@material/feature-targeting":"9.0.0-canary.eff7b46ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.eff7b46ac.0_1606260738212_0.2249006480644058","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/banner","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.ae27b44b0.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4e00dfa313d3d395f08635223dcffc4bfddf42a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.ae27b44b0.0.tgz","fileCount":41,"integrity":"sha512-gGU2YLh2u0xcz0EwUYbWSLBnkENUuHtRN7Be/aYPh2Fo8lHNGeVba6/5quwc4GMVsG0K/Ma+4LW8Wjlw0F42aA==","signatures":[{"sig":"MEUCIQDN3etVpYtINeEphigD/jgbjF84lqGecabYXvm5F3u+QQIgNVAUNQORiLJDnKD8fy2/mKUr8hnUtByHMBvdfAokSWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnnKCRA9TVsSAnZWagAAdQYP/Rcd4oG6eHVHQ3BfnrSu\nf/1RCcRo6ZArheIqTD/MMNQhkAyS8MeLSSpMQgvDbOiT/kQUV08TsjYFKLFa\nNXfzLR+S2vgBtYabJAohWXRJcpTUV1UOt4Y73YVjDPUQIu6VO8iFTNGzjIKm\nzE19FNiiEzGWckdGUm3UkrvpN3YwSJ5cvx/bRiNlJ4u+zTLHFEPZ9CgSNMqr\nWlaZEH4DMDbghMAkI+sqtSHzISq0AC+2dPV0O2JGyC+oqgj0TAPy6oYq6Itl\nnbgd2DhBuxyZXeTPU4VmSZno0vUlzLuJzXiR9mhCyjwWrDDfCG0hlHmGHWDn\nm4PruntwpL7+TufNmvLtTVErlye60XCzRMqAYvKj47cwqOe/k6Tgtjq7jUqf\nei7Cu7bUXNsXFfdBntv+DJUr4gqnm9MMk/xP7wKCeb//dD2oyRz5YiLN5Jxx\nBvAdPZc4Tz5uI22LrAqRzvYkJDS3Ol4Jo+9lpctXuH6sIywu/AjUV5UTwsVf\nVW/aBdd3/1DQYG2c8HQEIP91vpCm0sJNo58BRTfHYsHf1e4dSCE9Slr9Bg9e\n3TK0MulKjVYk7awI+7EJXVqDKswjx3v5pQANtB20x9lRwgAUedQdeoWVd58E\nhA/2eBBgWcH2B1+y92pG7mchHOdGktM3JM8DcFk16rz47MgmVih85MNnxr3q\nmki5\r\n=ZdIn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"eb690fa0e9558b61ded00dc6e4b467cbeaed4c4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/rtl":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/shape":"9.0.0-canary.ae27b44b0.0","@material/theme":"9.0.0-canary.ae27b44b0.0","@material/button":"9.0.0-canary.ae27b44b0.0","@material/ripple":"9.0.0-canary.ae27b44b0.0","@material/typography":"9.0.0-canary.ae27b44b0.0","@material/feature-targeting":"9.0.0-canary.ae27b44b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.ae27b44b0.0_1606318537968_0.5756105174807153","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/banner","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.2fbba2554.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7111f588d5084f8fed4fbf32c64338b5308cd46","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.2fbba2554.0.tgz","fileCount":41,"integrity":"sha512-QkCabE8twwi+bA2qqw/911yiYYxmF7eo+hB+2FfXhoRGuTxDMPPutREgyiPem+ScCe1KqEt231Yl+Cyzjohpkg==","signatures":[{"sig":"MEUCIQCMTLBOMG6Op4EStojIsvJh/VEh9bqvIF8jc6pVBi/hugIgHNlFwIS55CitHBnxRTrKdupbxz5kyeuFflgCRmELYEk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7TCRA9TVsSAnZWagAAtAoQAIvsZ5OLKkapp1Pt0H1t\ngrOh1cJeQ6KH3oeiAK5cWpoemkSxoCTa4NSY6HChx/2/q2X6SUsiakOwy4YV\njLY06E+MjyQt5ne1T/F01MxHkC2JTBlesAjqqYoJePIxGbI8bL7lvVw2yhXs\n/DHIJ3PlJvoXX3kOLwImiweI1gkGVUTl6yQQ3RimifyUCVPOx4vfc74cYmoc\nhwqUVUCg8YzU97u7AFUds4tPnjw2hz77x26r8eIXeGQ9FV8xTLwzR8OMoFAa\nR5vGePwMs8gXdnT+sr5qhiVs33k6wwLDgfMhfGquruFjg0JnH5cBhiT9TuWO\n3c4dLulnIMukuk/Xxhh2YQky16mGshYnXaYzX4SYKorBv8ju+wt8mtLBAa1o\n13ZsUBv+3YsaYlJ9cGai23GNUsfApyFbXbNcatd0f/13ghe7hG5b/nru+0xq\ndW2LdyV6q3XCHV/5WIlBpYjiCy0ggcu+ce319JZErFoxu9u6jlROAoFMLtAz\nBcyQ697RmpJRUhb9zLlzIygdtbFq6h/8Z3QqZtgivqbglCD02Dg2k7rDzTQ5\n6OxpQCuvoE7V2ebkHI2XvFphmhC4qFwiRyki+NBSk0qyhW7rGsSD0Msg3MAf\nGFHyfg2yw6sKqf7ohikhKX4rskrdWEeT2Q5WJkqwegsrlTryxK4+Fq5puNcu\nM7MY\r\n=VR60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"93356628825eb23bea706adfd527933f0c5e430d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/rtl":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/shape":"9.0.0-canary.2fbba2554.0","@material/theme":"9.0.0-canary.2fbba2554.0","@material/button":"9.0.0-canary.2fbba2554.0","@material/ripple":"9.0.0-canary.2fbba2554.0","@material/typography":"9.0.0-canary.2fbba2554.0","@material/feature-targeting":"9.0.0-canary.2fbba2554.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.2fbba2554.0_1606758098530_0.8285411210701186","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/banner","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.6d8574fe1.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03f4c743cc2da11fc1cb9222222434b4930cee57","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.6d8574fe1.0.tgz","fileCount":41,"integrity":"sha512-dghKGMHOxu+Zt6WCmsDxpdBB6vJGmVqr1Lt3uZN7/nEPMx2o1b5VkcE22jLhPOLk2McD258mtsCD9HzbTL8VdQ==","signatures":[{"sig":"MEQCIBjfstrFYyQwN3CR6/+xSyzKKzKTKFpcsyTo3K/dgpyiAiB6OIUBpAzZmI2K6on1mMLCVi7s/EjWh12Jb3e9+RjfbA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFiCRA9TVsSAnZWagAAq58P/RkXcph+zQfxwBTA1fjk\nGwyhmMCGq6SXGyUVvovG8pDcXe99lWP6fCtrF9NpXD+V16hR2yvVVYhZUlDC\nPNF5oraaNCPQi8hoFKepE8K9sS55yHQFNnvptbqWVKYHtvDM7f4Cwqu/+lH7\nZ3CeD0oqjfiP0gmcz7jecPMVXDSko3WhvCQL/ZWTB8s6AQkgVOupXy0c3Vra\nk1TZ45JF8cekSCykiB9o4NEVlc+jqE5jk7tIHTXkamfkjgxLpr78STxp0OzW\nk/ob6F1pJMdyHjOYKfb/8gf9Csq2UeZ4L0/ZJIpxwKE8ERuqESbhu62QMHgG\nEKTie8lbGZWmAE5orEH+AW56Q1B+pAqKvru6HgugizkGj9dhf5BdltGIodvJ\nMjRe+YFwcFxve5ojwF2QNJ01c8SiAkINauJ/ag+lYSpQvqzteUooNG4OVTLk\n4VtAjAAMiVev8LOxqc2x4RW1yJu7qkbyRo6kJhwBkQP+t9hjqN6vuLYD+pZf\nG1yMQL4ijthP2hdOukQpZcxI7XeXeUWlVtfYeoFhIxocBEz00i71t9YHwxr8\nQ6JilMsTeE0sDPgdqqK9HRAg3BjTfbhg8BOqq+FnyTOQFHP8RUPIHQ1Eff9y\nh8mAYtUp4ZTLgxOTnVPTu6IZvPW3w7blyx3fLsUS5aIQ7Y3XT5cnBqAMsogU\nOXUr\r\n=YM3O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b98a165c81d2497f6c0e8e5652743d71d87029e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/rtl":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/shape":"9.0.0-canary.6d8574fe1.0","@material/theme":"9.0.0-canary.6d8574fe1.0","@material/button":"9.0.0-canary.6d8574fe1.0","@material/ripple":"9.0.0-canary.6d8574fe1.0","@material/typography":"9.0.0-canary.6d8574fe1.0","@material/feature-targeting":"9.0.0-canary.6d8574fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.6d8574fe1.0_1606758753960_0.7800313488533448","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/banner","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.fd22355f7.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4747b1e480037a4f959b16dee971b8732d3cc796","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.fd22355f7.0.tgz","fileCount":41,"integrity":"sha512-JY/lFGFrI2De/V6Ic9sLDc8C6KHuUXvMBYWOg3VOGuS24/ksr7JfCmGGcg0FnQ3x75yPcFzy5MVr8w6kB8DuIA==","signatures":[{"sig":"MEQCIBJG9U2mBTTjJEGRTzwPzlnSptZsPB52MyNWUHP/Tn7vAiA1gMV1z39aXCAr2P+9h2fNxGK05m+T+dwBJKvfRBIhBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXmlCRA9TVsSAnZWagAAojgP/iKaqHV3sg21HiR9/o2h\neZaMb52M+s0eITX7BMIVRwHK44CbMWWe1EtfChcWNgw5GmKqxho0EoIrmBTQ\nccY11ug1Jk36c754WH543ailYmrQal/nuvX2a6Wc/rHvV2Ws+n/YWtQu3prk\nHoFfsVrzVnn2hJAjPeUXvVkiFKS+aE7zRMY/2R3xt0YmM6WoF51zul0whP12\nzLA04xaGEfPps+kLg/buCcS2C4BIR3sGMexcQdpdUXVyl3bUe8tJ+Fq6EK8S\nDDAf8m3uYOf46u0gcvzsMJHMSWZKamzHryh1+zZpaNxqYAONh0bElztisJ2a\nvGZBamdAxc8POStg75AE3MwDOG2hchcDBTxiuaAXycD/YNwpxT7bP7KLwFM6\nSNPwYMM6oAEEY2dmtV1mig2nh66WrAy4Ot6PA8K9BHLNiAoMyIb3WO6k9naC\nOiwKd1HIDirrpF+j7OzHPRPIPgnzD27ve/d7mxRPNt4yX3hEQyy25N8gCNda\n+Ts3meEx1xGa2SO22wDPMnO3hPqVKJzsF8HU0ra2fpqMHHsFi5aFemox9oph\nFndLLP7P8oDIus7OjHlvcIhlO5clA2fyN8cRJF3QqMMUiVW/0ja3QUY/imDO\nq5fC8Wdc1ohbntXW9JEN2WagX4t8SkWo43E7Srq3lUh+IT0T4wjAYxD6Usvx\n8zSb\r\n=aemp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"86a40292baea3adb58a6c26ed8c68a9a425cef18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/rtl":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/shape":"9.0.0-canary.fd22355f7.0","@material/theme":"9.0.0-canary.fd22355f7.0","@material/button":"9.0.0-canary.fd22355f7.0","@material/ripple":"9.0.0-canary.fd22355f7.0","@material/typography":"9.0.0-canary.fd22355f7.0","@material/feature-targeting":"9.0.0-canary.fd22355f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.fd22355f7.0_1606777253047_0.24752777527298275","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/banner","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.c4ab98722.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64b1f72f9a475f52bceb10c2ea167bc35f006da1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.c4ab98722.0.tgz","fileCount":41,"integrity":"sha512-sb/wc35msBP6iXw7WVDREbshks2QY1aRTa9/gtafOAt+X8kDP8vB5XpU2lS/RWgmyvZkkGSKJT8mjYiiM/wMlA==","signatures":[{"sig":"MEYCIQDlbq6/PXtteJOSbdoJXehas1UfOCsDmwvJMQr4CD/kKQIhAMkR6836UhkRQ4yLa8vWsABV4BYYE+o7BXumUHYc/J9/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuamCRA9TVsSAnZWagAATesP/jeY97A+pEUYnjl+VGnF\n+F7i7x4EAmWxjsQ1FIXcpGwz5LGT/dqUS9izg2TTK/boPGrc+vKa5SQw8GMb\nQzPZ3Ou1wpOy32LCqE5ZPXXUzqLAv7mxJUbxArZspmy9HbGlqEOOLbD6Pqxa\ngFJ9t86XGA3MsrHttNbHLm5iUXJMaaVAt2tM5off7Yr71R2Yo33lp6HTSuBP\nBoa5iEFlGW/L35CMq9ZvoEVXmZCVmNPHAvBddJhklvyXAtX5RdC/lVCTxiDS\nW8nB5z/VpObwoJ1ix+a75IZkAblwmzmu5laGWmsJ0pWelsZ0ElxXQm76KmOY\n5mo9YAfIzZRKv8ZY/4u6ZYatGOqmbu3jVMLj7ldIRmKid5BufVPghdtdh9QM\nkDeejdb2xWEnaXLdYCVvsvAKIIpk1sMYQCGhNpf094uNg8Gfow4K7GA1ai/G\nBSg8GVArkKwJ8mmWxm0tJYalWlW9/be78MJ7s92x2s6klOBZ15/d7Qyo0LbK\nmqsNvYaJ78udNF+P90/7ZglLt+eBc6cb0MzMfNV2QrH/MAm1L+AqWVE0oOjC\nfWN4OjsOs4nCvVucqkPJsFAyssTNN3HD5dF1mYsLK4m6ZYg9MmZBmNcYqpwp\n1vZVEr+n9x7EhiIcBHN5K0wvyBQ/VLDrkBhC6oFaWyutwPOo5Cgv7m28yrV2\nRI6c\r\n=P49E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e6187eb74996c124e1abdcea72dfb697bdb1820f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/rtl":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/shape":"9.0.0-canary.c4ab98722.0","@material/theme":"9.0.0-canary.c4ab98722.0","@material/button":"9.0.0-canary.c4ab98722.0","@material/ripple":"9.0.0-canary.c4ab98722.0","@material/typography":"9.0.0-canary.c4ab98722.0","@material/feature-targeting":"9.0.0-canary.c4ab98722.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.c4ab98722.0_1606870693834_0.2870708424660915","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/banner","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.977585650.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f8a9ec0a60724af365d64f023abe1da116b57fc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.977585650.0.tgz","fileCount":41,"integrity":"sha512-qjKkPakrEyL9rlwSCgtmVT5326GBiTyqeFmgTVAymWvTqnBByqakZWIWm5bl9Sxk3RgVX3zOvk4A2PUw/fUzIg==","signatures":[{"sig":"MEUCIE/i8bnLWsv4U/aUdQ9LVnw32T7ae4x3VcvvVnr5kPw4AiEAzD+Vv+Z1eF5MWvH3dRtB/WxDxhAQqo++3uINAW8x5ds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6geCRA9TVsSAnZWagAAMfYP/1iHqdnMTSthIxz0dwb0\n/eG22ZesO/Tjyflc5ju0H9WowA6redBCy1IofRIMMGUuY6e/n/0uRUVAkMOp\nShB7m+qnv9+TCgWQ34gCsg2vN0pOwg/LiEMi7SeOIwFIozIKZblr/MvtTKC1\nxViGIfnrUDTKFuEY3q3fHJ2+aCyD+BU1vy5+mHXxUm+T5IlsRONiriGXRgbL\nMDn809jiu/9yE3ktrYj97wq3I3Pl9rTiKezr9H5liNAfz1lQeHKDCy+Y6ajM\nvxTo5HC6U+WhP2+L+xKGa/tBdDazrpI3dH4IFG8T0l1uLBI/Xe+QuRUM3F7l\nPKlPmrLlDmjMdzkoSAa/IBwVH7PNltyyE3r4WRcpFw1cQ73Lenl4UxO9h6N1\nqvthH8uQqV9IXn2I1tsu+Vn7+C6lrealRo954g3XEkVIhkwIU56B4BabDTU7\nTubcJOcb2pRt0PqJ475BwKk3DqKyrT1pfomkZ0u+aRHQSb9sS0030HlcDIx/\neoJoCJ6R/uU7GjH7bKzMunTPA0+XCp9mVJooB5CqiJZa706nOPb7yEDSsiFt\n+OCgZLMmNsWWJD8cEkQLydhDmOiW2MquoxC4ssM9S2Z1euo0knXY/hKamT8D\nU/Jtd5jS/fdwCOswD6WSC3EIOLBSNK33gZEb262Q90kyitZ9Sh7uWONUZpeE\nDkHW\r\n=09hj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b008ede8c0d581314d3b967bd295990ca8eee38e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/rtl":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/shape":"9.0.0-canary.977585650.0","@material/theme":"9.0.0-canary.977585650.0","@material/button":"9.0.0-canary.977585650.0","@material/ripple":"9.0.0-canary.977585650.0","@material/typography":"9.0.0-canary.977585650.0","@material/feature-targeting":"9.0.0-canary.977585650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.977585650.0_1606920221480_0.927598287975073","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/banner","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.c7edfc7b6.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f562e19cc3f136d2e80f5551b39df6ab1912bca","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":41,"integrity":"sha512-O0XYMBSda2m6SGa7g7eYMJo2qirWDsWfSOFnEiJIobNsVp1pdoUogaTYRBiM3D3TE40DLN25H44H5DhSwLSyfg==","signatures":[{"sig":"MEUCIHhMYXsl9wjsyhAQLDlT6VzImO8V8j5xVNrM4/4NGemtAiEA1pCGTIAc8veK7Hbus2HBMIkfyC1TqrUnxCHLzN+AZ8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6nMCRA9TVsSAnZWagAAbbkP/i8c2BsORnBEstrIHob6\nZud9mTPfg4JyDOV1oV0cDlqpziGzLTeEtPRMwH/vv/V5HVdh6Bx/yuY5EJR9\n5GGvbvVEQ1dtChL8RXWbNOFHQoj0fnInOVPI3mRfsWDXfMPwhXQey3e/Kdsr\nanyClCU7TV/AcOepXU5vUXHvsv/3JW7s6KFQ0KINU4hrrWmU3oUtVpuG0+Hx\n9BrsEeosKRncU0DlENASTe0K4WAb0Z+jdAVjPwkovxWz/bpRPUhIGpZmLAjC\n8SOB1MvfSq7s76/Je19bvlZLQButYdQIP6Nub/OczUw2p+mQ/V8r+Rx40vRy\nCKbYjJeJ3OUUhSWONVXnGGe5OBS8PsHRNQBc83xa01b/ZyEMo34DrVi5VT06\nuA66ofD7jdytBtCK4id/fzg6uuPn78g33vKV9M6rLyE2Dj5s6/kB30L/bJMI\npHaf996J8vqBAzcJ7nAa6XZSnJy32q4/TDOwU7TsDFE19jdT2V9AK34E8SUI\nVujjBdj8EwQkv3ClIGoL8oil0P4R1QLau+JbYCTcCstc1XyzKTSuAYg2+MmU\n73EjRCr2BMaP2XoOUV4NQBBgrf00ABDJStiUyYpQAHm0Z4kmbtgsmxJKLFfT\nML81ML1mCOXl0yDpim14HF0jf2/rZvcU0J/fAps9zzbs7g0O38REciSZkl27\nefN8\r\n=KmvB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"791973660a1d63a77aa10d2bd0df7c0e6ea94698","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/rtl":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/shape":"9.0.0-canary.c7edfc7b6.0","@material/theme":"9.0.0-canary.c7edfc7b6.0","@material/button":"9.0.0-canary.c7edfc7b6.0","@material/ripple":"9.0.0-canary.c7edfc7b6.0","@material/typography":"9.0.0-canary.c7edfc7b6.0","@material/feature-targeting":"9.0.0-canary.c7edfc7b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.c7edfc7b6.0_1606920651668_0.9379101301023565","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/banner","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.4f3347306.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f43d19469c5cd477b64f0b48a8f4851af4e7bc70","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.4f3347306.0.tgz","fileCount":41,"integrity":"sha512-9G1XZ0vaTZ1TdqXzRSmhtYtQ1aCRQfPOd5mMlZdYpqDlAFoATqEnHMSuD7NP+L1gEgYQZhpey2Xe3xlZb5Fpww==","signatures":[{"sig":"MEQCIDZEC/6T0dXvPjWoO/WZtkYem0zq6+OwKjKee9cDs/tZAiAbzvZk1pIbUl6GWQLOTYKPL52I4EydeP8+l5MBj7fu7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx64ACRA9TVsSAnZWagAACFcP/ig199GNR1eQBwPuEfMv\nrfflTm+o2r+Opd0KHxDZgZnqeYKYL2NQPvCNl+16kiSDcapz5hyNmlGzCoSy\nqI0Pp+uo31+So+i+i2xqEUjN6eyfuKsJi3X6+sISIK1gQkJuNe0N0wZUdgAz\nTd/7vBSsraeBt30YrmadqjxFAvN0f7Peh47UkAQl+q8/AtgNAkFO62pOn737\n+SnoTInbTltKAu1mb+L47H8d0tIHDrYJlApsEz8GSJTQ+nIq808hL5F4VqoH\nHOrX3SURs1NmNtKRRhEr34ZQr1AwItUhIhOedZ4XOM9xqVdBbbPZC1z7p0ki\naDNW/nrJFfvHabBBzYdRTedlqAdZDUQ1fUX3lQL8PLGJgMS0ePXhYaY+MmRD\ntBNW76A3VWavX3+N1syABaundL7zvzzYqhP/RVmigZ30jy3UpvHtUEYB1mhL\nPJN0ixcCSwAFNzqOmfl4D4O1cpGmon2gq8ZAULY0+PHyYHx6MmUC1b3Uhhki\nIDoFhNHU460W7l7tVKTrf+jBKkcBFe7Pl8QRzzypdojkdladTcXxpuwzuu5a\n1VabupWe0kCURQkjqpb8GwblRwv8NtjcgCpHOHzd4h3oI5TQl6Fn20JS55P3\nS0mEqYpKoAA4YJ8h3st0rFaCuvm0CdochGKT8V/NlTjM3gktIDOgYZqOpFEm\nnd5+\r\n=YkGC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"31d08595c0470096709a4d5518ba7444313882e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/rtl":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/shape":"9.0.0-canary.4f3347306.0","@material/theme":"9.0.0-canary.4f3347306.0","@material/button":"9.0.0-canary.4f3347306.0","@material/ripple":"9.0.0-canary.4f3347306.0","@material/typography":"9.0.0-canary.4f3347306.0","@material/feature-targeting":"9.0.0-canary.4f3347306.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.4f3347306.0_1606921728171_0.9598057780833811","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/banner","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.37fbae10d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a42c8348ff686f1e97525bcaa912e421cc091644","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.37fbae10d.0.tgz","fileCount":41,"integrity":"sha512-ARn2qMVARgryEADgwNtlG7fEqsP5A4QtjXPhz+ng7eg1du3BYaLkEZSH+X8BAuZBoPkm1GsmjX1UAOU7uDFFrw==","signatures":[{"sig":"MEYCIQDLyn/JefcxAU600oWJu3JmCQkKN+uGLUhfIRPvxCp3ewIhAIHLFABkDBtc4MGHbJB7LQCqDbc0ESli6pmwrL3ekdXL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9pLCRA9TVsSAnZWagAAJnkP/2Dya9FgxXKdKRCOxxk2\neWq6Gd+ZyT3BuGUicJ7jf0buiQKMsG6RvkzfcOKLuRmV6x94VFjSnJGX2N7H\n617LqQS17u46UuI3Z+crbvEEYXx05RPysUkQwQEw1HKyBhI7W40ri9uZQV3O\nXXMXHGkZmEj+IZQyVRiHl9RUIaVPjWL1/nHGZ6CRLqoYtqTboWN1Lz3N7pNu\nSu76yAp77Qw9NmmTSwdd+bCbpOaX3Jtar26S7l9/vbEOx2fc946fJWvVdHxr\nKy2KqLKAIAaBqdbsomuq34+dR7CXq9/dUW3UeiKo7Bs02qhCYQdZLJGHJynP\nkTxdXqEpVO9c1kcBYj3QNOkY5N/SsunfyAq6Iacwj4C7oJBxdA79svh8gf13\nr8HO85Vkg5g4HFzkvsbMw2s8SUFLj+hYsCFSeqWGmx3f7O65fSxs+8iT1Dtd\n4XraG2jjwAt5QDW48pbQIl1dZ8a1y8Hzt93VVR4SxWtpdf89R27gXvHiRFlT\n4rAZh/5ZZx9ry+k/nmtuCk4X21haPkYvV/vbuPfUF2ywcYE+S/GDQzkvuYli\nBCQbIzdqpYCMXVECvuhvmJFkXqbR++FwJ2A6BQgxV0v/rSnYfZtkp8BJXzEi\nacNVder4iGbFObo1fLVx4bchFU1NokV1lw1PrA3/5xfguhS9an/AuUqpW+eN\nyf7M\r\n=enD7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"104ddf5dd99e7bc09a57e2cae74614b7726fa235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/rtl":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/shape":"9.0.0-canary.37fbae10d.0","@material/theme":"9.0.0-canary.37fbae10d.0","@material/button":"9.0.0-canary.37fbae10d.0","@material/ripple":"9.0.0-canary.37fbae10d.0","@material/typography":"9.0.0-canary.37fbae10d.0","@material/feature-targeting":"9.0.0-canary.37fbae10d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.37fbae10d.0_1606933067217_0.8495692838816409","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/banner","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.11da3c0db.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"357fa9d20ffb05364f29af5209d2a3809c8c1167","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.11da3c0db.0.tgz","fileCount":41,"integrity":"sha512-dGtdBuuWSp1xLcBtjuN3M5wz7mUcSdKJ2dP0HhsiYSuHjOBu/K/ZJIDMI+NWfsp/9jBdzqswQEUjPsJsKbZgxw==","signatures":[{"sig":"MEQCICIze+uQO1XXdCLAihCkHqA+z56eOQmaJdTR7wpNP3dGAiBEsUzxTJt/ZCtg2ne23+kVelzL1fr9+hVwqiEY2mqKZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/fSCRA9TVsSAnZWagAAb6IP/ipH9lctFOqltezulOAj\nc0RwN2wUmlpOO4ynWGlt4bx0QD7usbwQ4xwAt11etogCFU1AAYpfylpBI6UD\nWlbqK/dY2f3c2PMH34TjK+q91hBRrcW+sMZ3swPdrLAGg8w87cGcs7gti3Dc\nabUmYTLslb/4oSsSidCe/crCYjnQF8juLbV4ev+mSUANUV+h+N8nqjotOt/g\nSD5Yt4SWiBu8dwoE8O1ErhnWWa+7cBQm+MKlLBIhsEhT2qRtQngrOWQjEhn6\nNhJlNBOqfXVtdedCtMsTSyEHlzffSZcLfc6otVcWDDDApJPJRFoZgrrjoXT5\nciMbgfShw9j7sOa+4MvDg3Hu05qnCfJ5JhMiias3aMZ5iSD6g2vbnlfb1PnW\npAV4yqsTFPpaUADdGzHL+MW5pPPBtXD1E9HusxWtOBhlHDZRRuDcFzDTgNiZ\nW8E3YtwVCbmtu8kB4fUM7W8THvRXKji5f3513Yv3NUgZHuAlYRd2kc+mmvU7\nxMkWuxhsgvpOlUh8znyvMTdZWJY+pADjKaC+Hd8Gw+d1DS1TzexaIKyWtgss\n4liXa3MLyiM6ukI3QLlNEejXOTWhue9LrBV1/a7llC7kFW99dKqrs1HfruIC\nQBQbcGAiLI1U+RM7JH50vDhoI9jFotoXo9a8+/8oA+RBCqtpjZmSNCYulNho\nAwvR\r\n=QeGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"db8b5af79bc8221682000a74eab75c30395590f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/rtl":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/shape":"9.0.0-canary.11da3c0db.0","@material/theme":"9.0.0-canary.11da3c0db.0","@material/button":"9.0.0-canary.11da3c0db.0","@material/ripple":"9.0.0-canary.11da3c0db.0","@material/typography":"9.0.0-canary.11da3c0db.0","@material/feature-targeting":"9.0.0-canary.11da3c0db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.11da3c0db.0_1606940626319_0.25798560189360753","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/banner","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.489d4c219.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1fb34fcbfbb4ca5ec6042557fd6b34a117f39d9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.489d4c219.0.tgz","fileCount":41,"integrity":"sha512-VnvNXGizqKBlsVtdOzgLTpRZAxWKPYzosrCdbc2EB2rWvyLQny7goRHqI6hwKzezTjxjZT+vwQek0PkTLGHgVQ==","signatures":[{"sig":"MEUCIQCZgp3zauWHR0V4A2UWKGeGFOjf7hRC3HS/nXELvPHLSwIgRyAOWukPSdipVmqG42Dyq/O97bUX6YrUet0JHYwu0P8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQS3CRA9TVsSAnZWagAACxkQAJHSlT3KRLdiIjhkTIgj\nIHU85iW5/qLX/+mDLUR2VjPRgeIvm8hXjLea7ZWiFE7lDT2gVbeKAcmj/XSh\nhosNQzxEHQDe3juS/rl4tqPl9+PPbz9ARlHh6lN6w1SIMVbY7HVXRISrVf24\nS0LVHobWUNTb3zop3HlmLQDne0T/jKw9dnpe/7j/dbDIsi8OJ0FKPOo3qhMU\n8tKkyiot1YIECvVrgn1RRN3+r1FKF6OKePkPXUGpYAcNK22gKpaA1KhdrboG\nAY6tMcjzmDzu4C9Sdw9HpThPjMA8vDtvr0M5vGgLN7Q6wq41fdbuRgceNYQ6\n5ePUo26gb/jOKmFGf+8Eb5L4QL03FfKij+23YFpsGq8oHAwO2cKE+UsRbdVO\n54RxILH6dC2KjPc03XZsm+lsuS/ElSrHWOtx61DwsUYYysLQH9JsLASq2xRa\nh+Rlo0KXjkZ3Ffo+4kWIZlTl7xCmj7sQ43H2HFYMBZBff7x6sqWX1a8MJ9wT\nCIYMY6spM//EDy7yk17ovoYcMPY+plFD6/6JAZSyxOGyVmCU9Bnc+PPvBCro\nucVQTo2uSKZeGxip0i+Gtrt3yQ/8Y4ntMq3qbMvjQV0T1QCZ8neIAdPcHifr\nuN63nVw7WDF51OOxxgRdBBc3ToF/P4gQ3SGU/nRWlJtR1EnoYj3Lgy7ikkQm\n1h0O\r\n=HLh3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b1c4ecae655bd87a48f6065e7c292d4b30cda43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/rtl":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/shape":"9.0.0-canary.489d4c219.0","@material/theme":"9.0.0-canary.489d4c219.0","@material/button":"9.0.0-canary.489d4c219.0","@material/ripple":"9.0.0-canary.489d4c219.0","@material/typography":"9.0.0-canary.489d4c219.0","@material/feature-targeting":"9.0.0-canary.489d4c219.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.489d4c219.0_1607009463379_0.9797790920903189","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/banner","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.6557a69d9.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e7ae81bc88687501aa0a6d13725a1af06e4190","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.6557a69d9.0.tgz","fileCount":41,"integrity":"sha512-KnLhhn5WsBUh5F8uD/B9amEHH8Pm+JU6kttuU2pLaETlZnwS6l3u8Ddfpv/TL/cXLpDx1nujyon/nRW9lcHmbQ==","signatures":[{"sig":"MEUCIHHt5vJI8+3udWTzo154tQAMt0zYWvQfgIyeqQfaYySPAiEAlELpxGn1/9z1BWYtOnaJNz2d9GU/uBrcysQv2gA7yZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQeCCRA9TVsSAnZWagAA6nEP/30HwKYmju+A/ElMPXSk\n5oiLpal+fCwiNfa5maZZqYHoD5fBotwdoLQ7ZI7GIwyrODbYZQ8UImzR0N+6\nMDNqyp0zIE+Sh478h7DOTdNyMJcuWQvwYLYl0ZEp7S22U03jMvUNQoKN9VkY\n1jIse6W09xI4MIYbI7mBfquJswar8buL4KAY2gyw2lkq4Ar7Ei3ptNhYkNia\nZ7JkyvYM7SlYkflmfNXASqS0M8ayfJno3oYd/aYkKA5a/B0T6IZRaKIe9cps\n2QY38ezf8+uegpUflowiWyiL/288ndW+CQDtmtLgJgH7OC0w1V5DLqIUx/BG\no0lkSlFAl4MCAUqUjBuwe6l3SgExyfT97uqyKjPpGcb1dz6zF9IYedDLC//L\nGjmTc8kday6mF/rDSqFBIlBOeXRtFyF9eOt7lcR0rgT+Nogm8GwyezM8OOkR\nc6beBg1dhtU9mG8w1lVUl0CJsHb4SsnzZacmUuqQVKRoS/K9PzIfM93wwA7B\nV8N58yNR+EgKjMB+dTmB0+LezhEExFpFhISTyhzZwqAwWLSGyY6QTEYF1FOH\ncodpbDzUgse1Pti7DFGA7WR4wlWnhnJusMqhzCFJpg1fZa3OE1TGEePbTy3q\nPTUGwmucB6wQ7pElooXfN4tQRyQN4MPh4fCa5khj5XyroQwIy2CefCnx6wVT\nyTiy\r\n=99Ax\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"55ff05f1fcd2efe299d07cfd81279127a6fcaa5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/rtl":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/shape":"9.0.0-canary.6557a69d9.0","@material/theme":"9.0.0-canary.6557a69d9.0","@material/button":"9.0.0-canary.6557a69d9.0","@material/ripple":"9.0.0-canary.6557a69d9.0","@material/typography":"9.0.0-canary.6557a69d9.0","@material/feature-targeting":"9.0.0-canary.6557a69d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.6557a69d9.0_1607010177742_0.6007491679730022","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/banner","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.4ea1b7c69.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3c36d1bb246fc15383299f4d22f07cfcc3617d6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":41,"integrity":"sha512-XGhE2lCy5jJmVl5K/fUgugt97cOxWOUgO9ooud2ge193nfVZidOsHRVSUF+wHf0ne0mkq44kMmtQig92dsRxhQ==","signatures":[{"sig":"MEYCIQC6AKtlENXknLSBGO2CTViK7MD9/k7oCLY3ddEhb4u5rQIhAI3uBV4eORytl4PlL1jM0eOIaM8FSl0yTr2q+pLfKdaI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQuICRA9TVsSAnZWagAAri0P/2DyaK7TrxaAgCWZTvXS\nozOT5BKyQ7Rz1fWRBDGUmGhhyA0qamr85OPuzjjltkCh5u9Spe1k3lMELo9W\nTQFQcBKMI8GnB9PvELMK3sB9nMY3YehT8QnA/K+8LA9rnbCiw2f475ZT2944\nF3eVwtzVXKCmpTDIKvNVSY9gUDakb0tTfp/o+ITALqS2101O025CEO1EFERE\nJ7Kd30mfZo0z7p3+nRoONvRe1Ahy64ebGWXosBdQqyJqOfwZHqhRHnJuKjiv\noyKA7dCAmTV7n2bKma0R1ijphLcLh+GFDXYz4v9y2OzD8enal2KzsaKTIpYS\nUt9yJWPzjQC/Q5t3ASTq8Z4kLiX8iDafX2OsV1Znem5EnRmeHCR7QqFpYR8G\nSkpxokhKk9w9vHybXlHvIjXvAOyY+4j3jkV238U+Ls5omxZNYVuMHNpY+Cvb\nSVxjRsYRBEsn+GWtEAupti0+hubQ/ggw2mdCCntnirQwi04/8JWL7kG6RSPt\nAA09Erj9cE1nCOcT49Bx/qT0H9oTjWwlZLRazkcLIMIoxdda1uNR6rKDR1Z/\nTW1iYI93DpAktqoJBPQ6kFPf6WLZO+YBUhmWqfpd/aZp7lnvZdURZvnHytv8\n7xDYWaqXO/zFkG7/KbcU+OIcIFoC1TC8OLZYNBeo3gWZieUdlRHWREF6mujP\nIWqf\r\n=P2Rn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d7307ed831dded5d9e22a8faf595a7411258793f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/rtl":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/shape":"9.0.0-canary.4ea1b7c69.0","@material/theme":"9.0.0-canary.4ea1b7c69.0","@material/button":"9.0.0-canary.4ea1b7c69.0","@material/ripple":"9.0.0-canary.4ea1b7c69.0","@material/typography":"9.0.0-canary.4ea1b7c69.0","@material/feature-targeting":"9.0.0-canary.4ea1b7c69.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.4ea1b7c69.0_1607011208542_0.864777429540103","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/banner","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.eaeb78ce3.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"465f0f07d2812edd48da74c0741122b4b372b6b6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":41,"integrity":"sha512-25/iJpujvymzmlt1AyFpcYm5BYU+fa+KGV6Q6TLdWt5eheWqPSurm77aoe928NLUB05LcNY+dT9SAbCuBfmkWA==","signatures":[{"sig":"MEUCIFnCN9GgporocC5nvzJNfj8GXxkE5/4WdfJQBB89m+V9AiEAh8c2y8+j7vyPKfk3l/GOUkEfkKi4/VAQDAiBZh4/EKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448126,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRovCRA9TVsSAnZWagAA4asP/3X2CvkD2m4mj3Vtz+vi\nTDN4kk1JS9fxdVxpuv9YMrsxxadWTjvjN2NAX5I8EK7v+PF2P3jpAJC1Hidt\nlXABuWRdI5ig2M80uOC1NRm5Dg8l3n7pzHYwLYSZSotwZPpfGsJddv4JFVB4\n4nE9zOuha/rwgJ/Bkd9YaPeOO3D2TkzUHkh6VkBMIbyETMjqFIYh6yXiRcGp\ndbwmeaagY3SUJiFz9ZmqPO8b3IEeu+aRE4VHzBkt9qSg9yo8dSOYYutDQS4Q\nAB5St/yhxsbU2NL86TtSxil8DnKC2J1cGwZ/HSKHHaIJ9UDf9n8jEhy7XICW\nHDFOmRIJg7RF9fuPOTdAncJVNKDUZsrF9Mrlh9k7m40aOXWNbyz0lQEKp1q0\nBq1uczPmJ0R3zLe+/ooRB7LKDmYDQFNShXUdsePDYviBsAHqHM9Syus+52pW\nGlmKUTScMlreAaGD8fWLcxVzGqs+4gUzC2dI50BKpOBVTy1yAFhrjwT1xvog\nT32PS44SCL3tAJsQwXms9UJXjBzn5oOKZygtQ/zboB3/UFv4LQmMu7rQZvF5\nuo/ExHYFjuh6QTkOURB2TRo76RwpXDHhhwrq1ay/f7fNVhLNx8cF4Yr2bMIP\nJIv0U2sbPUP+Y/UrWMscz7489/A9N9L7FDpG7YQbpBTc8Lohcx38IB1i5o20\nuzUJ\r\n=2BAT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n## Content\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9902fe5ed18fabe2d289f92e75dbf17abebe5a80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/rtl":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/shape":"9.0.0-canary.eaeb78ce3.0","@material/theme":"9.0.0-canary.eaeb78ce3.0","@material/button":"9.0.0-canary.eaeb78ce3.0","@material/ripple":"9.0.0-canary.eaeb78ce3.0","@material/typography":"9.0.0-canary.eaeb78ce3.0","@material/feature-targeting":"9.0.0-canary.eaeb78ce3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.eaeb78ce3.0_1607014958775_0.16441502729510482","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/banner","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.1c156d69d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea90c9b5942e7021e1e80169bdf50220897d73a8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.1c156d69d.0.tgz","fileCount":41,"integrity":"sha512-c14ukoRFq5aOpHdM0j7OH6vYEEuuogG3kc+f+ku8LsfzApnIXLpAjqMrQJ0AJ0hp5h9X87Ak6QObDDAzOENjHw==","signatures":[{"sig":"MEUCIDHPmHLvTPMi4r4gwI1Dy8To9hMptHSM99nA7NX0AXibAiEAhdvOgPd0/Xono0/dFT733kcKWytlBWwQ7CW3GA3NRFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6rCRA9TVsSAnZWagAAYXIQAIVY8HwtPtoPZd2DGKBY\nFgI97BewD9BcwDzNrFohaMOJricshCSNpXbQtWgX/Y76QRS/HkN/N2LYMrKm\nB+pkMEB3D77nEQHUtMlpY/l0Hw4SC/SkDf47GR91Vgp0imTAmu7JmaDfQjiU\nta4l9daxniBz1Ie9+vwy6H6LDXrXHS6RjWnDgc3EHOEE5hky+GvEevALaRsJ\ns1ws9som1XMHwNVcuMT2kXd7TjYuauO0feDfk7FtOjVI4FDpC8ce4UyI6t9y\nB4pkDzZqrCUQCcUyATlbfGJ1gCGz1jXQe3rHg7x5K3+K3aYEc0dCU/dNYUgN\nWCE6weThWuwDBUIGnCRxZQAf3OM/cgtsWXh7V2d0lNdzFmamgILkcV2gcI94\n1PwLc0QNic338EQBVzG6zHx6n35RT5mYSoXaS7NXnyF9bcwo+8NcwxbPMA4r\nJyeQgAANlKJiLDbsM0j1lthj6uUpe4z3syyxARq4jYEqFya6SM75ClURwAgq\nhZSdIw598Lsn+i6KdPOYmgNsowo1cWzo28/6SHdKrTMh92zApzgqtctuRyOA\n7N+yK1RbDULakOSFdPqQ3j+ywiYdfUwL2tG1AlpjP4GNQMs7ITqRNxS2Hfo3\nqsszks0qiH5B1KSJ2roTphAPA+6KO82IYvYT7bi8MttauEFA/PcgI4tSORh5\nq5tW\r\n=SwdF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2239befcb4baad98eef5bd67444b0f759e58a812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/rtl":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/shape":"9.0.0-canary.1c156d69d.0","@material/theme":"9.0.0-canary.1c156d69d.0","@material/button":"9.0.0-canary.1c156d69d.0","@material/ripple":"9.0.0-canary.1c156d69d.0","@material/typography":"9.0.0-canary.1c156d69d.0","@material/feature-targeting":"9.0.0-canary.1c156d69d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.1c156d69d.0_1607028394769_0.7989500415719215","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/banner","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.832668d33.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ecb198ef4323fc3dc6cbc9bdc67830948775633","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.832668d33.0.tgz","fileCount":41,"integrity":"sha512-3Or1/E0XdmLTaqzb72rWcfPix9hDIDnQOGVNRUJF5TFkTJHljxg2vhWFqb9f3o1e1SCOfWi7TsWW5SGjEuBzwQ==","signatures":[{"sig":"MEUCIHEghlQswNkswvzRrsR2LYErNPdykHpCzy8fOQlgYr1fAiEA4vj/+z8+FeJTg4QbUdhWuDEAYCw0+kFy9xLQQFRB4VU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrSCRA9TVsSAnZWagAABQUP/3kuKIq2I42MWBUZTtFw\nlBakKxLCNmtSk/XWnKmYKvl7x8Y80LzDlN3w3UKLvyU4Ur+J8nUi9csYK2fA\nw/yHy5zqmM9Ja0GIRZNaedFbNqo2anAinxYeN1G4oG2CogO8RRJGZRO/LC3x\nWVU7A5S57HnAGl/FPwHbAGwPJG0ItG2/oblXsmSxDhjDfvKCbc83gCsrWhqZ\nfxmDBNFb0uf/BaoZFWYjeywBJWuYHRD/t6AjaSZG2QsMlq/dFj6r9g52FIcK\nRN7lFB6SVyydqwJOmNkzMRCTySqxYW1VNWFMWRfi2aGPEaAwoQiXwW23Pk/p\n7Ea5L3DK5K2rif/5baYpCTDj0Vqdc8GdN7Oc9yh+s6GFmDpOf8IGjApY6kR7\na7jbk6RhJyObJHPh9j3nnDzdsvj7lnwc5/ELErJvcc6TOnpS/e7kL2GDwaqo\nHtsGofqMzfQBnkEXP9rcLtxShCr6MYDhCyGeQObGgpPYTzFZEknJiWMlFHPN\n3yC/jmvTF1eaGiFYFLT8duEJGjZCGvWsiBLOukJXtiUuLnwMn5yQR9BjUOdg\n7co9uyPFUj4a5pW1bdx7opwR0GxzVpPuClXWttyOPh+9ldcBb7Vm2OOsrfcB\nWRI9dKQfxp2cALUFzdsGynAq7ibuzW07bY/EgrtZi/1brKLsWH9q7Gc9XUdx\nkIsl\r\n=5r0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5744d71a59950726441cfb1b4e3ae33706069b94","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/rtl":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/shape":"9.0.0-canary.832668d33.0","@material/theme":"9.0.0-canary.832668d33.0","@material/button":"9.0.0-canary.832668d33.0","@material/ripple":"9.0.0-canary.832668d33.0","@material/typography":"9.0.0-canary.832668d33.0","@material/feature-targeting":"9.0.0-canary.832668d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.832668d33.0_1607105233696_0.5711810954859475","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/banner","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.4321323e4.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0525d386dd0c4d4fd8f1036c36dd03881f8d972c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.4321323e4.0.tgz","fileCount":41,"integrity":"sha512-WdkBBZEQTCCIJGzyVbHmop47XPpjP2cZb3sNW0upJUyaCCREmo7Z10ygvvYCBxy/QM36+D6v+kWvc06MvGIGFQ==","signatures":[{"sig":"MEYCIQDhhjSn+uaXy2/G7gHmQmjy7py4wUFsx09ZWoSASRhs7wIhANCjVWoX9oXkQcuEcTvbohefkwGYmzIR83oQ2p+qjxRM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhJECRA9TVsSAnZWagAArSkP/idP8Hl9NZsYP95MYUx7\nwiatWoGzz2Q1xrucsVMcQSX82ZSNLrfy7ZTMdpehA0BxnL22BvAmpNtvmGcs\nmXGdsjuBOnqXn8SWmK1DWWfvYAtcpy30gRSOyGJS5EaigOMkupKmkeNRKpqQ\nXQdoBrBHAZwWfReP+pJzYDA2s84ivRs89ZrdvP5WWRpGUq/m2f6hSNPHEQ13\nMj1/dJjAtTKZRYny1FbCHWcxJicf6t2NLKhhBDlTThnUoOdObeU//GbOXKjj\n3hRqNdXGlSYjY48vpzVHhv53JOPG8HfogcyoJL+yQ6nAggp6CEI+Peb9Lx/H\nYPFfI91EOuGQsPjqe2c/lZPoo0DyDu8O4+S7lFkP7LDlrwZYSW/yOssbVpgU\n8DThet1pghSN3f7ngywCSnzK43mP/UBB/1MbQkazdGKW4r0+zHVE9x7/YYgn\nZeS2tLT8wSgac3HxleVpJ15+ENMIj3oAGzAigMrZcKODhyurBKsYynpv6Smb\nKglr+cFisUN6XIS40stCGDymRfZz6Vr5vPj65G5AeE7o1Gylu/q15vTNk+WF\nU4hhLm1pQKj4ea7M+ljx76bhuk4yuQ3TKYtWtgGG4+0amUE24iXze+ZpxgWK\nc62rUWxwE2G6jL27QCPTcYS1xZGBjB0/vCqk0GLIjJPO52K3MkXQIAe5zkaN\nDC6R\r\n=p07H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a838a6bc72ee56a967d493a841d4c69ace1f3f13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/rtl":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/shape":"9.0.0-canary.4321323e4.0","@material/theme":"9.0.0-canary.4321323e4.0","@material/button":"9.0.0-canary.4321323e4.0","@material/ripple":"9.0.0-canary.4321323e4.0","@material/typography":"9.0.0-canary.4321323e4.0","@material/feature-targeting":"9.0.0-canary.4321323e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.4321323e4.0_1607340612033_0.5729890697197608","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/banner","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.2d5f32d41.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b75f5c3c5629de274af3d75d9138d7014cfab0a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.2d5f32d41.0.tgz","fileCount":41,"integrity":"sha512-JxZMIhPnrgmzM6LzAJy76UaSIdSYaIrDV/JRivoNxsjvvhYSExMOJPpFa1YksJ+MISVFZHTCmms9MybmLm0Bqw==","signatures":[{"sig":"MEQCIEHeFFxs0q1X20kc4ljURXGjc1fkTlQ9nJQX5sAvC+M9AiBRo3uniUeZW7BZnnIdYzk4GaWT2qv66ONBNbn+P1I5Cg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlumCRA9TVsSAnZWagAAE0oQAKKa+wxNvK6JRtnO0l44\npt/ghlo5YLJ8ADtm6EWf7vlvpfmFYjSyxQSZDxEedoOrANphyUIvfvI8oRVt\n/Mu9KYvHKObOGpd+pcJsS691b/x1dswxd54LFPpPu1s9vHYKFsmHBA98rzJi\n9nu1QgBCdJpmp0j5LbA0Iynapdm+9IifK3KPA25HccdNxHYXLklRHZCoU2Oa\n/ooRuXW3ESoWGcav29XZpduVzT/s3cppvrlmiu/eMXGxLD2LUC8k/1Mclvh1\np9pxHZlIq6R88WJ0Uq21vyDIFR8r4zvj42aYGDYnaUpaM+pLADWswi04kJZB\nPtUyI2/eiPh4/pMEKv6EAmLCpSaaQq0yByE+NCYGUMUKKHm/rfurzHgd3Zcs\nINTmq1uIbdwOk+7ZaOWLT7YxD4MlxwTaXNJsRZIksbHiLxiYIpj4hRCG5UIZ\nhZqqZHHpjGx9wOsuYdSch4d4xJsA6Gd1qusSkjL8wDf5MBhjH0MItrLcbLeD\nxCRYHO8v8sVitVRQzJYSf23yFfurhPYnazmOjjxCm4zXiYVMNgT0nBEbW0cc\n0zPlUP7haWzT5duM8MjGQKZu9Pbmr+ndxMHq+nzSLQ9lRsMUIdL0NPufMxLw\nbK+TbhlwX0K3vdWd3S3HkNVIgIiOl1RLkm9aDslvq+OH/nW1Germ6jLYqfuk\nb2pB\r\n=JD2d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2c385d3016a738d32bd3c03bcc91bccf82981fed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/rtl":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/shape":"9.0.0-canary.2d5f32d41.0","@material/theme":"9.0.0-canary.2d5f32d41.0","@material/button":"9.0.0-canary.2d5f32d41.0","@material/ripple":"9.0.0-canary.2d5f32d41.0","@material/typography":"9.0.0-canary.2d5f32d41.0","@material/feature-targeting":"9.0.0-canary.2d5f32d41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.2d5f32d41.0_1607359397707_0.9701540782548914","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/banner","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.8239afc64.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10775f6cc6ea8974637af1465431e79388d398c9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.8239afc64.0.tgz","fileCount":41,"integrity":"sha512-V1nHNHEjIBcs3j38Aq5360v4HpR8LN01OWjFOrCHzAtidGbt2qCEzE2Da2pNA/Wnh+LlkMY72xp8zDmUlq3MfQ==","signatures":[{"sig":"MEUCIGmJGPg3cOKLtNq3doK/EKkGwWsSE532zcg4WEMCGtxiAiEAzC8StLBAErc/aTpUCv9657s9sqINegWpUREZUHbPXAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoeYCRA9TVsSAnZWagAAN38P+wRQNZCyw7YGeoqPwwG+\nIue1CDB2Aiplt6vh4hte/2btJUZ2FRH+nRA3RfhPGEYP6tp2ghZ3Ieo3n/ep\nv2xDOiWpBr+g+TEDvsMAT+ZaymBk7tD1tjW81e33/Zzo6KrDZ0IyVQMyzvpG\n4txe/bY4tDTCYGY1/h4MVCLkf1IzV1I+gbJWbCpMCsNokVkdi4oq2HZVVCDb\npOra2B32dQBell56xyaoTEqGpk3Lt4ozDOC0bFl6hNoOX5BzdOPYhJxSInGo\n3H31cQP/n5IhSPgtBJAx0xmQJsd5TL3ldgEa+n7sATb9+9tfb5ikyTyjF2Mg\n24qHAlX2eFPP/DC4rg/dZMQsZI3X0qH7VWB9N/k/RPQjkrxOb/XiFU1GW6PA\nxPSIW1w4q5+OjlfdJ2i+W2BNQSTKlw7RVLQhqzmUAQlZyaWRxdVADbgB0Pvy\nL+oCW6KS+7FTKwBpWLTrIl18a6UwE8ArJt0avRtpsWdzLpZku5ZN+Fb83KY2\nINxkclOklngJvN8ZsrYFniXlhmcXXuz45zg6zTmh6+I2ej51eXYZks8rWQ65\nIbMoOHbrjQzXxpdVirjZ/EtJOSV2bOFQLQc5TgMtmJgkMYvrJotOqd8QmXv6\nWco+FSBgF+FLZyJp6YTAwoK7c6DfjTDHA2MLLbGs34G35mQuIXwmFoKRetNK\niWJ1\r\n=cn1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3ba24284e7fdc10c5aba869e2a2d3175867e0f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/rtl":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/shape":"9.0.0-canary.8239afc64.0","@material/theme":"9.0.0-canary.8239afc64.0","@material/button":"9.0.0-canary.8239afc64.0","@material/ripple":"9.0.0-canary.8239afc64.0","@material/typography":"9.0.0-canary.8239afc64.0","@material/feature-targeting":"9.0.0-canary.8239afc64.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.8239afc64.0_1607370647749_0.929091531497287","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/banner","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.6871336f1.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f93205e3a43af3392d8dede872f2ecd8d20d1511","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.6871336f1.0.tgz","fileCount":41,"integrity":"sha512-bO84NBxTJE6Ocx0imIXxRgVHUdoLlXUxmhxkZPnuQlOwD6fk6T7bgP01Lj3pDYbfanHHoSOFHd2BPwuX7KGBlQ==","signatures":[{"sig":"MEYCIQDMqZi6CgYYKX7W4ahV74p8GC49koUvgjvsVKDReI0zSQIhAOcAYYuxknqAgUDxOZsN8sSfXDI0wcCVh1NoCSDBeRx7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6OvCRA9TVsSAnZWagAAIU8QAIUA5CtatTEuoJjoIoOQ\nWgrH0hBnvTFX0GfSpqYoGlJKczNUyCFHF/dQrL8fcN3b8iXo1oNr/4eM8D27\n+4/MRkaF7yJhX/I0/bH9OPziGxz//7YVuXdl0jz2hTIGsFuEmtdFNBlgsBq4\nOuRR1bfsm9ZK6jihtflChZn5A0EIkp1m3HJU0ILLn93A2PYxGKDDPNIav/qE\n/h+CC3yiw2CtKFCj8uxiXTH4nfUIWcn54Tk3zSSuQc1Pwy1egfYn4YIxs5J8\nR/kIS1IYUeKzLwpKynTN89Eot2GCsga1QfxI2myq8u2B2t2NRmOGWcSjwQOs\nvl+kSJFTOlotlgEPqHT7iBOl6iE0LnZ88GLH3kyYWB4nEQ2oST+xHM47CeZn\nlBx0vP/3uLGBaODKbTSf7pUFjAtChiT4Khz/ywxEyud7+Yu/wsbSOeb+8r83\n+iQH9AHoSniCPJzaJnrcI9dBY15V1bNJ1fnsGJNIttJyg8qBNGr5HVbjNNSB\nNsNsEpdDj45HB+HRHLB9zjkBYdxnSyKL4kWrFqzXHeHkg+0d1YdgVGI1JEfv\nc9svNBVjS5wXihvSY3fO3AasyArkus8yXWu85MKIe7WcyRPIQVHcao8ZefYj\nOnQGa2vdd/S69sIldO765t53kCVnk7gnJDBI0As1jYPyxgQnx9Z0LvPMutPI\nghme\r\n=wQ9D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"aed20b07d4f2597c382a6ce4b7c723f6df0c3efc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/rtl":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/shape":"9.0.0-canary.6871336f1.0","@material/theme":"9.0.0-canary.6871336f1.0","@material/button":"9.0.0-canary.6871336f1.0","@material/ripple":"9.0.0-canary.6871336f1.0","@material/typography":"9.0.0-canary.6871336f1.0","@material/feature-targeting":"9.0.0-canary.6871336f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.6871336f1.0_1607443374871_0.7323802173589451","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/banner","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.9f718da94.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c5df661a76f0996bdedb3e9ab47bb0101deb32c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.9f718da94.0.tgz","fileCount":41,"integrity":"sha512-4SYLQFE+p25l3iwAaw6xWBK6umrc0PJfgfp0/zBy8wUiJQ4aoQZkPAmfJ+xdW7IuIep0T+bh6cyRI2eypBVzsg==","signatures":[{"sig":"MEQCIDy3J8PR/0wQOHSnkQe1vk5nhEnw21FRMlNyuUBPUVVJAiB7noCS2DBZ9UwfT+yQbZRAw8AngOAtpCmeMX4AUlsIBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6ZwCRA9TVsSAnZWagAAPAAP/jfEI7mzaEUk9uAWHwLw\ngTUUhe7M93bOmOqDxBgcDdIf/ou1Y/qHeRTUyW6fu/Ee6/1KD/JfNhWHX5uR\nazFCHE4BcEid0lLb4v74g02W7tVMxMtEZGhxvdMLWSMj81rUVOmfiuAXn7XJ\nk11U0GnL4wR9pf71cPVks+1Ha8ebOYThAVsK0f6xpPA4Rs+KVRS/6+VhVfAk\naGW+S3u/qUbMeT/MpgsQb0UW0H04rbGi/492B2dIXtkGsozulLNYrPnSI/Ih\ncDv2q70jW/oBDi9RlXsBVUY2//+Sc9T5t8DWzLl4zct1pT6HO5ryY1TgYzqj\nEdvyupJ106zJzUBMVzsi6LE8Sn7RA6ei5OoQ8a4WTM2PYExIcZUODbGa0buv\nR4qGmnVgh9VDrB2u/qIHkdvT6PATbT5nDb9KAXkHwPIYFXjnVbSfswMKh1q8\n7SiRw6PJXVvTiXCDBah0zvOFFiAYI8Ol19uR6xxA+FrqiZgTpGJVooaWZ11R\nIzyCe6qClF5vyoujqHrsVEjNF5JFw+/Kk2+I+i7GIUod5INQt6UcoS4QdjYq\nfwDZv6+5yKhIQId0RARnts6vs4Uj5E0h6wQR2nmvyR6N2aRTvDW9bQ3moxXv\nzZJQ6Tr9p7mIzYSBgJKgZCm31zj5BC9xX+D6wtz57Wbxk1XxtMQtwftfxCc7\nkn6m\r\n=L9dw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7fb6692f329c5482f22dc9fe691a20fe4c6dd38c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/rtl":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/shape":"9.0.0-canary.9f718da94.0","@material/theme":"9.0.0-canary.9f718da94.0","@material/button":"9.0.0-canary.9f718da94.0","@material/ripple":"9.0.0-canary.9f718da94.0","@material/typography":"9.0.0-canary.9f718da94.0","@material/feature-targeting":"9.0.0-canary.9f718da94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.9f718da94.0_1607444079661_0.67323009583191","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/banner","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.1fccb1418.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dbf9abd44ac2e6147274be79e2abb5e5c92a0cd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.1fccb1418.0.tgz","fileCount":41,"integrity":"sha512-ZeemEPIOYkrbF/gA+vzzcPXXSPSf2oJm0rKcT8hHqXu8Wwm7CF7Z6T8OWK9BQBc4Rs57UH2AvjaRU9MvHyljZA==","signatures":[{"sig":"MEUCIQDI604RnZtvClIa++xD4TiNnBnk5Bw7dllmmCC5Fa02BAIgefPa+v5WYvG6jDs+Vo/M2kFIRmlkBVCnjdDkFgHnbdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nxCRA9TVsSAnZWagAA+WsP+waDZtPCcOgEfM9XTViJ\ntG0aatq0GTefaGlRP3zBpm8QBv/TdX9kODfR+FtZ7+jbNZGKv23OSoU7uXTe\nOEpdpjaDIj18KWeWGO8ctt2wK3h11TqRNsdomrsS7ikLIq8NHJLUpuVD4b0x\ncxWKBN88O4Wu+A/bkvhjCwe5y9Zd51ugWROxpDGtD/lKkFpcd55PPtTy+G2M\nvOJ39RhgAKhq0omIKO6u4Uu+TZb7QiKjZfj1tvOIHC1qjOO6l976uS6bgFJu\ndK3Jf3dSCGj4BqJ6Ul7k8AfyQSTvaCxcTfiI+iB5cOyDe+NoQieK3yjMJ5Lg\nC/etJsN+ZKd1GJG0eqtYRFJH/FUbysda1n+oH3lkR5yztvKEttyLBM7YBM9S\nDxBdtYLb3XGRRFEM3dAE5ZHQC1En8zypYqFrCVPB5WhIvuRct6oYyrsXw++d\n8wRY9MziERt5F8rxeSykMy+9umUl/9ZCQFPTQtfNV/lnxop8j4uquBvNVLwz\nq0IQ4Syv/N4fd+1pobqpovZsjzHjcWMpPSNqMRqW9y8EFY1dgj8x2nhKceyP\nrpf2kH+LartEVpCK/WDcySFOL9I9jblg8Wnek9JZ6GT7pw0dXCoWydXxHCB1\nDmRb2Cr0LghMaATH11LDgwIPO+kgMvTIIOogMfBvx2aa4q/4fOXhLFbIxL/d\no+DQ\r\n=V9jQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f9dd96ea7afbac37dca91bc879dc44ce4523c442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/rtl":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/shape":"9.0.0-canary.1fccb1418.0","@material/theme":"9.0.0-canary.1fccb1418.0","@material/button":"9.0.0-canary.1fccb1418.0","@material/ripple":"9.0.0-canary.1fccb1418.0","@material/typography":"9.0.0-canary.1fccb1418.0","@material/feature-targeting":"9.0.0-canary.1fccb1418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.1fccb1418.0_1607444976539_0.2908475025845352","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/banner","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.afb68894e.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"187826b9d8b4c95e491e58a4f31ea94e75769ec0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.afb68894e.0.tgz","fileCount":41,"integrity":"sha512-nNrzpQQh1SBGJ22hgXnPjNmrp2fiR9LLSHfHQs/Rn/QH+rFz4q45p9fguYDg8gMGgnyz7iYCjkaygNLL8a4dSg==","signatures":[{"sig":"MEUCIQC74agukMGnKVeNVP00KJvNC5ZY/mPjUWBgeAbmGixLoAIgKsQQWRdfj1eMsHJS6dS7cMrXBCVig2oCKpUuDsp6SaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6rhCRA9TVsSAnZWagAAWMEP/3fhRfHNLxGC5jltJgl2\nuQtDXg960o6dUhwWJt1r8dweI4gpcwZSYN5ITRnkhvvRfuiPpDtjh0wzJsSZ\nZXUjqSyvqmDMDpI6WDTCt1Ix446BsLLdKsAHwtH3cL3xJ6+VLMnx7rDkv2xX\ntuMefO2RqD0uwKEIEo7yMOhMf52z4LI3Ucz+0GaI1LOXqPcCawYO0W5jMhCE\nn/7HgF1JtcIbzNIheaWbTgilCnek3UiVklfYC4uc+V/3Og5MDiUHDMO6frJ6\n6ZNgoLMeNhw8I5FSNn9mgy1/CJWPybQIHYoJbEEOJyHphnFQ2cwlTmukPtUk\nlk6Dd9YPZvo7G2A80g+yfCevnGpz6RQ8zfDYJWF//0B7eTJ1CIhY/2BmKVd1\n9jMLA+eErBVjtWmwiwxSSZ7o0dmJEFKB3ALuI/5YiNipdpGbcXRjQfls1Z1B\nU9jT2dKovsybVd6X71Jln6YOU0bP+4fM2ozFtO8sVO1MDowQMPp3w0SMBXZ6\nX409Ox/xQximBCws6Lv5FjZ0Rl2l20Fw+xWgmaqMCd71ZgtXjfvsK4iwR66B\nrye6Xv8jxvHRNn7XjbRgNFYel9olgRUeJSmq5HyScB/xDybOwqQJpi81SHUY\n37xJTSWCpOxeLcPNf6fdoh0FcziXhTu28Z9UMTJ8GvTFgBzZrE2Lp/bMWqS0\nQf+y\r\n=vNDX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8a3ec1a501083d67f1c342fcf5b11a765a586ca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/rtl":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/shape":"9.0.0-canary.afb68894e.0","@material/theme":"9.0.0-canary.afb68894e.0","@material/button":"9.0.0-canary.afb68894e.0","@material/ripple":"9.0.0-canary.afb68894e.0","@material/typography":"9.0.0-canary.afb68894e.0","@material/feature-targeting":"9.0.0-canary.afb68894e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.afb68894e.0_1607445216890_0.18877050776317583","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/banner","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.fd88d40c2.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aba8815c407723b8db18a29a97be18030fbcb0fe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.fd88d40c2.0.tgz","fileCount":41,"integrity":"sha512-onPxNA9bZyvHxt4vJ6UutkBxIajeGLWgdGO51MyZp6392B3EgC8wY1Dw5/YobsH4YnAU0R+qy/WPBqr17ctCeQ==","signatures":[{"sig":"MEYCIQCLxZ41VJUcB0xF3WKl1J8jTxh96iKmsUiKozq1rjEYlAIhANZsTsI+sLnI4kFjJmPwGz6ssqOqJXx4lUT5O4dqvkla","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz64YCRA9TVsSAnZWagAAKVgP/2KiV58B8DZTYm2xu1G7\ngKfbYj5tZkGHkX717AQLLWmyItGOlHg+5IjniSprro1pU+mdbpX55Ggssnle\nUf3PCxRr8OIUlQmrx83sQRHmlRyjWca5dv/JaTUZbq2ohjA6eHAtmfUurJl6\n5fAClL4kT82IVTXyTWy5WE2dh/JOB/C4YGlVAQQx0jtGHH0rhAaSsqdvmWlG\njnf9WkGhgFGxIFk+mh5bjZsOME0KkjxNzZT7zpVz9WYRF+IMLM1jiuWVZj6U\nRamCf6GX8YHz9Ip1hssbcu/eoMCVbY6TDnGTpQjTvnDe6yn57HOIzsCyOl/f\nZyVd6VT9jzvOHjD4TIEUJJ45J24NcMLrFd6JIj49Nzb2IiLzUAWymy1VXKTX\nd9tyRnitaHZo7Fo1IDd1C9+gR1mhY0xMZnJnvtgrNu3mNC490oWRwkj0RrSo\n9iuuDwYnwpKKhtEY2/p67XE4LnUSK1ZX4JbKf15qtJxaZQTWKDbNaGGiWHo6\nQWPuXoS3COC7ae7jtDkZF8B6CGdOzaOjs/rJyattX5otune/EuTh+0TlMcPr\n5iKU0qITG5Q60hlVS6yGWce8uWbDKyZP+48Bt06wRG1K9No0OjwxhprXY7of\nWH1yPQl6cQSJkTXHeInzL+8RoaROHIZ2Pech95iGtJUTXWB2brbmeShpJu24\na66y\r\n=oDhD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b0f8299700bd0ac44ef5acfdd0234b464d837131","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/rtl":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/shape":"9.0.0-canary.fd88d40c2.0","@material/theme":"9.0.0-canary.fd88d40c2.0","@material/button":"9.0.0-canary.fd88d40c2.0","@material/ripple":"9.0.0-canary.fd88d40c2.0","@material/typography":"9.0.0-canary.fd88d40c2.0","@material/feature-targeting":"9.0.0-canary.fd88d40c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.fd88d40c2.0_1607446039846_0.9784554725547931","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/banner","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.ba9e3109c.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67bb5d1a6f2ccceb75ddec34ba22b8cf728efd0b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.ba9e3109c.0.tgz","fileCount":41,"integrity":"sha512-qGp7cgo5h+u7F7abLCtXJq9C/GybPJoJITxXpQP/RkneQT8azyWaogoKhyw4m2Ai1AjEOenXPvmCZOLgMzkWuA==","signatures":[{"sig":"MEUCIQDLV2VRfnp0ln7GFgSF0iVcSgUHPWdROvzI6M7W4ep6dgIgaKkfjtgK7iD6IKcAoHGsedXrYMitJXu8JcUIajTiTkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz87FCRA9TVsSAnZWagAAkzwP/3ttn7PvP7c2q6DWVcHf\nd7jwHX77YyHicDhiEecYH1GDorbMPVLkUaimBpvXSj7eYNkRX9dsvcmIOAj8\n3qxYnGa9ENxBCrVjmEa+18XL7KY7fEvIARVKnGu+6KT+FfTZQqL9E4x/GqBk\n9qRfG5kWYieYlOpsTnAZ1z5xKhEZd+cn5sxvWSKXMmHPfg7zYS32Zs6+29Mc\n6F26SAkjf9w5iASonhqbfNW9hcmL58Bqdp+ZLLJ4BmYhFB+cbRVAy89M6QcA\n9qLE7qHsDDtNXBm826M2eAlDdmUQs8XH7HSD022igOFC4aYRRdmSEBtlE/xZ\nsSDKYFp4DV1o/JgWDFS1BbBncOvB+qpVY8F3UQvmiE/SUSKvZZsj1DUdxqpn\nskLNeczTBVsHHCPtcJttjQk/i7xiwRSNko9ogeiNq3Pj5NDvK1JBg+yWwcp2\n3QB66dawCENZn4Zys3uwFouqFOt0oHnaXVvJbPGmy4Dg0d7hC9maihaPgDoJ\njK8mVbx4+vFPN7GRVqBcPskpAQTi/HkEImC7FBdGh0hSm+vSyQ5NMCHFOZol\ncHxrB/wg8IEvrqGyu5WLpinB2MIOqs4Pi7Py2AL4X3c1Uj/wenwHIcrcgeEn\nht1n0rf9sMEnW5qCRzb7MUzEyx/yp9JPkG+n+2661r0TNbad1XdD2fRYZxim\nr9HV\r\n=6+sA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"84bc4a2a193fb62b5721555a77b59e7bce321bd3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/rtl":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/shape":"9.0.0-canary.ba9e3109c.0","@material/theme":"9.0.0-canary.ba9e3109c.0","@material/button":"9.0.0-canary.ba9e3109c.0","@material/ripple":"9.0.0-canary.ba9e3109c.0","@material/typography":"9.0.0-canary.ba9e3109c.0","@material/feature-targeting":"9.0.0-canary.ba9e3109c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.ba9e3109c.0_1607454404621_0.9997460618484013","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/banner","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.1085c3b2d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cfcc1b3340801a757723feed62fbb5d1d668167","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.1085c3b2d.0.tgz","fileCount":41,"integrity":"sha512-deb6yB6KpDHoteGLiOBp6qWtmlHN0Hfqpa/STu3Qptas83tTY7LJkaMWNLIO/D0lW4WRdjpBQe40nBglWcQmMA==","signatures":[{"sig":"MEQCIBAheEQzu3y35mbu5iMq4rHSZfPy9qjGH+LXzHEGMxOGAiAfSiUCNmuKy20u9RSeOdQehRU1XAhTFluNIPM2Aw/GbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SGRCRA9TVsSAnZWagAAqBAP/1qWCG1qn5h0O0lC3xZ2\nYhFV6cY+b+lLq/1GfCGbc0jKLXxYz9JcW3FzlQrlJP8S1e7JRBQjWIrE1j4K\nNRLxTELiq453Pknn4xuDgEN2z0sRYKe04Ysjeaywv45NEfSjqd7YPtCwpZGj\nBZW+5y3mxKqvy9RtdB7wBGCTpP7z+1lbpfoGePin/7vgYCosLBsQT+N0LJVa\nPQ5aJbJwe3QGURHqAT6DlsuP+fK/iyX2ugRBk3UA260opJaGTSUISEQM2Yot\n3LBmHembTWXnJyv4hg1riHn8PuOTipeCQ+dSg6yj6OfRBZRsuX09z8omYMv3\nYIs+yp3C2DmWZAmGRB6lwJzCVCoVKN23SR2twEuJu45atqreysEe+05pbldy\nVrFBuGUICodxpudsxBWgL45hcKhoOvCSPqQ+QZjv2/cbA+aUDCwkZcbl+4aO\nbqDqUFBiFsGbUu6GQsZsx9ftmMeOaXmPvFwjFfA1b0vXxvJS7xRK6X44YxXs\ndIvcbhlap/Uc0RRNvByabRva52Z+re36TBXZIPdWi8tBfbvgqY/hC1DzP0e7\nqfuWwWo0eKf1J42mbb2yA070q3barIhH+8ncrqhLrFp9vqmtwra2AYlRsnyI\nogxXn1pznMsf0ZFiezbrEs8Szg9pnvfZ++WI+39OjzlKCLLzm7eMUlHZdfo+\nLuYl\r\n=mjZc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a223e0b83a78bac523ca498cc8389f361cd0f4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/rtl":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/shape":"9.0.0-canary.1085c3b2d.0","@material/theme":"9.0.0-canary.1085c3b2d.0","@material/button":"9.0.0-canary.1085c3b2d.0","@material/ripple":"9.0.0-canary.1085c3b2d.0","@material/typography":"9.0.0-canary.1085c3b2d.0","@material/feature-targeting":"9.0.0-canary.1085c3b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.1085c3b2d.0_1607541137261_0.3999737764465279","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/banner","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.c5dda809d.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfca395d2e37b7e132e08acefe04dbd073984e0d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.c5dda809d.0.tgz","fileCount":41,"integrity":"sha512-wEo4OFIoJC0unmZAcAWiRxWSOtKMoJItEJyKOjTBwXsx/bfF5MhT8JQV+kaoJ0KMy0BtBupvUYTLr2kGjSUh1w==","signatures":[{"sig":"MEUCIQC53B67w6OI79TPqye16sn/yh3fRM3GOvccfjy8IG5cmQIgFX6ioyEgUNIXMCr1uYdxk2m7SajJWhu8uiOtjXtUYvM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TjNCRA9TVsSAnZWagAAMbkP/0jikEHIWFndFs5gC7RL\nTbjG5ks1meU+molQJJ/X2QkjB3SMHJ/wjtKVIdclaf+09iHN8qN75RB67zSh\nlGyZ+vHiHgRvaJwfkzTIai3dlpKzxJtO4Fdyy1/mOiAR/oLeHVsCwVvNDdfH\nULAMDJ5QNYFrJTCaoDA7Ld6YJgCKIWIlEFvLPirhUS93TOn2ExVbr1R6Sskt\nJv4S6doCxA6/kUJJ9CqJrCiYUpelFJZPrEU4DpnWSAzU1RyfATxN1XIEE6Zp\n3CKqAbzOqO1vH5V9AG61zRVjMFomd3bbWJ1tuObgF2vhKMV53L1CEL6eRrXN\n1lgLRdOFpW0Qbq7caJ2hmAeHFInsnV5epgEJS7OYeEZh5BFRsiGJjs4T84Ew\nXr5NHWz5Jz1vKxzB5RsTWO27GP5HsCXgXbC9goCpRAiBn+y3x3xRTRSwFzwk\nHZjk+Jgna9tYRdUuBYYJiFszUvokOyDCZ3iTsMP7R5CASd/0LGBFb+/WkCVf\n/oK+tKhbg9nhPhxJ87fzcrD66elddwdxLvNlgLMPfC4LWL6L23FO/qeUrJH4\n9yTmtUIdf0gOEoEnhEpl/Z9HuYlHRvSMcVefcmCV9jecI1Lat3VJnQSmnly1\n/nAbQBkslcAf2r0UDtoVgeoXa9OZdvjIs6X6LfWa4CMNLqGdTU+VzjbBoyr7\ncWh8\r\n=XXrE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c2bc7206e40f2f31377a09e53af457109018ff02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/rtl":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/shape":"9.0.0-canary.c5dda809d.0","@material/theme":"9.0.0-canary.c5dda809d.0","@material/button":"9.0.0-canary.c5dda809d.0","@material/ripple":"9.0.0-canary.c5dda809d.0","@material/typography":"9.0.0-canary.c5dda809d.0","@material/feature-targeting":"9.0.0-canary.c5dda809d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.c5dda809d.0_1607547084569_0.14946395151270297","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/banner","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.f5f1bd86a.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cab69c3ca0788c6014f38763627c1a4f74851a3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":41,"integrity":"sha512-ziEYffmIA+tQvn313uT0dnlTyHW8b/EaIHVKXJqzHsuicGw0SeqRBvsYzN2YWbl4lLG00zcDadl9dQ43J0Xl7g==","signatures":[{"sig":"MEQCIGhkKK7TZye34dWg/WZlVrjfCo70EMt/oyv0EvHx1TcCAiBpuP3Z+vysl/KObumr1Hq0qPONY34dKkooEupg8BTuRA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TzoCRA9TVsSAnZWagAA/BUP/jx31HCmz5GgGOJKRObL\ndDnFjoe57qPzc/VaU/H0snfmpupgV8B4XqJ9kpO/AsvRQM2GC3lCpWeF8Dwd\nTyTYRYhRSl6eX93wKXiVf+b6OeSaOE1AZzSuuPxwzc4GjbTzV412kdGCQuQ+\n/SNQLf74C2sz1n3H+eGGOQM8qlx4vI72gKc6K+0brQJu3Y9MXc82ATcISeLF\nVxzBbZmPZXjbDZOlZdaiMrh+pfc594aS4yV7k7ZqKsKZsqFzGqVI6m6YCjTV\n666eIYfQblVHntgBvMbuP4wDJzBOsXB51TtTx2sR+6C8+AHWWvA11x99+aUG\nfBwKi9iGNxrBWo5Lx99SrMIKBr5em9dFivY5yvrslHtEDW/1YqiNMz2uCzt8\n789zqLteJytMeVXV/En72JUpLLVFYA3ryYQgWDCITp4Vyr214RTT26Rqn5GF\nv/PAeqJy9OlM6cbkkxcCn3yli2fGlP4jOcxxtS8rjyhUaOqZamtUtWx2Xz6g\nNsE7ZaLmBZc9XmluZAu8kUiAoMyj8zj8/2auU67K0ed2L+EAh+zYLgqCyhjv\nXn045zNgTeDzaf83X3j+WW7PI26mB1q1YCOR2FmBDEb+GAjL9PARFslaEEUi\nbB62/ps9DQMfv/Zt0a3xp+1bhkXSg8+VolKYpJqzfsqt0LgAdbtKASq7Y00H\nlkyH\r\n=q8Vd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"86cb1fcac08fb433af0662cec8583dcdf435eede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/rtl":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/shape":"9.0.0-canary.f5f1bd86a.0","@material/theme":"9.0.0-canary.f5f1bd86a.0","@material/button":"9.0.0-canary.f5f1bd86a.0","@material/ripple":"9.0.0-canary.f5f1bd86a.0","@material/typography":"9.0.0-canary.f5f1bd86a.0","@material/feature-targeting":"9.0.0-canary.f5f1bd86a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.f5f1bd86a.0_1607548136465_0.1376919078884984","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/banner","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.00f38200f.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e43d4d5b2e4e9728d9424113c17097d5aa7837f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.00f38200f.0.tgz","fileCount":41,"integrity":"sha512-uRe6n3+MjDFi4FDgjvNHMhJ/9DxTjS350CQkSZe9yRaOgRlTA/ZvTEfNqXDyxjXc8sBPDzEUUlkBuTF2iur8pQ==","signatures":[{"sig":"MEUCIA/MpQ69n/VXN/C1JsXpWxAWX7jO0UIfkNFC6V+N5GPcAiEAmQi2hxpEmz0CHOkcNp5zMPk1bgSMG+5rkqEqvHCkGjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05SPCRA9TVsSAnZWagAAhacP/3s3Kb1vH3OCV0y6m6dz\nuwKcMzQqK1vfRPEeUVneaJtY7rS59GY1P43dIIXFkN3MH+ibAvXvk30EQ2Dc\nNz1mq6hg1gZWnHN8vwVU/D27b1j3yzu93nHbfSeqWJNO9SXJDTUBxl/8OpgK\n9FpnJ9L0EbZOB+l1skUPNAAhJ/ZfeZOLCN+dlZh8raabjrJ8lMneVh7llio4\nEXVBJvxh55YqOXwhLWyV47y+yKhsOen74iIrFwX7wqCMbXerYvk+R0B/MOkx\n3CDPjmKlZQyZHLRi1MmlS8gFeGKS9F7emP21ia1aZO5hLj/pZoeokiGKkD+o\nZAeutTg1/qc7eqnQXzqlNkIunWy4gzkVGd5o4En9QOuDctFjZobjFo3QjFIj\nQJ5GqRglU473nspvyzHWnNcaA4c3mHmb52tDRBZG+IGshVYtINPhq0rHwWWn\nLL7/CVU9a2OMnh0S5KAowBvJNDOcohq+lPhCBFFQu/KMRFixUxc59OygDCHE\ndCEBZupaclHmkApfZ9Kv4R+MsOc3bHOQIio+SkFUx4tvQIyiBMnmV6q9StwE\nWZBReoMsseT3TVitmZEbbRZSFnVmVXqTxSypq0F8PEQd6a/m/h5kBxBiXNGJ\nO146QV5oW1eMEHE5eHHtd5AyJZSA6bNYPD0s9m8r6ejbOPSSeA9rM0oF4MCg\nZeKs\r\n=+/3T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2771c0048541c1dde142fd7f565741f0dbb83c20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/rtl":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/shape":"9.0.0-canary.00f38200f.0","@material/theme":"9.0.0-canary.00f38200f.0","@material/button":"9.0.0-canary.00f38200f.0","@material/ripple":"9.0.0-canary.00f38200f.0","@material/typography":"9.0.0-canary.00f38200f.0","@material/feature-targeting":"9.0.0-canary.00f38200f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.00f38200f.0_1607701646598_0.5004354080412905","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/banner","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.ac41a5729.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e5916e3ced28b0dd1737c0cf27e196b26ef213c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.ac41a5729.0.tgz","fileCount":41,"integrity":"sha512-z0GCJfBrJskS8ul9kHDJlUfQPBpusPp4McQiXgt/EJ+90ADt1YpRf9JqDT7RfdW1KJTN62VKtKA4e4AX+YeEdQ==","signatures":[{"sig":"MEQCIATvS64ZaD2YDLvOmXb5zOwmdrVZEQ9cjmD+aJEqOjefAiA3CfAluHzz+KGElAH8r32nCDMh/nQuKeloq73xnl0DNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0555CRA9TVsSAnZWagAAchoP/0kfP5aKSEJCWNbA2ubK\nzzyaj1xH+dksyp6BSOq1m/J2/HwXKuYXgmo5PHmtOd3rr7WJ2cprfP3tgIU1\neIExwXotk1l0IXOBGvZAPUB2J8At4pZ8iO8yaRuLreHOPSnFjG1fj3w2DBvh\nsCr/zw2HpRr6QqRMOh72QHH2CGqSMC94+yf3NVEuyIiDXVshQwjC1MfeGrDl\nvWowcDLo2C2683rfUlebjIJ02/GvUhYsnBsOJIhAgllpYdZY0W3496ExGJYa\n0gfVCyK4XlQNZ0VzIL4h7ysUJicvU6ZR0dcurGtqTOHlM4ZsvxrdZwVwvivE\ndUzeF5gmcJS1xZga4O3nhOgJWKUWk36N8KO+VZ2arnrHfq9luaZj+kD0sF6t\nH00fsfDiTMG2i9BBV0kgCjU6BWy8CDlbQ3Mu/AI49NcswtSs1ic3+jaelIOh\nS4BVEBM+xwfWVbMIPnEkym06mWpdWv/+kcCRZxiyUSNkTdqWpFTgFl5w95ZY\nlbQXLuyTAhfcU9jg376TplkNz2ZIwQhWNeARSaUOFlKk+bQ5CBkNyybuNEn5\nrx+WnDDxEwOwG85mMiJFhMYwvihTOKkcn7igWnjzjJ415VPwgC/P9RSrxJ/Q\nhyN6Pb/N1uwHZUvg3dpdInVwl2OXHMQXLB1OUlZvDKNCNr/YN/a5r1tp+7D/\nryVn\r\n=hPqi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a8313ebe32ee1c67ef38d5e9ba2b5a4ee2d08f77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/rtl":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/shape":"9.0.0-canary.ac41a5729.0","@material/theme":"9.0.0-canary.ac41a5729.0","@material/button":"9.0.0-canary.ac41a5729.0","@material/ripple":"9.0.0-canary.ac41a5729.0","@material/typography":"9.0.0-canary.ac41a5729.0","@material/feature-targeting":"9.0.0-canary.ac41a5729.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.ac41a5729.0_1607704185294_0.7960143128667572","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/banner","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.7fe0e4f05.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d8be25b69c5568bdf8928a1b7ed4ce49158732b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":41,"integrity":"sha512-WCiETmq7HdFsKfhjY7vOD3dhorJk/rM9v2jlUVfdqyT/nZxet1h/f5pJLUxwx4Oiypvk+4XfDE+9yYrxkMM0aQ==","signatures":[{"sig":"MEUCIQCnSTIWH1kykUxPnf+hRj9kIss1HEWjwM55OfW9PWGavQIgCWKSUz9guNUzXC5Leieb9BehyI02/cAY7DaNOpkPamA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06coCRA9TVsSAnZWagAAGZ8P/1QeYztnb/8C5iNuTlZU\nh1z9jlhGEDYPwPZYEtzcZgYWx61lrHFxxfJ/frur65vudvAUWInz3ZI+QVGN\nPBWHyDq1sMEqKEGlATPZvpiSB862NZ6akrt22jcgBv338RU4NfoAKn+1OTdk\ncJG0i2SHCbG8zINqmlC5UGUWVhlsAYmK3Yk/Mu9PR7SnfCOW1ZeMjODZ/hIL\nNjcRIQA+TzPLgNCWggi+bwlBnuxPMVDIYTwedu/5kYcsNValwKrEIP6Qyixr\nyBiP6cK35NLxYLbpBqT1BBQoILrx+Df9Mqtiw+CjUYl350EBqVb+xJBFTnfM\nfcjoTTUVc53TcjC/7gz6vOTa/3vYbXpQA+s8FgIJhLQUIoMk/j672cencXyP\nvluMTVvV2fPl/KqjlEAcHtBD1xGUq/Gc2m/sfIiF9MORDrlCl9XJ4itKbzxC\nTeGkuRkMHxYfw9kmDOFLlQQIt0XZPfRtPZ1Y7z1arwpn16C/XGEiOzbt8CkV\n0c6t4YSlt85O1csBhYSrCSeODGPeVbZRcy5XaQpEB+DnoamCNRK4MDj0Rz9B\nWWjHdVhWhIRz27yaefZmYee9U028cIDrUzJmpVCvzv3Oho9+jcSyAtUSdaZ6\nRYDcKPNpmxW4TdVBQ/TJrHrsR0w2tSOcGqZKSDcld4GnqjbNg+nhjsEeJn0h\nJTck\r\n=Htri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"174435b67952da2f175e31e1db54647a2722499a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/rtl":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/shape":"9.0.0-canary.7fe0e4f05.0","@material/theme":"9.0.0-canary.7fe0e4f05.0","@material/button":"9.0.0-canary.7fe0e4f05.0","@material/ripple":"9.0.0-canary.7fe0e4f05.0","@material/typography":"9.0.0-canary.7fe0e4f05.0","@material/feature-targeting":"9.0.0-canary.7fe0e4f05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.7fe0e4f05.0_1607706408469_0.30232547080846395","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/banner","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.9244508bd.0","maintainers":[{"name":"taylorv","email":"brian.t.vann@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3883322bd49309ae7017431c9d7eb4d744528ee2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.9244508bd.0.tgz","fileCount":41,"integrity":"sha512-m7zChMiRTaV8Nbu1dutJT5GEy6yp+8PJwD0zIVG+GoK5W+v5twzUZT/SmyPgHZr/ZDIeIcLMm9I27n50vXh9kQ==","signatures":[{"sig":"MEUCIAsLI6FkFLXoAQQohZafXv+iLVoEjTLxI6ZQc3aD/C9CAiEA6PnUtZQPYHVJZUuObmzAqjsp7dPhmsVOqwzbIuQi4pQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08OyCRA9TVsSAnZWagAABkgP/1A3kl998XEzv4a+nTMd\ntAETodMK7X+r1AHNoLZvujIST/Cdk5mgXFsb05odMkFyNDd8UFehxHMXeX5k\nmdOMKPptZ5U5qQHixt53MBo8mFEs3OVxiI3uUidjsKW3BxkKZLi8VU71wEf+\nPW4ZVWUFsj7o98fIPc6Ri1SnWf14/c09RPGK5YI/PWvdnQsZPw1wtQiw8heA\nnDSWw+DUEd//ZPZgpx00ujjuvQpcAXO8YrYXqzNa1PQqyPK8v2QFlLroVSUS\naZbbDVfktjsgcAJx3le2OBW2n8YhiXMby8Kuf8gfjJZn6W5/LuU0FDQb1Thz\n658I+LOLby0qvyQT1Pnu2csbZgIqYZUhHy2ZuZCpewwjFD/LAZ6xL/AWaVsi\naE0SvZwgvvLZXG91Ai45iaBydSimOR1IhcIOfgp+FsEUR5CHb9MGstKm+rEf\nl9xpGkjfWCV5cnzJyakQUHIr+tMaHyP6gBJqeff117BFXy2v1JResBC58j0H\naXE/+tlqJ0Xa+LsQluzRwTKuCeLPUOi4y1T8CdN27Qt+pVeVMZgKoe5zZn1d\nwHlawiFa8lne41yXK1AFdtaru29ybe0ecdky1mF9GbyXgo5MAWIMFBntAOne\nYhQlwIXZCdcUbDqO3adTo8b7e3yGltSHkabU1mV4eq9CTfjBq7E7G2Sidb3t\nOTjl\r\n=D/nj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8d704729c3b4ba17ed088d900fb2ddfd57d5803b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/rtl":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/shape":"9.0.0-canary.9244508bd.0","@material/theme":"9.0.0-canary.9244508bd.0","@material/button":"9.0.0-canary.9244508bd.0","@material/ripple":"9.0.0-canary.9244508bd.0","@material/typography":"9.0.0-canary.9244508bd.0","@material/feature-targeting":"9.0.0-canary.9244508bd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.9244508bd.0_1607713714258_0.0065559336494769305","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/banner","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.384a8eeb1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d085d66a73e6f622edfcd676d8deea2cd3f7852","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.384a8eeb1.0.tgz","fileCount":41,"integrity":"sha512-6ykUbuCi7kjby1EJiLhG3cYfWf2+mXqmlsxR+Q8HrvMgeOCDTS5E48NoDmiz97JBbiR5y5jtojM4p769c/YTQw==","signatures":[{"sig":"MEUCIG2Gm6YOy6C3NwSsjUp7D8Q4opc7Og0JpFqJAF7bXCKwAiEA2Gt+30izo2q8d+HdmGGOw+krGvRk7OyEhIhELzjSSYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j3HCRA9TVsSAnZWagAA41AP/291VdQVseK+O1541R7M\nXTVBRGUxdSHhoINGyXtwhgpjZO1EzqKhHKm5RskzvrzkMPRAesCgOg4zdZx4\na3WnMIKEAkS+NIpH23KQDr/v+v3mIyEI23NZygcZc+xIgJ9jF9euR0qkj9yt\nQ7CoUvwY3nNKF9pig0mN04yKK2ZBwmAZ886Kat2iNXVgrizNcHqDgco2fH0D\nOBUN7KvaOZs78G+wxkquUYl+F14xyttAeUFjKfP2wYd/esBTAaI5qfTnobka\nj4cA7UrLMWoKXWsypd/PqdR5u1XCvDnqdrahHl8/cNy9c07pR0fT2yX0Cvbw\nkZCGD1KLEew110kWJYwIoKGUZbe+ti9h9nEmfxJ8G28MhGx1WEZVgqd22eEV\nKDkuUXh1jnXyqMo7DcHVWd0hEYudyPA9Mn30kaPcLUUOfS93dizuW4deX6+j\nzAnfGaTrFfgEsGt4Qv5mLFHFzZV+IfIJUwx51icdg0sRzz0BwO8ccWGeQlEi\nTst+eN7nbm+QHUkm6Am1GIlLFZPQ+w5PZQ0sgvrXBzGKw2DkkbU7B2R3aHZ3\nKPeDiTO3a9NWloXkRCGiusGseARZKHJgWnzG/cu7WQM3Mj90TNw3oi5rrevS\n353jnorn6soMCAo+p6zB+2sgR4wr+PenPI6tCZihtA2YAOjslUbuAuaIMMIE\n9dLK\r\n=STcD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"21b2ddce32077f19c001df17ebc3c8ca9c48f8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/rtl":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/shape":"9.0.0-canary.384a8eeb1.0","@material/theme":"9.0.0-canary.384a8eeb1.0","@material/button":"9.0.0-canary.384a8eeb1.0","@material/ripple":"9.0.0-canary.384a8eeb1.0","@material/typography":"9.0.0-canary.384a8eeb1.0","@material/feature-targeting":"9.0.0-canary.384a8eeb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.384a8eeb1.0_1608138182726_0.9017282375612918","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/banner","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.eabf9d5c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4650e6b4a2daa68b7ce93ff4353715f4ca3cb702","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":41,"integrity":"sha512-NPVdyrGPPgqZZ9RBMizpwzJgSJeN4/MbKJjoZRUsSp4rBaSO6JdXun9CrcB56WB6YWzPuwV33ZJ51z8jYHgc4A==","signatures":[{"sig":"MEQCICU3SZGFlDjiPk5KRQ68F2c5gJQZhlH/gzChtuCi5lhiAiAi7ki7EoJyVcax/Xxmto1GLsbJfLJRiQD9DeKwFUMKAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lHjCRA9TVsSAnZWagAAv5wQAJgsXwIn8cRzN+m4Mi26\nhsIQv2WRnpIQT5sEF07d8P8zFdLUWdLS3/zyqzCXfJP3bO3xNCbMOQmVJ/bR\nkN8lErM9V2NE4dVZuTZjkpSNr+i9G4X3XYZW3qeZIEXcj4Z0+GEslLFpaPWS\n8nmQ69jpnn9jb/MezLjfSnK/zBz+vSxM5oBFDrCJTxk5X8T9GBkqmI5Y8nUk\nV2ElvAqTrV8atkRtnxy6g0I572RBUCcWJMcmLxfklFKZCztVobH8J5m6pQ3t\nGnGa1g9JFSn0Q5heKjdTwt4egEgX7ERGzT48UGwGsUEvuXh/XQulV2LxucPX\nIfAnHeg13nmZQT5NMjbA5E1+QeiQL2vqP2OlH6ipYuOxRrkTcHMx3y/qyTq7\n3t9yrivg33q/UwXUSlu1x2vHMrQkWIwfDDKmeQUzKU+dX1cikSLXjqgYQdCd\njBoK5FtSOwFgWhkm4ljoUxhPoGmjjWWPw5h6esMP+aUzzQzN2tRqdOGziKBw\nWukankDODHK6QzU8JUlsu451o+xqvePnH92Me636TVEJVCRchxLHNxu9jK2T\nn1ABkRzpBeLK12ZTH6oLOofVTJwQ/cPXC6BFZTFe0jM3Jl4ehAsaJzwg/eUf\n5+JPx9pvSyCQuGWV8oWSN9y1SroixiXLUKuS+3YUDUE3enliYabVITCjk93X\ndJpz\r\n=gO88\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"78b3a67c04374ddb43be73dc4daf2613746d08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/rtl":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/shape":"9.0.0-canary.eabf9d5c2.0","@material/theme":"9.0.0-canary.eabf9d5c2.0","@material/button":"9.0.0-canary.eabf9d5c2.0","@material/ripple":"9.0.0-canary.eabf9d5c2.0","@material/typography":"9.0.0-canary.eabf9d5c2.0","@material/feature-targeting":"9.0.0-canary.eabf9d5c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.eabf9d5c2.0_1608143331293_0.7971135463801218","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/banner","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.30fdfd06e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5808102adc13a7fc28fd83a07c9a9cb5ab7a1dc5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.30fdfd06e.0.tgz","fileCount":41,"integrity":"sha512-adE8aCsx+iEP0iOjFBHcTtot8aqh5xpxhMO1CbKO/vkRUtPMlgP6DQaF52XIYD0L9K+pExzE1tBYop7pwWpLVg==","signatures":[{"sig":"MEQCICTmBT2fxx7lbLfRvheSm7+9IFJlBFJvH6e4Zgo/m5+yAiAucV41NXhQtK7HQ7dtAztEfqS+dWLUW7+j/tGWH9rZug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2ls+CRA9TVsSAnZWagAA0P4P/2FBb6LSp9m8qoKm4mmk\nVMuzWWThJ+DQm5wjpJyhsOF0iRw303eWZwt5T4nKGTrv2zar3rcwGYNVzfRc\nbj4Fy2472MdG7accH6BebYtYxxMJLMa+qlihVZOF8BQPo+iTDF3MzwDcjylD\n7JIjTbuPDELnsMD/dfLFwi5wSx9I38n7NaCENK3RYxcVbZnSgJ6q/f13r8eb\nB7pnCn6DJYkBmdsQdnNYwnyJr9TyeO0FvdZQRE87RJWwakmxw2Ez+h+A308W\nKaQl85IK6Hp2rgD6meh/q5ppkx6/WxYVOgCjTAlr/kvc0pD94iDhLrwc8ssp\n71YbOu34c9L23BHoTH9XQVP5buF1GXq2lE+1ILVvJkYYXfgWeVR7z/6pLl4I\nO/MJDJoA7b3B5xkhp9YCIJaVmynaptNLw04fyGqwpwGEY18Uqnm0p/VvoSDF\nL7jdO2HIcFZyGnkGY04jQaAs1Ac/lPYRGkEUxRwL8KBbTkIj7zb8VnE4rLc4\nxeCdQdxj8ObLQ9mIjQX0c+M7tmjebO0uaI5uOgaIj457Vf8zCgmClI2GJcHA\ndQvTKh/mVlNUL8ei4kCBSQR/hT/w7e+RCNzdc3VO1IQwWvpUVs2O70AI7Pw1\nVQV1vGH9InnAd7/uFprUdLx4kv+c+NQeEzlpTf6mSyx6nGMkkhFpxGky8K/O\ni74Y\r\n=hWza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f9c9fe091a06230b038ac8a71ccd652c7c662b96","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/rtl":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/shape":"9.0.0-canary.30fdfd06e.0","@material/theme":"9.0.0-canary.30fdfd06e.0","@material/button":"9.0.0-canary.30fdfd06e.0","@material/ripple":"9.0.0-canary.30fdfd06e.0","@material/typography":"9.0.0-canary.30fdfd06e.0","@material/feature-targeting":"9.0.0-canary.30fdfd06e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.30fdfd06e.0_1608145725634_0.6034603085603072","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/banner","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.9590a8f90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"334d5de83000402ea276a5e0bb11f5b8286aff0d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.9590a8f90.0.tgz","fileCount":41,"integrity":"sha512-spf4K6Zqr4LwbNxvirGNA/WixzQ1xUTx9iKpbwuuZQI17VBB8PnJ5HLoFl6GPV9Kje1N6KU58oesKx3xeRicyQ==","signatures":[{"sig":"MEUCIEGKZd5ADpvcNS5Km61+LiFzL/wgzFGOlpPiGmE5E0cHAiEA5c/v4+FAUUpHAs9x8vFdnexMFfCOTM4kndj8bB+WpJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jAzCRA9TVsSAnZWagAAphgP/1zn8ipseWv1OecxKLj1\nM6RtEa8rM7ZgOEMkF7f9+APh15ngx6jocQlf2GrzWSuVusq60/g7CeK4V366\nWWDMWedZvlzpxGaAT8/uJiPO7uS4vdcEIhZqhvpwFvGb1SCfOcdEiyopGVxi\ntDFXBX+8YaALRCaUPjmkgWIdushpYu05UYyLTpTYzr/lJ7H+tTWVe7QdsUhD\nc9rZU0fcC3w+ye1B+tlGbLWU694KDbsBjtns7zgT85UjL9+1HVtjwcVcZhNh\nE7exLkFfj22qCBFe6q37ovEBZin1MqB+OkbrG+1oAf0hM/S6cjVg7Oji0kG6\nhAxkqJwUk+nifzgCztCp5la+qyvNNLLzdfhKl49nhUA2JgvkammE3x+/bVMh\n8LJ02+t0ZAbxdLks1XQKY/SpvBYDOBGe6U/6TsyNIxwuu5mKWVieFrYYyx3A\npAIcgSDZAuzdVdKm5Med/mQwaJu4piTtGqHAuzSFnKFw+ZiHEr2e0Z3K/3Yx\nH4eZnA4U74mt/xx8nDJ12EFM8DyRuK6ldqXg/ydkxrrBPfE0nIg1LvdvDU11\n26suD2yUiGyINlbUGrIZWm35pRrSbdrjTA87Hp6sSxXgiiPV7wmoI8qIs3b6\n/hgjKZB/AmgVi7g74cCQAf7wtGVfMy7ttzC+QvGP8JRcV667oOdK747nkZfb\nmejj\r\n=Hf9o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a592a11a03887b1e1535d4d49ea05db1b6f72789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/rtl":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/shape":"9.0.0-canary.9590a8f90.0","@material/theme":"9.0.0-canary.9590a8f90.0","@material/button":"9.0.0-canary.9590a8f90.0","@material/ripple":"9.0.0-canary.9590a8f90.0","@material/typography":"9.0.0-canary.9590a8f90.0","@material/feature-targeting":"9.0.0-canary.9590a8f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.9590a8f90.0_1608658995065_0.6191407044137516","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/banner","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.f89d8b8f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd6e5b84b9f8a9d5f928ed934e48a9a0b1465559","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":41,"integrity":"sha512-XCk2yhOOgE3sDzIiJodrZlrQyeyOIZ8b8Q+pcn1iI6aEKixCFz77RtvKFV+iY0GsEqF5JCK4nn3nK8ZMUPnWXw==","signatures":[{"sig":"MEUCIEOmSU+hQMMSa0djaT8/fJalN1WDveby3/aBov7t9BpcAiEAs5c4Bs/jXN0G6HWg2O2v1gmwXjvIJx7C14y5TiUkL/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nv0CRA9TVsSAnZWagAAFikP/1wpv8Lx55ZgY8chXFsj\n3YSLtcc8Hxt1nhiHWcUumF2UuJKccxuLwy+TnAN0NtLbv0IwxIT7BvcZXmpu\n/03KFg4jb5oPxPZlpZBnuZacAE7Ev+zv8uBWN3oRbej1KGhBDsRN6vg7YGAC\n4xpaLJ0WpkZPimakxoWpGJ8Xd6T8UD6IPOQ1n0ip4LwNJ7u7QrYmejTkPOeI\nc6xg9A0CBso+xGHLNudW4GhYkDvqvvLRwZN2k4bcEQDa4wbPxat1GsIWqe6l\nHzMt2uU3UrAQDpGpqTCNxqFcBFMm4tONtthhKkgFE41Qp+LtbNZ0mrMTV5kK\nZWyRTYr+dBmnOTss7R56yjn7f3fYPIDLaq+ZePvACxmZ77aaHzLDaCiGji7T\nEpx8iKndSPLZyR9853CUSYKM8595rxXU+aP3XUAZzdk4trK0QVzrm8gPqaIr\nRJtq4qUK0Sbbs0UfQbYd2b8VoIa60OiIPqrIMiCz64jUkf34eY3CQAFK0G9S\nq9fu+lfjHh0dtX+poziHNfSL5cnI+pkto4Kr9+6/77N/LDiBD7STrdl8LW0o\nO7TJjblYeolHs/YPVoBYEW6IqTlFOYujOi8oR8GiZ3tKvTb7mJucZOLk+vHV\nHUcRWCU9KGVZ9dY2bcK3+8u7l1k+Vx5m8k5K64e4Cd+RRPeOW+kS6aXFDurZ\n+hPe\r\n=GWOV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e0d61155aa611a1a8573762d75379cbb25d2e7c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/rtl":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/shape":"9.0.0-canary.f89d8b8f2.0","@material/theme":"9.0.0-canary.f89d8b8f2.0","@material/button":"9.0.0-canary.f89d8b8f2.0","@material/ripple":"9.0.0-canary.f89d8b8f2.0","@material/typography":"9.0.0-canary.f89d8b8f2.0","@material/feature-targeting":"9.0.0-canary.f89d8b8f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.f89d8b8f2.0_1608678388323_0.09978170693832311","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/banner","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.fb194dd35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7aeb8a697485706e11a38b6fade0c045bc45fe10","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.fb194dd35.0.tgz","fileCount":41,"integrity":"sha512-Ji0FQeUACwuKtnXTKic/83Jtc5ET4tzxmn+Icp32MwDoGMJGyj+snvnBdvkWueTdSdvxkoGjqrene8w4knoZ1A==","signatures":[{"sig":"MEQCIE5r5+L6iY/kqM8kmnAVDzvJKD8/hXecmEd61XvgGAOIAiA5BCdrnLUQIWmGZQgx/+OXiEKzNNV+zTWBq8Whh3E/kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQ3CRA9TVsSAnZWagAA4LgP/jTrezn3dL+6kGA8C2OV\n6L6RR12TZ99GNEbUbF3PARzWG7No4SDd1oKyYuILDI2xWCFhQlYzoW7c1sIG\nbhMAyZG3TXZEskaCPhDLuBVJEOaWofi/ixPnQbYZXjtCJZxMZXCZWVlPtkps\nnRlpcBygk7kYFbz7MDr6TF70rWmrElEXR/CZgzzcY+qkzkiigeJ4E4lIAF62\n4Q259qaTLrNEgItuARA4gE3avBKLB+yBufzjTgNiJ3TKDJd05YBc4ZtyG2Nq\noCmkbFMYH+gS2un6GOik0dYwlQcCVqiVIll0ODTNfWNzsrsAQ2aUdI6xzFI9\ngrFxYusb1JqMZL9lYGStCdkVPhWPss/+lJCknMVFaGReGE0pcLVgJKRcb1a0\nAoXbARAohlYsF9AvWQS+KbhnNNM79CP9lbifztG3wI8olqfMGFcMztrM4g2P\n1u9PEhx4B/wXgLw0v9/O4mt4ldbp5Eq44KeReMXoq6L3kp6q9RzW7VmqoiGp\nS6RpXpvhFGxpYQEtCrLZqhdkmOrPs+W2PFRTGgAA9o6hf46pvrT1HLmWCaLT\nOl9r/ZUhgX59UeTI4LukwUreNncQnHuviJVfC6BBmEhJuKKpR9kEc16Oh8qE\nQqOpi1bYSq8l0lBc5HWQmnqxURqm8EnJc/EEKGcXlWCt34usw1pObeAzjEoA\no4R1\r\n=tfj6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"57a5b34de1026133757436905fc54dc5b326d3e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/rtl":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/shape":"9.0.0-canary.fb194dd35.0","@material/theme":"9.0.0-canary.fb194dd35.0","@material/button":"9.0.0-canary.fb194dd35.0","@material/ripple":"9.0.0-canary.fb194dd35.0","@material/typography":"9.0.0-canary.fb194dd35.0","@material/feature-targeting":"9.0.0-canary.fb194dd35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.fb194dd35.0_1609188406968_0.30648464888047244","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/banner","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.64f36e287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"574fe16e99a80c073ee638451dc28407ebccc73c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.64f36e287.0.tgz","fileCount":41,"integrity":"sha512-66Zn6pVtZoju18eGrm5C5Is9vvJ5EvrqQ/Y2XDqaqHWVzXp2A6aY7Cxf42gU3nLcsYzlcXEkZLk5yvwO9yoIPA==","signatures":[{"sig":"MEQCIHhVm3pb2oHq3j0Srqt445HZKus8El+pD4ZaobAzditzAiB/mYvWyoApw421/B68Ek7okecwE/xjSBDFE6ifYlGRaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmYCRA9TVsSAnZWagAAS8YQAKR8L6pc90P5BeHrKKlQ\n/K4EU+inSrR3+dQxgghI01UbCO3zKwOHPSoVuaqevRgtYB6fkVbIux4xabp+\n+jk4ApxsHptGmpAae9wVJG2mDwjzRSxKyRBoaWQscT7YSE8Yypec+0eK/uCX\nZ92cazhQqyzA3cj11iz+26/eAuqNpVxa1iSsLY3tPeXhg5jgY3Cqvw7IszaW\nLY2uvX228jjiC99i82ZBhl/1uBGssuV8pxRGLh1sxNrnCFb+BGK8HcrbaYHG\ndeYWk9pTMGwmKCR/UMmhWj3W4ULcoaIyvhYkhdZDBI30gkDeE3bhqh5s4X6v\nXlybvID0h8XIarurSer3V3SOWKUKoFT0D7rT3clE/yfKsSmV7uDtn/XMat0t\ngv/3QiqV9UuWCgyNpoOpK95FT+Z5uGoxo1eKpLww+fSna2LlQCuzYlylFmpl\nOrDrwWJVeMbSEvIr8ewCULbMHVJsKocefMu82UArgCwrlKo4JUrDUac5FUtO\ng5lAfEKzC+VceEpDoAyLOhnMjY9f9v+MwfhbAM49STg/7DhCk9BugWwBQmV/\nsNePtdqQjObWFUU5ojbqQr2vU28nNJnNepL1j9M+j3DYzENkxkiCwdwmtERL\nwN0McgQfsUPiTiOKv+LgGgX8A5Q8iJb+dZphhZdsqK1THoZZc4Viuik3CUQN\nCatD\r\n=Aihb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"23f6770d284ec6c17b1aad9913827f8d456418f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/rtl":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/shape":"9.0.0-canary.64f36e287.0","@material/theme":"9.0.0-canary.64f36e287.0","@material/button":"9.0.0-canary.64f36e287.0","@material/ripple":"9.0.0-canary.64f36e287.0","@material/typography":"9.0.0-canary.64f36e287.0","@material/feature-targeting":"9.0.0-canary.64f36e287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.64f36e287.0_1609189783620_0.4383546934791607","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/banner","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0-canary.b7bbe7022.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"065c49eab551289fe60abb8d28c4906a66816dd2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0-canary.b7bbe7022.0.tgz","fileCount":41,"integrity":"sha512-BUQdrEoFppnIU7FPqQQEADH8GUYKo0M8VG/7QjQF5KE55+HONj55aCYvnTpv/cu6JRAeMsWccn46KlRYseIiXg==","signatures":[{"sig":"MEQCID5KWuL/7GRtUyQGVTXN1PfvmLhYZkpQt+M/lKUYG+wzAiAimWZqY6mYprL+pal0tizxwsyLO5VpFzPo3Kv0KT+VGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63ooCRA9TVsSAnZWagAA3KYP/1ITgVIOksidrFprKg+T\nzFMNGbYT+9g2e/9+WzIpIoDYE1A1YAlZcJ8RC9Pv+/2PgamzDhHfEeAeJQTV\ngGeJn39n5f7NyDMnLuNj1NDbnEk1R1z+1m10cxNEbQ10t5ILrJffmJzeTVy9\nqTT991C6ylTHf5ezGXb75ufGZRnMLmw/4l3m/zQWyXO0W7hd6yHUwK/Ko7T5\ntBgE/pZyZWjeLMICKC0NPpXewCrIJh4EC80pJskmru9tDZvkUnJFg8cbCzIB\n/sgMvnW9uOUVFmhmurNqpKPuEWw8RYNcxm9q5ZhnShbIEgqPp/PDsH9XK9Wj\nygr/4fDeAnUzU/LE62/ARBYlA0iKTEg902ah/UMCs4VZ7RB2jH2r2Jd/WaMb\nceufenzH08zVIFKOdEQuUQDWpXSb1QNCs5OpRMMLR+VpEIAYOsidF0WU3qaD\nAXPLbkrGGLdmBEdoSM75ne2aZMIZmPUVb7o6hA0mupAEvBuwBllxOnCtKlbt\n+x/d3TF+859+M057TfJadITPFEKoy8+dytCYTlKJ9tghPpmeVCebdO+0y101\nJsXygWUg0ajuYY1vRAfafgMYP+GLoEOIttUbAEQONWn9x8eMGAuwZcFeItxq\nFJcCeQnBY4mYYXuF3bXMWY/ytTJDp+OIhnJbbQdsJpQNvf84UHD2bDd3QUyk\nVSNm\r\n=wqGs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"81238a3912ea8bf30c97b0318ac2ce65f297eece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/rtl":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/shape":"9.0.0-canary.b7bbe7022.0","@material/theme":"9.0.0-canary.b7bbe7022.0","@material/button":"9.0.0-canary.b7bbe7022.0","@material/ripple":"9.0.0-canary.b7bbe7022.0","@material/typography":"9.0.0-canary.b7bbe7022.0","@material/feature-targeting":"9.0.0-canary.b7bbe7022.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0-canary.b7bbe7022.0_1609267751700_0.17850151983864637","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/banner","version":"9.0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@9.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eaa28fc4003977d16960842cf6de4e7504a1162b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-9.0.0.tgz","fileCount":40,"integrity":"sha512-CFXfjYqUS7RWNxp9Zri99puLmmKP1+4DIO8gck71ZO0n5e0FZoTMdlMODW6Xd13p91np2ULTbvN8pSpBvWUHoQ==","signatures":[{"sig":"MEYCIQCihU7indpDH1hHuF2YYdDJ2Gc+bd7UVna9Sl+IcQfsgAIhAKCW5xgeaSFtpe5KHUdAhum9NkP4NJpwfCzIIJiQkJqV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64fECRA9TVsSAnZWagAAnw0P/1A0x4STFIMThAq6eK7z\nLcrAc29fQQ1rRh1a4ZUY9iYpHoSzMwsWKv0y88bmdNR8AAa4zDOULvUqeL84\nBiAkmOWhg9M6hX2hnbeidWL/kwGdVfiNeH3zhzcN0ohAT4JtzO43e3usIayX\nEGNs6zsq/pHYOx8SpAsOR9rpo4rYG+ondC5XP61WoT067+aq0t7R2I0b+ybv\n8mi1AHnLUR+8PRuS4bmt3v5dtJCXMiwrLyWhxidV/DXnHe8KKMrwRZbW6cZe\nUbqbKC1zFRgd5oc2QazrwZDMozfh/nRq7NnjsODZy0KgUlaIIQpmkN178SCX\nHxbcpCzqTdt9mIpT2XLMpDtjSpQrAUKlQEoHmKV1/AK20oS1zttXS0qpiyHI\njLu9T3x5vhEFqIYeThJhFFO9DarHNiPIdjQI2OkD3yYA9+fYrv3nxFLspzrH\n7nbnwlkBp9FQ3860q4m7IGTSLzwWiCVw/7iOPO/O9gue/4TeVSHiJRNfZq8o\nno9O/HGtm+wDqeUKChwYvxmYjT1xHX4woqRMgfRBnh0mW5eKR+tMDTiE4BTE\nO0PwPlPzZ4cR3SX6IPYH3uEE8FottYQym1LNKM/cnCuHG+qJV3jd1qbs3LhM\nadGj7a+SvXRbLBsH7Yapc+b0kCfo0JamotI4s0u27sZlJBw/O0L8V1UTY6Ay\n6Ry1\r\n=3QFf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","gitHead":"555aecce59125bc3f162b065dca47384bb5822b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/rtl":"^9.0.0","@material/base":"^9.0.0","@material/shape":"^9.0.0","@material/theme":"^9.0.0","@material/button":"^9.0.0","@material/ripple":"^9.0.0","@material/typography":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_9.0.0_1609271235959_0.5947174864761351","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/banner","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.776c18681.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c47b5a39d8eba48f7d3ff1ac1224ba8e867ca8a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.776c18681.0.tgz","fileCount":41,"integrity":"sha512-qlBtFHkwvwxIPdh6oCFhkZkICR1l37zvF+vY/LLtkSfRGgrXF/QyCsZ7YEwJEVCadfJigLvyS6C3E6SurUQuEA==","signatures":[{"sig":"MEQCIA8HzUe7+ifcxnPiYb1tVBDGOI3lpVDUhocwqncINOUvAiAgkRPdFMuXuAWGMoip37rcCVtsXvfrp6yCUmC1AthTKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68yzCRA9TVsSAnZWagAA/O8P/A2SDmhHhyoG2edAhFIL\n19Ft4dh57hJKO4g/NWP5uNuBMQH9bAE8k3VrZZ+nGqP0et1hfzBgM5oq3Hby\nqcrCY2JiP2u3JofONKpMbWh0YxfRllLgSy85+UtLrSD5w2R72B9ne2pAx9IV\ntOFafmrT5vsscsWOIXqntMC4aB2gBCmnCrr6pRGT8gAeZEGTLdjTFWC8ArCe\nEiuiaooboFFTRkSwpfxUeVNOU8vG4ra9LexDcmSbGnNZi1O0ePtxz2hAfCbI\nrzFBopIxuN16FsiNIuKxySBJvMynOs9pM5PTryOHtSJx+0BALr7rIOAdqPaw\nFdeb17z4Uar9VyvKw+5ScmIX7cmZ1QHphFmTWgnzFNF6ia1W5nqmf8JDBclJ\nDad/6jgq817zSRfk2NlIJf2VvzX7lU1VN3OqkfQHeOL8iyHyGXM37BxB2H0B\n4/EROA+Sz7ZLlF0brbn5dHtPNJCMj7Vf6w8w0bbB3HpzFVT3B6fPUA5sJK7m\n5VuYG8QZ1qRcytwpyHAFYrB4OlGETF0Xoq1wi34kD0Zr1wSiGX4vw5LZRK1z\nYEqzPajvhydUqZF94P4a4Uqq3KhXrXZdqiEPQyblKRrRvT2dbuDBpUQOvqsY\n+qWg7OWFksqyiVtdTYKv60DrvnhS5phQuuK9lBvk+sW8S86Rrg6KdmpnpJPn\nCtyz\r\n=jrxN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"920f8ec98e9709a32b0564a5334ae434137478dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/rtl":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/shape":"10.0.0-canary.776c18681.0","@material/theme":"10.0.0-canary.776c18681.0","@material/button":"10.0.0-canary.776c18681.0","@material/ripple":"10.0.0-canary.776c18681.0","@material/typography":"10.0.0-canary.776c18681.0","@material/feature-targeting":"10.0.0-canary.776c18681.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.776c18681.0_1609288883178_0.4471787273179755","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/banner","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.671d72d95.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da4285b5e324bfb6606a74705eb933c2af40b598","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.671d72d95.0.tgz","fileCount":41,"integrity":"sha512-FppPws8mO7nQBvyp+Uh71ykpMGheomWO6RsGGI8I8V0Vvcy3x0XPPGhLgcC/WvKRXOXxovSTRt5wXPdopF8OGg==","signatures":[{"sig":"MEUCIEJntrvWpUZw20Cr4j3e1aw99jzjgNUmsHJV4R9LBznhAiEA2q/ACxnJ1ZumFdULtHBINcGsulPGaw/l8hDvp71KH5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N9TCRA9TVsSAnZWagAAdRcP/A48hBuHfLmZN7mzUBOw\nCN+DPzvyf0jdW5arNrhZCaJnjOl26JdI88L67g/1pbSEyUKaXw7ni4XJPaxI\n98q1btE34ktaqtndeq0uGRuqupUSOgPIfUbewBW7FQEL2rE5TQwOnlcgzsga\nwq37LiZHpXhV04/C6fU4hf1SUVnfVHfPb76AU8z8c5DsfX4ZB9rmgQaUEZw4\nHqaKD/SKHBHY+lcceprSQS/lMu+OyCPOZi6/y5jPBa5rvgDC3uDW8NhKmYOW\n8YV3D/KmOd/dVFaip/VJh/pKPrrKISOiD4RtMI94c6non85Hdm75uNcXYanK\n/R86Zyn8LsTA/ii4TWYmErPf2dHV3LFtnHUzoIQ4JrXElCxUUs6ic5mKiOY0\n3Bk+Bsn68KM4Ja86C3PWyJ7PE4tDfFqXoVfXLQuNNleWhbWOYqFek/9/COC8\ntVo1TqzdgkpNZ3TO7hyNFL+wnvmVc03onPRXiuKqJ9vqoQlsdFCjK0YRNxxH\nTVWLrtV6YaqVoxeHNOBvyhFo7GT2qNcrphHowzGZNZjxDpvFq6citKhx2fzY\nIo/e7/ldWOiQfB0zqpptbpqcl4HAPw9VgVoJCwRDhWJJM3ikBgsPOLmphbhh\nRDKeE3FNXJzd7c3CiizzNja2GA0fMYE4CglBsxk3A8tXs9O/OBxhz9f+VYh8\nJ+/3\r\n=4Vu+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c22803ec93a76c661222622456cf6f5c5a17459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/rtl":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/shape":"10.0.0-canary.671d72d95.0","@material/theme":"10.0.0-canary.671d72d95.0","@material/button":"10.0.0-canary.671d72d95.0","@material/ripple":"10.0.0-canary.671d72d95.0","@material/typography":"10.0.0-canary.671d72d95.0","@material/feature-targeting":"10.0.0-canary.671d72d95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.671d72d95.0_1609359186759_0.04815168910865508","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/banner","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.b4f5a1c9e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6309363a5cd299ffadc74328765d9e52c963a13b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":41,"integrity":"sha512-o/toi/TAicbZenJKEoL9MmqiNRsykDXeQ8ww3RpYUkl1rKC7o6H3M3UHwYaSDXfMZwLU4b6gUsfFMtr2Ar9Mvw==","signatures":[{"sig":"MEUCIFQK4YTxud5PUoGWYnI24EZJ/Zo9E5NBBySvgy+DYd0tAiEAoBlu9DjJj8GklV6LN6KWL7eCHKZj5WXfshH9joGxNW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PWACRA9TVsSAnZWagAAA60P/Rz7SW65v0GP7PBVceGv\nEKyaEwDw4LLU+skVnVsoo+sE21uU0vnjIzpz3UUWOwTECizeTpsISh6P3WUj\nesSzpfNRc5A/KYbCNK7PavWoXas2Sh0Qi4IzwC2O72ByDWW8KhL4q++imiG6\nXRDqsw7UaeUw4hNnevRvN7Dfy5XClECezdgt4SlPmzsNzOSWUlKri57E3QY1\nMIDWww/36SfHvtR6OevVbdk4RyueKwqxdOTBIq6jUFc10WlkaDqG5wr8wuJT\n+uCZfCVxzGzj6pAuwrDYIhhpsC+bWjc9pZfJ5d7Rth0rGWXk40/fMxAtI4yO\n8WHriqd3+on1LJWFPu+sVRGB5ou4fa1fCBZgj8S1+9CDIQbiqEggCDSZXcFC\n36alKlMPiHIZEyAB6rMb/Jqjo6S2+NavKxDgjrlWrPotkvXcN6Jp1IOhepxh\nwn/J4m9C54gIiGnjQGg4TU7nxqbXv9q93DXmjppaIUMQelQzHdDka/XPFyiV\nn6o/Iy2RS/fnInexELekHxj2NwwSE2TYhCf6i/qZYvT0CZeT8m2cMDg1JFKM\n3UCaLy4jKvHmliYJaZonCfZq3fuzvbsGwWtJClKOibR1d+N2WRBJi56RzgE9\nsyBkpR83dW9s03EeR0HrWhWA1jjvUKf/iZpe8CJ7Pky3epRGK3yIXgf5h1tj\n9MHK\r\n=ZSar\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1db47387aa8e99022677270066e7cba1da23732d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/rtl":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/shape":"10.0.0-canary.b4f5a1c9e.0","@material/theme":"10.0.0-canary.b4f5a1c9e.0","@material/button":"10.0.0-canary.b4f5a1c9e.0","@material/ripple":"10.0.0-canary.b4f5a1c9e.0","@material/typography":"10.0.0-canary.b4f5a1c9e.0","@material/feature-targeting":"10.0.0-canary.b4f5a1c9e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.b4f5a1c9e.0_1609364864204_0.22725573479649142","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/banner","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.a94bd8deb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a33149d267f1f2dbb96561e50e9bd24e7466d0ec","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.a94bd8deb.0.tgz","fileCount":41,"integrity":"sha512-Bjo3viwQHK2CAwUeahh262S/1qbGggdA1U4QJOzZnzMECVL8nK+pzFt+ZCf/5HMXfZ9WwhQUfJybkUIgP3h9yA==","signatures":[{"sig":"MEYCIQDVyZZpK2NHyVp7EUQ9NjI1IZKOzVUMXh0nY3bB88dZPAIhAKnzxjoQEdfBPQMIiVso1CXXcGwPpBoS5MAc6ziB1qVp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PmuCRA9TVsSAnZWagAAyDQP/i6uPts9+6+U54Wk1J4a\nWRrMjzOpagHIoZzazpshzM34MiBXpNgoeGMWRbX8uw/nWhehCCmafuSc7E5I\nEeu7h2aaprA/DlZ2/4xr2Jy7FZkvo1LESfOrT9anPAppFf1oT8h5GOEf4AS4\nwoAfA2LZBQx8t7zu94kJMDQ4SshGfTLHvx8+8NF+NPSIpYR/B/0WlxukJsTH\nOrOAL1JlDvdc74MyRL62Czj3GoaQ3JhPc8V69vOl/xYoC7PhGohnRqFNhaeu\nzdgry0UN5a00EE30DUveHIpD3PCirPHGpI1DK1GVkrm12rSOOC2292kQHTDK\nhGFD7yJUCyFuoOtTfWy4IQtMl82AYJpewa6MT5gtLF2KITXhcvuXbtU0hhMh\n87qxlNP3bHXnoxR7X0saRVMizxggJ/bfqsWroGDQHzkjywfweER91H79w2Qj\nXtKRybTelEK4MVVqrMm6IQ9cWdqlegv/Z8WUtSkBnzRv7bgjvPhHHOvm9+Q1\nQJyc6wjBPVZQhgDGCOXCF+++q4O1+Rs+WOKngvJIe6jRklt/tTIn3WTScQqC\nQnWPOxSac9Chs1juztnQWgranBTSb/RFXpL4O/7wFLbj8AM4c/zahoXRnJbe\nMI2bUkeVsDlC7fMwvbWDIPwkNn7MADxayUBMYlYA66lqzE2TePFM0T/BjiIx\nIQzv\r\n=lb/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"12c943490c76f911dda3861f863c68d7abf77ce5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/rtl":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/shape":"10.0.0-canary.a94bd8deb.0","@material/theme":"10.0.0-canary.a94bd8deb.0","@material/button":"10.0.0-canary.a94bd8deb.0","@material/ripple":"10.0.0-canary.a94bd8deb.0","@material/typography":"10.0.0-canary.a94bd8deb.0","@material/feature-targeting":"10.0.0-canary.a94bd8deb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.a94bd8deb.0_1609365933781_0.3227014928890606","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/banner","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.5d128511b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a722a04a5099d16e84a4dfe41cf0ceaabf0355a7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.5d128511b.0.tgz","fileCount":41,"integrity":"sha512-dryZroVLMXDePDZKRcdkSyJCHAGZMEwWHzIjQjpHPzlkulpO5xOVlH9FST0OWIj5ojVCPZgblG4g3gW27GzzZQ==","signatures":[{"sig":"MEUCIFW0gDbdyvpAwk/iJrNk+vPPIoa2v04DJrpfA5TvXOogAiEA/W+YmnoIvFaiIarQBYDEMUJ78rWXvEpslx4BSLxaSBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PruCRA9TVsSAnZWagAARlcP/RNTypV5BSagxg5W+mhQ\nCHNOYl9anRBbwb3GsInxbtzZOKsGGR33pfBmP6VGf/7LWHXjTJi+LHS8qtmD\nImcxaRtCLBImsJv83TtBKEgDC9f+4NhhcpizJHzeHXulfQIMKmgWFG+cjRyX\nTAwe4Wd4f34OcSDALU6rBAFg+UUTaOCuBmwPfyDB07e1+rnXblhRHc8axHU8\nzXL/3AKCUq2n1WwYi1/Rlx8jLNTnT7chEb+VV/eW2YGUFCz2Tzi4vq0Af5ms\nVj4Fb2FWaT582EEK2moPEvNW3AG7oiKsIsPvjnHYVZZufcV1feVV1WjkTjVy\nGf+MY0Qxe6YknnqntVBEXlNQvvzSMjhGN97A02tSlobUG2L6000cT1ZgKLlo\nQrK3x7FV3yi3Fu2TfChLJUE1wTBTgAUmwWlYPlnk7NocSfRxiZEL+PhqRg/i\nULA9rBCyQ8shpwWMZcEDFZattRV369D5mJQg5BRZ8H9CHWdt58Osq5jCIqyh\n7UEzaywjBYDfRBhWGhLMFaUhGjmtNG+mFnh3mk1hbRcrXYOHR+8JS/wSW2D3\n8E850FZOTXvzX7N+sk+oMQeiywZdVV3bk7QkDmRntLdiKEOZKyl4METc1TXM\nj9Mpv3R7WHzf8E786d5rzsEtKvxwLg+utQ2x1OzEGyYTtRxNaL5Jw+pu4QgU\nhbYd\r\n=svw2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"05d17b41cbad4a8aebac080f082633a26be09a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/rtl":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/shape":"10.0.0-canary.5d128511b.0","@material/theme":"10.0.0-canary.5d128511b.0","@material/button":"10.0.0-canary.5d128511b.0","@material/ripple":"10.0.0-canary.5d128511b.0","@material/typography":"10.0.0-canary.5d128511b.0","@material/feature-targeting":"10.0.0-canary.5d128511b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.5d128511b.0_1609366253876_0.5317548099443716","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/banner","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.365c69360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45ae15d0f9e786048c14e72066030b0191d8678f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.365c69360.0.tgz","fileCount":41,"integrity":"sha512-/MW1UwSyg3YVGDFQ4uwdR2RXyqrF7bYlJ5OEK3gpJ4/gGNaW6memDACX3HeuNT+qUmLnB+gNjPxU86ZtbHp65Q==","signatures":[{"sig":"MEUCIQCfxV3GBnFmN0EowCreTEYH2QtgV3UVXfuRmmM9bKbgsAIgc7ySlBAHllsJB7V9cejH15+e584OuUEJWEeww+KYuAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9Ka1CRA9TVsSAnZWagAAnigP/0GkdFIfVw6GKF8cpyvc\nqi+KszhPIMRL6T2YdWRhMlSVoBltpDboGjN3FkIZDJxBuNRvqAshb3rcjwx8\nmyc6elIS5VciF0hx3Rq1/rAu+zgikWtSfkgL+1FsFUn/H+zflEcqxkMtdr5g\ndMeix+6SqiyzmotbAUygvHAuStJ6M2w4iWID1epGdtvjBqLhqPbbxtdaCNyr\nqU7W6PU1kxct3UZWCQbQL8v1acfXmE/V/DazapG/zK5CFbwozItVlw4g3PUE\n5Pnnq9tT3mVb6xbq/kqLEu+OIOnAqLt1UNl7RGlccPMnvIHs1UzjaJjZ5hqi\nPulsk8TKdOeZjfOXrjRgLbGPzO+g7w3tsKSa4Kl+9werUZb+ZpAaI+wbQwv9\nIUeYnVBcwiVTtFgNzupderfwHiIJ0ySck99Q7EwHRZcsfEPNC1mlZ9U+CDf3\nP/2nzrUCS3Jjj/Dwdkue/R7NT24l5awTd9i0K+4WJ6oQzAswsdigwgrWS7wY\ndbnk3uTQp6r+9KL9ySY4OI5fNk4WuJU4EiAwQnff2K8ZwCvg0ox41qvDMuPc\nHGNlqgjgShSQT4z+ZpEuBdZMSSxQ8Gj4M6RGNwKZGFUp7vZ+w+TL8lBtACmb\nxcqQtVDe7A8L4afv9V4p8bEdxkWvgQJjVpU+AEtrqiQCytMVDwcedS1y4NGV\nxALb\r\n=H3jl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0b060c30e2974c71db5d5ed87e3ab7918656edeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/rtl":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/shape":"10.0.0-canary.365c69360.0","@material/theme":"10.0.0-canary.365c69360.0","@material/button":"10.0.0-canary.365c69360.0","@material/ripple":"10.0.0-canary.365c69360.0","@material/typography":"10.0.0-canary.365c69360.0","@material/feature-targeting":"10.0.0-canary.365c69360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.365c69360.0_1609868980495_0.010662037772554367","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/banner","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.700a8261a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aff92abb438e2f3da10b36bc8605117032c63216","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.700a8261a.0.tgz","fileCount":41,"integrity":"sha512-Lm0gNDYfoM4fO9qTt0i83y/7czBNeVm8LseDhSh9a/EGtK3gHFyIOgUUr0RI38imzITrALQO1BZVSc9XY+oR4Q==","signatures":[{"sig":"MEUCIBjWSkLQ7NcFtdo4AvPRxL6YnNvba4Wtb57BFUr5Ag/3AiEAzxkA51oZcgeXWa3AaH/qpF+ad9o5WA7QA5/o2wFvKG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NPHCRA9TVsSAnZWagAAuWEP/A1EhJoRxDgynKd/+p3a\ncPd7K6JT4L2O2SODktY5cN99jMHvGzyZJUUZqbvV6Zcqs2sjCK2LfEtIkwUA\nL3IE2RaebFhlWNq0Zb6z2fbEvtoLV3u94CODmBGo0COfpbWLRuzIHWlme9oB\nQvso0OWBbCxwQBqsSFyON4Evj437Af/j//LOm8GqeNVaDwExbEE7l74BD14w\nPYXPGkX9W56ajc0ByQ/plP9GqHZvtt/tXajHReJumtYKhfOIK5HZo1S1iRJV\nMn8ERk4R3BowWV5vhq/jo4zXxWDCkbOk44w7QSQg+o2xkNIHUnQCeeu1KJ5Q\ngBiJwx7zYbF5b2Gt4VxVjAMqdDNf2P2ehoivgSKFVv/TK9fv5bpeTJQTjFN2\nDCebWeQwrzjUV3PYRw2W1t1mG7zw0aLOkauhftOs925tLtSm6hmVCeX9xmNh\na90YHKW0jpkK17nUE+1Psk3EzJNbN4j5RVVUB8e5rFVaegX3Kb8anBMYzqW4\nE7SEfTIUuD971pKSdn9aBfu979f1oIgfrP0mBKM/4RL7JRaappqZFLXs2r5A\nZFeFDLXlgEPpkZoOpXVpUvMH0/2HMC3gOQLpbRON8/OKJhhZtQgw3E7SVaNO\nv5meSmiP+3ZYxt9kY21R06WYNEMEoLOpYTFjxdYzWgj2w/qKKhHdJAGI6PGN\nHGry\r\n=Eu3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0e9aee4feea82b83f34c723b52aac42fda1cdbd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/rtl":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/shape":"10.0.0-canary.700a8261a.0","@material/theme":"10.0.0-canary.700a8261a.0","@material/button":"10.0.0-canary.700a8261a.0","@material/ripple":"10.0.0-canary.700a8261a.0","@material/typography":"10.0.0-canary.700a8261a.0","@material/feature-targeting":"10.0.0-canary.700a8261a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.700a8261a.0_1609880518754_0.17486844318999206","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/banner","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.766981c15.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cb3d0756dee3bd85a01796529e657b94b0a9c66","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.766981c15.0.tgz","fileCount":41,"integrity":"sha512-Kq9Cf1UFYdnFQ5gZNhhu8SzERsfB/RiOdTdDSJXNcJ8ygSGz+i9gta68KnjD9bb1TKbG85th+KdPyRTWkyxmDQ==","signatures":[{"sig":"MEQCICq3jX/63bJszEi5e9RuiDHC8tZtyVs8v98lsYtmUxAvAiAclp26R9V3+M+qxBUm6qeGZwD58Kf7o+v5Y+CEZk3R6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OsfCRA9TVsSAnZWagAALvAP/1N0kFRBZDilE5QwSMZi\nR4edr1GJxoFkgax3i2kC8TqGM9HXLehJgmqlLRh3RCwnHFXnbaldWfZj6RQd\nxhH5NsAzMXBsfPsCyhbKpOnGZaUcep8SzK2mhkm3Bbw4fOCu+R/Cy3fLFIBA\nFCRnOMWcg9W/dV8yUzXxxWq8WU1A/Ci1DzyWtS247YjmVhT0fMF2U7FnzQYo\nZEDhXG9kxZyb7Cjp8AFGGyU2DCKYL3JiKWYgaYUqYKIDz9hz/hhoHyQ6myMh\nrco5YB0/67ItRQ6+7uw1ms3jXIbzF0pX35OXhgKRj8++rfwkc5PwNcpI426V\n1xonEWt7Bya6lK0f2xZQiwHTAjoYdZ7pdTKKLY9mx16NosNGAAUGDACjaDiV\nNEwQw2hFsniLqhgiMzg8bU2SKNKVFESM7gZ5yQ0YqtrZFQV5BdELH+hzckxa\n4FN0PaoPZcRnQky2i1QoKvR43BJ5RlZgy2cQ3xTq8EXhhKqLFVCdEtFpEXHM\nyBIx5hoPmz9ITXp0d/6pZFiYvxSj8C4PXCk96fB73ThTkK2bs9hmw49h58Iu\nIMY5qHRM7HJbfX26J9B87zYdIbUiLUgJ+B4uoM89sKZTtyKObid4RucluECz\nYDHbZauMzCkMjkbDbYLXoFL3YIhizkMuR1oKSqIbhfoMF1UVfs8AWrI2DnnA\nge0t\r\n=gRLB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"40a13adf47648f48d6dfb1daac9ded2f7f0bd442","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/rtl":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/shape":"10.0.0-canary.766981c15.0","@material/theme":"10.0.0-canary.766981c15.0","@material/button":"10.0.0-canary.766981c15.0","@material/ripple":"10.0.0-canary.766981c15.0","@material/typography":"10.0.0-canary.766981c15.0","@material/feature-targeting":"10.0.0-canary.766981c15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.766981c15.0_1609886495418_0.6165257001960218","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/banner","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.b28c576d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d19e1a6ada38fbaf46fe314689cd853d4a72cb5e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.b28c576d9.0.tgz","fileCount":41,"integrity":"sha512-xcZOlhrfgltffKi8wZZZ2tpeVU0go5xCAB+FbrSAoSNq5Orz3ZojuWFmkl8v1m/AqtnVAS3kuilJG9B3HydAbw==","signatures":[{"sig":"MEUCIDTqXFmFCS7wap2ceIMaZdAzzX0YxineDo3K/djZGo7WAiEAovIX0LYncH6alGSkf/3uwoUA3XTtAGTp5vuvwRUZSzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1hCRA9TVsSAnZWagAAgswQAJAuNcqgGZRmk4rRBMSt\nK8LqFzg2g0POvqdkOeg08Tu9UJltzj6boTJoQuuFlaVSVvRfMeTse6HRxlTA\nWbMH1CE8Pm5++JGYVOw7PQzQ37DUe0W7FN5gtM+yQfA26fS5qqOX1OdYZuei\nFr9q+hJqZRArRnK0JzoNr47jGirjV05ie3vX5pCwL2AWwj8UVmVzks2eKKDD\nydTWnRqH1kzRfocBieq4PDbAeWAGmBUXb3hbafCAQg6DiSfqv5hJzLcC4iGS\nlnrnZRN+pmFJUJN60nfg06yQISyqEG/oZE2VUSYDauQmF3dv1ddUXjHjO9C5\nO0vsEMZPnNeWv0aIMEvmCOedkWdQOdRYGZ/yljeHwZOSdoYlZ1mFArtOmv2q\nvOy19hyxcb+CsYMZ89Sl7g2nx0Sq5C3Nb6gEiUTrTqacDcMpbyZuPkkU0xlc\nUac/kiH8fAfNnBwP9RTGp4ysHTQRiqMGSYqu+PIdWGA2yICTBwb75JH37vCJ\nYmwAJywwUKUY9wja/EH8qIH+yRrnFm3vpNdf5/XJpG6hcW4q9MJPJAf3JJRw\n1l3yXvsmd7fLh4/rnOVZR95ABxjDYvM3EKfY3J/bW4PiR00gn66Xwshcgsu7\nLYQYNVdJ/aEB8/UKjISCAKRMrrZ00AJX//W8DQUR7PH/C2THZL+lqoB1d2C6\nPjBP\r\n=Npoo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f11c5039e5e02253cd6e3eaebf7ee15629f3c182","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/rtl":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/shape":"10.0.0-canary.b28c576d9.0","@material/theme":"10.0.0-canary.b28c576d9.0","@material/button":"10.0.0-canary.b28c576d9.0","@material/ripple":"10.0.0-canary.b28c576d9.0","@material/typography":"10.0.0-canary.b28c576d9.0","@material/feature-targeting":"10.0.0-canary.b28c576d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.b28c576d9.0_1609887072635_0.32610254535889527","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/banner","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.968735356.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32d4b462376e14393609a3ec3f75358506da8ef8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.968735356.0.tgz","fileCount":41,"integrity":"sha512-e6WHvA0bDbFm8WxP8zoG379S9ECFENfqLi16wnszXdLJLVg+KmUERJGSsER4G3os/MwLw7t7hNjbMHmxIAobHQ==","signatures":[{"sig":"MEUCIDS9ESdwaJ/jSIEMvGN51iSAOBuMM70dn61FxAsLGzAiAiEA2b5SN/YPHbY2Vu+4V6bjUtmojBY6GeL6JOtLbZ5aWwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dywCRA9TVsSAnZWagAAqScP/1xtFZiDlWgTfbW/DS7y\ntKPbpfnqJNchLh673n1SCjyoAFWR7ZRzOHKw4sN0q6JTaBYmFIiKIJ168bD/\nstI2L+GKvz3EQgFmugiIe1nysFuzQ7Wz7Ec/oMl29B6ebhki8wgrm+9yHQyY\nCVzxSgQD1QMy5mmEkEmo+aTWsgKntv1pIe3HLMu4TD8/tUv12dgx1voPD1td\nzVK558btUSjT/VwvAZ8HGrh8PFGhyus83pFUEh9JuFX6f+/yx0CZ3YG90wwZ\n225Kf4stvBUNi9kGdmRYbbFBnQ7M6o4ctYymL/6mJxreB/0BBngGSaAk2pN0\nClxOCzREcDbzGq5tnRDfD3ePcwqyvdiUhNP+asg6ifZf0Cg3LUGuX3BMlLyZ\ns9KBFxZmQkPT2I6lgTcmbfGf1hl6oULZOE6Ij8mmFjnse6DE1egsg6XUgs1P\nmAf1+W0s45G2IoiJ4kGYXmWKMCv4CG2R29MwsE8sFc5jMeTKlGqSdjyliQNT\n3xDQQMTgsuFqS5cWJI142jyxWuynbWFshea2S617/HMxlxrYrDMHpst/UaUI\nIgBR2v1jSz2OIFuWbsx9JhIt8WeAoMk2MUYXMH3ULQYWc+/xFpuQESXc/ZbQ\napQQ5y7DbaEGhMtJPRWKLzvaogKPFe0f3OiYlAGX6KrZYyhF5yGcWRY1+mjA\n86aw\r\n=NmxT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"016bf1732e983523c8ba8007681b058735467018","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/rtl":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/shape":"10.0.0-canary.968735356.0","@material/theme":"10.0.0-canary.968735356.0","@material/button":"10.0.0-canary.968735356.0","@material/ripple":"10.0.0-canary.968735356.0","@material/typography":"10.0.0-canary.968735356.0","@material/feature-targeting":"10.0.0-canary.968735356.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.968735356.0_1609948335814_0.3597464211079473","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/banner","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.c5e18b020.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7c0831f1dcaeec6610e7187cc84d06b962602f9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.c5e18b020.0.tgz","fileCount":41,"integrity":"sha512-her84YuScWcJm7G2v3bzWvZtCvTxy15ZxjXmf9mPPbj8/7PUm3KZ2o8DJlZa3c0zCo9o7gY3cbnNs7d5n+KwiA==","signatures":[{"sig":"MEYCIQDsf0s61iIR4A+/53SAAHyYjORpN0VRuEdph10CC5VD1AIhAPNEN9+FANvTVAQK9pJTELjUBTbSyDMeLxKtDrrY0J6l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNXCRA9TVsSAnZWagAAaegP/2GofU54lz4dZgmSGYPX\nI8qmMac1hKE2oJTNhvuKbu1SAqRRIrOuSSzHJs5xAV7EV5KlDxp3mt0oB5TJ\npO1J3yEtJqM4uyAsayxNr2RG/5ayFE7B9qZdTvZRmVTU/RBG4KIzCWjPecvn\nJJg1zMKiWhaUOvG8GjM76dGIVa5ld2tkPNql6KpJfyUUh7m5cmXvttJJhawg\nXNKJnGxd68aTYNhYv5Bv0Bxwixezt8wUnEGxOL9XLbg8JYYFcBUP8XsFhC4U\njD4j/h+eokIzQ8vThJEbNd496tRhYtx3zPCrYPrPC6N54GOrZyO3rPSVManS\nfj7V8bCUQgn6VEvauWS5oCmWB/HLypbYR4f7K7801L6yvnYGV1XKaq58qPW9\nfUw/cU9Noy8nohWn9+cleHg1x3UTMDO8R+DR9hHt1maL8yUVjaXvfJMnihMM\n9dXsPKuNQylmuEwqbwYo6NTXtmND+JQ1O0qrkGlO1ECnZPqXTDTn48s23I80\nlm78a4bEz0W380MLmYrR1K8mi8qeU1LsCScIRqztD6uebwXJU7xiwcDkuwB4\ntzFqj755ZZec+HTSmZT5yII9qvOfB+YYTny2p9LWowcrWcqFIciLS9uaaF4Q\nXnYq8csh5uynoDzXv/xaAMZNAQQkcqYhrHmsCDsDrUm/wTqiq74A81ZXKNTS\nh0E3\r\n=WqrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"16a60c2c89ea18fb88971304d4491f612734e932","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/rtl":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/shape":"10.0.0-canary.c5e18b020.0","@material/theme":"10.0.0-canary.c5e18b020.0","@material/button":"10.0.0-canary.c5e18b020.0","@material/ripple":"10.0.0-canary.c5e18b020.0","@material/typography":"10.0.0-canary.c5e18b020.0","@material/feature-targeting":"10.0.0-canary.c5e18b020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.c5e18b020.0_1609962326812_0.3205980858209234","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/banner","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.bcff8a66a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8aab5f7b6ba320888c91fa5c6c10974975d552db","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.bcff8a66a.0.tgz","fileCount":41,"integrity":"sha512-VdUf+vTdqtsKlHuTT6BV330meTJSdSG2mAVsf24Ox++7JooXJ0rDfFjVRC2JL3LWibwgrFzf6iy2ZDKbYDN/Kg==","signatures":[{"sig":"MEQCIDIt9pTLiFQWhjxBjesF4NsJqUweCSRwDOJR0vXWuF1OAiBL6H7g5Dm3/lHq8PBI6O5okzoC4wKRgLLhCkYKHeOatQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h1ICRA9TVsSAnZWagAA1mgQAJu9NRLTw3DWY+erGaZ6\nr9dbkERyjDk9RO+IKMoxGK+63yL1maZjFzGROPOpnO5B4Vi6ucJVNAwCFb35\ng2RDSn6wSzUDXXbQ6Ymnt7rIVTi09inTuUSA0dlEtsGh8XXAuOjsR9/K1vgr\ni4ppKHJp1Gp3SJgM3EKgsl1rzIYluR5yFrHdP6GGkc51aJsH8S9f9jn/uSkn\nX9Nhk/miFfwtdMnjd6ESEwegcf1/Log75+RJAMinbqYda0ktvpDQbOoPSfdV\nhWzv8L++m/RDOpIVHrZrWsf7DoGH2ohRcrNSGr9cNvnN4/LxxJYC6IohAqsw\n0ogXMvUyC++mqXKFjuUAwqH2zY1Q64iQAMcc+4KQjhWycuzNFyEeLterLOl5\nOKMF8v/n7KZWbNE9c1DuKO+1YviIF6rP6tplSKLO6wZtxGzdeOQJMc09M18b\nxx1ockHa9266jKn0vpa66t4GT5aYqalHph03P6T6ZIbifImHGPRXTVNZMkij\nHFiBba2noWsW6GqNjscY0s8W7YnwKx+C4tzt9Z0BT4TQVpeFyG0NCai6xMk0\nKbDVzcIhm1zfRFmg7tAcS026WrWnPok1kCOdluGAlIFXAs4nRukj5q/v0W7P\n6wruVvrL4mphkdLgztItHQNWRhCCaHTFddBVMH5nmdCJW1C93dYfWqm0oTYa\n4pkk\r\n=qeYG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"81af087ae7601c8b819dbada709de8d76ddab960","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/rtl":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/shape":"10.0.0-canary.bcff8a66a.0","@material/theme":"10.0.0-canary.bcff8a66a.0","@material/button":"10.0.0-canary.bcff8a66a.0","@material/ripple":"10.0.0-canary.bcff8a66a.0","@material/typography":"10.0.0-canary.bcff8a66a.0","@material/feature-targeting":"10.0.0-canary.bcff8a66a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.bcff8a66a.0_1609964872473_0.3005392865440224","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/banner","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.79328c9ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"decb87a2f676a8029878c9db4bcf7f9d9c3dba35","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.79328c9ff.0.tgz","fileCount":41,"integrity":"sha512-5DAtRKYOV05zq563QM4+iUJpcs/Ycooy8Pi/EMU/XSVV5fAv1Vs/nw9zRfECNFDtHJzp5JjnWDkSyDcdhSYsZA==","signatures":[{"sig":"MEUCIQDAlaSeaFpjTmSFUZg+B/EaiM5SYzkXHzEk7MOroi9U5wIgCIyaiaND42y7Fgs88nEu+nKe8P7j7/729j9htu7/BAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":447768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNyCRA9TVsSAnZWagAAYhwP/Rx/XBRUUF+7S7lD56Ss\n1aKIIGiEtnWyrur/qkxwcKr7tMcE1Fuh7A5TAe00go2/IOcIC6rCy9u9KZV/\nWMutWPOdPA6l/QlYN1ZkqdHujliMARTCR/xGBWCr9HffsXZRl+YSvc7LUDOi\nTg+2JgSCMR7PNFM3ftKCawgyjvbgHLscM2wC9t1rcEOsNGk5mVp3FQ9rimk8\nwFAB+kWOj9o99hzpNYTnn5J0OwsstHA0ijfruB212o8pjSRaF3DFipzwBlhG\nXo/yF1wT9yRnIYnNqdzJR5WJHUiT0qyA49o8uI55GQnxNegMNw7BpRnWbhAI\n2o0ZkoTrTMRRuzwdaeGYjyw+gtC4rD8NO2+kffSTY8s9lbUqoQBcPJUtcYu0\nv75O02/imUdjQrxgiTzFo7TzDVEWBqZ6fTmXAbSmqW85XGUqZOMJ9IO33iRg\nX8S5L746F8e3nD8EfIGjgzmL43EWlJQTH6uCWMLoO6ny2BpT72fajFpoC8bM\nzb/Bj9AdywZc05Lt81eODOYWNn8+vKEOb7kp7TwkMEYen/9W0C1RsAZvILgr\nbBtW/yEeUtiojtzGqGCYtwTmw0nNWtarj3sjfyck9nCi4VmgmaAYrJN5Yi+Z\ncbM9WpuumikKAfpKSPGMmEwOEJpJ9oPkJaUIKzmPPGMONP5Y8ky3HFb09xAF\nkm4Y\r\n=R8Kq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"15dd1d7d9065f275f9f9779094b959944d33197a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/rtl":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/shape":"10.0.0-canary.79328c9ff.0","@material/theme":"10.0.0-canary.79328c9ff.0","@material/button":"10.0.0-canary.79328c9ff.0","@material/ripple":"10.0.0-canary.79328c9ff.0","@material/typography":"10.0.0-canary.79328c9ff.0","@material/feature-targeting":"10.0.0-canary.79328c9ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.79328c9ff.0_1609986930371_0.011486927948483494","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/banner","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.121e1f303.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e90e9a633994f36e000ff625d00c07159b60fd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.121e1f303.0.tgz","fileCount":41,"integrity":"sha512-xURuAmp7GkbKyGX/kyppteMAemGyutMt8w6+FtcdmMbc3Cpui9wbsS1Sc6wCMS+iCKnKxrbvTGG8NjUg2keqdw==","signatures":[{"sig":"MEYCIQCl61xjefHMdwYb4iMhQozKpT3vfPstPN+A3cKhz2o1pwIhAKUWVoyBDBEVIYllpnoeGabU75kqOUJ2TwYiDf61hRcd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95diCRA9TVsSAnZWagAAO4AP/1xr7yCuznW24XlHRI+9\n5FLYYlPHM5OSc2Hfkz9V315s3/XZYB4LZjZuN8sfVDp/SGcmlzAyLohguejB\n5D90wjJ1kOS0qi/XIwb8nWfxxmd4RbOKda0aODi+RWPFnbkvGu5kepLXCnGD\nloluX7IDgVpTKVPXkvkTmaWNeO0fhXp+zZssWFxibUtCwLDl0/xPfiPoNJmf\nZg9fN79VNcs8BXwQbAtE2kaaGvL2CBkxaEElOjFX30thOd5dB6FZtcBokyDu\nX5Ru4uRX/wmrLw0vQo86QXXkEJHAbg1+tGfGp0nlI+2nqP6h/6cpTakYoWlp\nvJXH2mXZVIEZEUggDpVDxqZidfG6DgMgu+dDsX+ol98/binkMrAgHKz3Goh2\niS5/DX309Eh8ucH/ocLK+4X3Mrnzmhk4At3ZdsraAMGnZ/+qDFWcNaIvX2uh\nqPbFYzKz0gVHFt2nWTBKlrmyX8Fx2mwpdBkIPJ3uX0FDvm2NE/ushn8i5zME\n5yJzpLdqZ+VESHoqk0w+ZcDQLvFJz4WJf4723R+0guHUqxrQXyyLiaFnMSBN\n5aeRvTgDPvsDp0tQFSfRf8Gz814jYhAfBxGXKdhheyfa/YHPgTUvhmivwqou\n3XzOLziZF1FrS+a6cHFD3BGm/OP6sP3/G5zgPj8TSN9avkr3PTF4QtQ5NiVq\nVfQ+\r\n=W6K5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6ae814dae9eac40570f13ed9d7b821cceddf838f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/rtl":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/shape":"10.0.0-canary.121e1f303.0","@material/theme":"10.0.0-canary.121e1f303.0","@material/button":"10.0.0-canary.121e1f303.0","@material/ripple":"10.0.0-canary.121e1f303.0","@material/typography":"10.0.0-canary.121e1f303.0","@material/feature-targeting":"10.0.0-canary.121e1f303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.121e1f303.0_1610061665763_0.8425641306782408","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/banner","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.abdd10065.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc31b32747063ad4790d0fba3aa7e81e8ea14672","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.abdd10065.0.tgz","fileCount":41,"integrity":"sha512-1ftpSSjmiWwlKZtKxKeU2hi34t84rOjRmkmx/N0T+YCTlz8ij1WzzNv4d/3YXXKSnqu38uXTTHSKNBoFkKKTZA==","signatures":[{"sig":"MEUCIHoi6ccz/ktIYmyCHc7bp0NXuiIN+l2WqlNqRHR1gU+PAiEAueVFtqJMduuXjSddaOxEqpXKtwpcZtUGpz6ReUCtw6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Jv4CRA9TVsSAnZWagAAnsIP/RfTWymGI39KwlXs8xqx\ncA8ICAQpFZ+3JdvsfoZ+muoC9XL8UontUig3X9JgBgH8gjsRUO4WoXMT1kyf\nUe7NnRTJNw9TFIyJvOpIcFP2dMmOQrQN22Hq3kEgg67Vp0X0MFPnOvhhOmKu\n6YvhbYaVNhllFZw54TtcdHlpUToy1ip+A6mUmUzIdy2qHKdXzseIhqDMdsCI\nrEOGCWZ0Wl93pVXC9h9JZzEDmrvAMpJTaXSWh4tdhm0ylJrgc3ltwkaV4mnK\nZCbp+HsNItGjFh6p8bYn463pq0kTplkwfp3iFCJxuGqsk1uexNUDPhPtTf0y\n2Q6UJbJNC+WGbknOtNyFikSuQZl9Yn5OrFzwRmicWznN5PVzsJFwYpcHMqYE\nCV+hNpfAedmT+L3e4E3+IQZn13AP+K2wd1qZreOSITlVNa5lxDrLgnw+2X4a\nA5SkTLYLYEmWP5ffFv/FiBJD7zkbFRKjWWwo+fsJLDKPGdQRy07uBG2z3tYG\nYBStTdBePvOx3FPRR4OGhCsfWYpSP0P8PqClHOW1+Zr2XVCbFfsBMivJpc/S\nirQrjBxz7qiLe7hKiypJ59rGTE1KmX9y3UgwkEhTXN+n1ES9HmBi6ZcUPVQV\nEzKv+uMd1Qn29wD51/FgSIcr9fTwOXSLjWEGIXpu07sp7y0Iwd9wUMq5D6/Z\nXRtK\r\n=q/py\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bc8986a19721edfc6facb62cf839cd222de97d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/rtl":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/shape":"10.0.0-canary.abdd10065.0","@material/theme":"10.0.0-canary.abdd10065.0","@material/button":"10.0.0-canary.abdd10065.0","@material/ripple":"10.0.0-canary.abdd10065.0","@material/typography":"10.0.0-canary.abdd10065.0","@material/feature-targeting":"10.0.0-canary.abdd10065.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.abdd10065.0_1610128376358_0.7900520117902052","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/banner","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.089de519c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"877216f7b4f1a7d2cd4d9c53d98ab95e81fb1454","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.089de519c.0.tgz","fileCount":41,"integrity":"sha512-Elr8SGdmS20rW3ZEROaYacDRxTQlap1/Hg7E8MUt3CrYpwac/kOY7IKcSkcKDuHzRvRZ7oWR3lEp/ieaKgFMpQ==","signatures":[{"sig":"MEUCIAd6uQCJog2hfdxejcTsOxylfEViNawk/gMi/QyZEhBeAiEA7z2IC7pcrE1GdMSRA3+4YkSdIm2oFGkhY10StdZAq94=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NsDCRA9TVsSAnZWagAAgpQP/RlIX6PQ7B4Y3hiWZFSz\n+GeezmO9pXKxGqOB2LDMASj/GyUowyYjlgH1BWy11tOVLRzKXy0MTfo7GCW2\n4s3e3Qy6OyXBT5tY+zWBmEWaM5+iIFqebuGCTlHHs6Xnto5RE4fEgqESDlzg\n5n2f2CgZ8xioKqMt7h39ntTVP5My5+zqmb7ptBJUMXKFsMb5DJ5ZWTnF+sF9\nyrdoUFkbuby2l0+Uds1u3enjnZaia5V6bnTUz7xGkdd4/F9gGjL9/3xSbMj0\nCFaJSbr81Hy8E0P/sHCsUZ8TfekTAcLE6ZsKi9TiMzpmB0QC6ynlGpiOh9iI\nM4ewelUXuA2pGGrK9PpzdKR4wMjlnTpNJ2Shz/W2/Om2H/ihRGz0HcSFHPzW\nUp+RwK1zEydZ+gqN7pzy+TTE0UMhMGMVOWDx6hAbibPXMTUDK+n4JiSZOPLx\n095XZ/CXcfNx34gJemJ4+9CVe+tUROG7f+3BBxBS+4wDGRh+owhjCX5Sfl2s\nb16kovmEpreP+noXduGyJTMGLxPVTM0v+WyMEyc+OuTsl3QVifKUiUJNSPAu\n0448fudOhh3wdQlQ3Q+gwgpxCq0OaiHEcMXOCI9nZ+MGa/zRkuTUaTH7S3az\nrXSaE3sA7/pTVTJ4YhwL00iS3kAncpvZH+k6YcSOQ2I4uHHB1/lybwPHODQG\nABbE\r\n=6nJj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6a64709b5be73a45401fe82d1e6d126d7312fd21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/rtl":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/shape":"10.0.0-canary.089de519c.0","@material/theme":"10.0.0-canary.089de519c.0","@material/button":"10.0.0-canary.089de519c.0","@material/ripple":"10.0.0-canary.089de519c.0","@material/typography":"10.0.0-canary.089de519c.0","@material/feature-targeting":"10.0.0-canary.089de519c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.089de519c.0_1610144514796_0.992980575958196","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/banner","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.163119837.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d546588a495467feab79fcc05b3d07ebf14be0d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.163119837.0.tgz","fileCount":41,"integrity":"sha512-co0n6Th/sFe3TzVGFFIrpYD5PQ8ZFEnZCxHjn5Ri9Ju9YAr/SDeQXmtKRY74GzSC6dj5JoVBsSDNl36G1n0Arw==","signatures":[{"sig":"MEUCICd8n/GC74pBcIC3I6TBNfn1ygjV+Td1dZek8p3OccOWAiEA6Xk48+Qu+xrueFkbvVIBxlyF8awljpJPn0Zhe/TstLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7WCRA9TVsSAnZWagAAuD8QAIRSJzxJMX2uHdSCllzo\n19shEi2bJZN75L1WXKQvKARHFUOxZMlMxn6gOZQHP/LUvPzOPBcO35eR04Lr\nMRAAbj3Ee2VnqPIAGyKCPX3HEMGhDq+fN8Is8anjkKJ9ZGMo+lssrGvztNti\nyJRT7JDazWI2JMgxZwLyiUy9v2n/oj3e4TyXaGuHLT409gZQxeK2TO9onVni\no0vbYXn66ay1eoAqtZbdPLJ6Md0eqhMqwc/Z1ip9Anzh6kBh0svpmyyJ5Uy2\nAM/lHVYN5nGUg7cW83Ezc/bm61E/gX9x6+cbX+Z7LTAuKogx0j1HAslIXrqu\nOl+VbI+O6wfhz6f2hi3ZB7vg492IWP0qcAfhrPcZLYZRbKownXH3Zzf2BXVU\nkINIJGxsW+1vdtcjKI6AnQDX3X24jl8cFmkGgDo/vwlEzV5ARznhedyHOk4f\nbKCatMxUQRMp9MmRtmcGlCbSHK6cq6uMCQ2TTvsDv7BBAVcwl+k0423SuEXa\nYP2fjoUrRN+UOyhSLtvoLa7r2SwxTXSM8kOO33rX3EXjnfbqkoBWT50sNWMe\nNcAJZqhnvyZ74tbspRTF5E6XNZ4thHoUD3786SfdCTJde5jiG3d4F5JyuYxT\nT4uOVlLFfvUI8xqXxT/YXn+GjhYfQ8gUrurv716+2e0wH2JtSFKAz/u9QP6r\n+sbJ\r\n=rvHj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"86f8af57c151ec42ed920ac445544bc384ce0975","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/rtl":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/shape":"10.0.0-canary.163119837.0","@material/theme":"10.0.0-canary.163119837.0","@material/button":"10.0.0-canary.163119837.0","@material/ripple":"10.0.0-canary.163119837.0","@material/typography":"10.0.0-canary.163119837.0","@material/feature-targeting":"10.0.0-canary.163119837.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.163119837.0_1610149590162_0.16004685481770475","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/banner","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.b8a1a58e4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1897245125533e552322b47972bbba6f506e291","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":41,"integrity":"sha512-U7HEMOWLv8GiD4HvhYLv4IW3ZO7NiCvXdcA+YC8x/usqjKS5wEPJjmnvoAv45XK7ubeF2DxfpRAOIRWaEqGF1A==","signatures":[{"sig":"MEUCIQC46H5rCbi6pkVrWLW9LndiuCtvQDbGTnjHyoQkrEquqAIgaQ6J040/YVaXMWsyLa3qcv8ZzonjYJ3tD5BIMU1n/Kk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":448652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Hv8CRA9TVsSAnZWagAAiUwP/0AMAUDeb8dSdNReUW+8\nEWn70Qw61kCxw0kJ1juDe6DssnygQlnPo2oyPxf2ecNyalbrXgJGRmMk74zt\nT3EetH7s3ycHj8LeNoP9b6VWkYGL/6pXidrVoWTGxGl7c5gkdNrOnD4szZE9\nrl6B2F/fh/xFaDaExHn7NvX5iy11IRLG3ynUGicwrltZvp4sXy7ZCCGs8IMz\nkpx+7eWhI27jbXj2uitcLIpiDVaC3DZPuak01+DZ+uFJDDqUjHGhsNqhT3Zq\nsqXhyECZEbLKoV/6Fo+Mu3stf5DSP8+5kGpIFTnFfc8OaKCUwfaB7kC/cbiT\naRYBmCLktqZshDsSM/6lCUW1YP3vTefIRdTT3E78wHzomdi2zCvb367tEjcN\nLJOGwL0zrjetdL6ekcSzD4Uhacn4VCBesZGdm6oNUPLfdcBH0C78tDT5ruXW\nXuU4GQ6KUirmBpJyFXpkC0iy7MLavFOgSopkwPRXdTy6fteAN1JetP5+O3o5\nA0tMHi3aI7CkuzXxtqsLyYBSDHvJI+o4m8WctRwmL2PmOUZZGSD576ADPnVR\nLVH0r3/w9k5QxPJxUrR6V6yILPzFiQxW6wBXmWulKtGM3EJisDfhQfzx38St\nJ3sGN1LqG/jOG4fswmGKivInHDkXYOyf7K8CDMGIw/awRQOUI0lfgz4CboRP\nmsiJ\r\n=E13H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3b735aa03cc784b7346905168638eb6a486435b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/rtl":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/shape":"10.0.0-canary.b8a1a58e4.0","@material/theme":"10.0.0-canary.b8a1a58e4.0","@material/button":"10.0.0-canary.b8a1a58e4.0","@material/ripple":"10.0.0-canary.b8a1a58e4.0","@material/typography":"10.0.0-canary.b8a1a58e4.0","@material/feature-targeting":"10.0.0-canary.b8a1a58e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.b8a1a58e4.0_1610382332302_0.9667455044484436","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/banner","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.7584267ff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bba4e315334191c02a2a95b9c43e15ee31dfdb36","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.7584267ff.0.tgz","fileCount":41,"integrity":"sha512-pTEaN8nUj8MPBXTn3PDE9MYsjxBIRrt+EyItHO7aAq1s39VigVMmTLTOOf9R9UlNAimRiFzUvWwgBhzAClF8cw==","signatures":[{"sig":"MEYCIQCw61vyAqdOhnODjrKj/0qFd9UH/6nLOsT2zhwmHq8/7gIhAJAotR8ga6DIK0g5eDdQlG4vSvT7qCLBeWf++4XIluXm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PfHCRA9TVsSAnZWagAA4JAQAJaITUv8O/vCmryS0yhn\nplyHAg6ndcMOyeVqTVNkE90T1UJ+TansnKsxM0z1G5eEItHjLDvUufdQtB99\ns/TaUf/4MVgQMnqtnqKmt4hHDeeuCM3Z5a7llHs5iQtqVvw5n0AMeZ8IN9GL\nUSztT0cZWMbxTOJRPk9wIvUvWWZWM3BYRm1vbW79ycwJbc8u7jUK0Ijl30Jl\n5dSp1uTaSa9mwflLDTDb3eqgzhr4DQndQWhyXqiEjyJXGTglEMFulHEfxsq2\nn/8g9IYknjiRxTQ8E/XzbHACmCx/kZLn8sPaR6fIC8pCBgg5eBM/ZL1cS0jj\nlbbH9cWKHzQS+F/+mQSHCH7p9FNTklWR/4LBsWy6SHz4X/9B52XK6AC/jL9B\nXxs83wSsyRdFk08hKP22SLe3mrLHchWCr6OErYm00W7/0jjBKpi+nVCixV0/\n+TKY83J+Z/zKXAk1+hnP9Crr0BwKMOVLntJ+0Ibb3u1JF2BoHvVXr9naDmW+\nazbh/maKwFN0cQOgmURiNRFrOKNaLMp+89eGRQtwvb6GazfDPWOF6Xl89Kwo\nDTjeluVXNsiPqjfhJXstYpND3aidcdclpdvt0qO0o0JLjmIrSAWSfTaKqbjd\nSXLvHkA1A07s+Y6o9uAWqWpYnW3BIQqf29NySXeB4nU0enIs7d/xOIChqs/8\nM/ak\r\n=LXco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"89cedd80674ac536aacf2762f084fd7d1640873f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/rtl":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/shape":"10.0.0-canary.7584267ff.0","@material/theme":"10.0.0-canary.7584267ff.0","@material/button":"10.0.0-canary.7584267ff.0","@material/ripple":"10.0.0-canary.7584267ff.0","@material/typography":"10.0.0-canary.7584267ff.0","@material/feature-targeting":"10.0.0-canary.7584267ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.7584267ff.0_1610414023145_0.7656174178644686","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/banner","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.251ac04c0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48ca825909d5618d3df78e30b4c9f38b7a39abc4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.251ac04c0.0.tgz","fileCount":41,"integrity":"sha512-ren104Iw5vxpiIz1DXVrNxN5ujs0joYJkCovagepUhRWtUBPwr7iZ/BHZVuzkerBvRafFpXQs6JXGPieDVpFcQ==","signatures":[{"sig":"MEYCIQCstYWxVjjULmNge3NQM6ET76uAcDmXxZH+C4cOvz4xvQIhAKs92UiEQwWry3Bjju5XjQS8sYDaRBJ3QyizG5/BX5S5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f70CRA9TVsSAnZWagAARXgQAJbjLv9RcDW62UsgOUnD\nyMNxhS8PDuU3vyMpb0IfBcge3Z2YleSwk4j8Q01jZrT/1uhtmW+/c5I3lBzK\nW7JApQML5YpCr78jSQ7zgHeLqJk7XuPVaqUXAB5KW01FY/fQ9xopg7ChzjuJ\neSaTiR9uI9ExlQE7VNdvWzdbID8IYVe+3/GnBhsRMfG4+RX0+mp8gOPA6CXq\nOa8CEabkiNYNOQJ7MP8KDq5lLGZXD5OnRv7gmJTk50Ul+wE+63XZgy/B8gvS\nArknjIzFFN3DAJmDLh3Va19jFdGSmmXT4s6jD67Mwi5+EAeuIKgcZLyizMSG\nnxPI9vr929pWRvMUvBH+OaW7lUSboGEbKM9I4o3Z9nKFnpZsCqDg9NPVZmp8\nLUagYooFItICATvXZAUi/32DkSRPWQcUnOxF0AQNhp7D/XAuh3BzQyG6VJcA\nzGPnXEZnWJpvndu+10gzo2QsYZ9nsbNRxlCIbqWZhYVR0EJDEErjS+TmbvPt\nBom+H10sar6zTA36/V6KuLpwoDlhDoovxfcPL4J6YjTgF15UnxCerGb+Q6va\nX+28Ma/Sj5IFIkps1Uhl0h/jxYnvxmR4v+iuy330Nm21X2Lan7guK2gED703\nq4UJind5ISpgpeooZQij/B27HeeNJ4BUoGFqLIiJOoO4kh1Oz4Mh5/D5CPM2\nkPJa\r\n=SZQI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bacdc97357600156630f8321ac8a3a8746474194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/rtl":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/shape":"10.0.0-canary.251ac04c0.0","@material/theme":"10.0.0-canary.251ac04c0.0","@material/button":"10.0.0-canary.251ac04c0.0","@material/ripple":"10.0.0-canary.251ac04c0.0","@material/typography":"10.0.0-canary.251ac04c0.0","@material/feature-targeting":"10.0.0-canary.251ac04c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.251ac04c0.0_1610481396359_0.1730279241229291","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/banner","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.772cc1068.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"46982f58dd551fc8d31276bb35aeb2daff153403","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.772cc1068.0.tgz","fileCount":41,"integrity":"sha512-vqr8uIkQtAPWLw1cDj+3iQlAjZOQOeGQgL9Q5C6LZZbdi6DRTbQz6BRfT60HqWrqzs6Sg9IybmMREpAtrPHfQw==","signatures":[{"sig":"MEUCIQCNqgSTXTBQ3PyzYlolI8kKS8d6UDsDaOZRM0xvqYl3vwIgFbLq+1MM48s/UxPepOePGcFcLWQK4u96QGu+Z1LL7VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4t7CRA9TVsSAnZWagAAFbEP/1ANzlUv+23n6DeUAsZd\np8U2EV3KCEqNmlynYlORXVsydh0qiSpGBp+PEW87LxbljYB2y6q/jXpYX6n2\ndMWBfkEQznw+shV8TTg7thpwUBpow4YYZJz9jbjTg101gjGM7N41W91ehR2I\nxEtBUbMuql+ItkY31sk46SMcQef0/s5R0WgVrYYyF3XN4/2+l0noihZldXDW\nlOFMZMKZT7XA5nYwIV8JC4bKpAdd95x0lOcv0zNgKb/Q0dbiav9t7XIFs3Ca\nSTX509ZqbKHtfjT0ovs9ziaXQGZ7mq8rwKTcUbO56/Km6xsuLDw1JIK6zqvt\ngRzBuVRcII7KDblES4Lr88ZXHeHR98PUBffvU1GxLbOJ1iWyRupAdxBxIp4r\ncH9uAl4pDzIl1ukoCkFct6XXry+i5oP2manHSuL5uSXcQRG5NU72puDcscVk\n9Wj8OLkHlTeCsO/2TJiMYFrhqz4roniIxOznzuCpqHe/IXKnFA/Ujg+2XFvW\nWOZgjRcAU9dAK+yKIeH2EnX20PyXSpjKiY6Z+ruUplc57h9S2xs8YHdNSi1y\nQ3/GgR7TylTqmHv3/FHXQNExc+CmaZ8bLuuozgjgGiTeFRjG0IB6o+cp2jmJ\nCZulvBMeQ1qc9JtN4N3F6W5qgybz4fcwAtOsmPyu6/RzfIJBjhrgBrzaRRCt\nqyAh\r\n=KHdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e8dfb103b25351e76ae27e482ed4f13c4bf997c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/rtl":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/shape":"10.0.0-canary.772cc1068.0","@material/theme":"10.0.0-canary.772cc1068.0","@material/button":"10.0.0-canary.772cc1068.0","@material/ripple":"10.0.0-canary.772cc1068.0","@material/typography":"10.0.0-canary.772cc1068.0","@material/feature-targeting":"10.0.0-canary.772cc1068.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.772cc1068.0_1610582906648_0.5251940274580467","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/banner","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.fe13dd130.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9502325952f9dc219199fde11424327f3ef6aff4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.fe13dd130.0.tgz","fileCount":41,"integrity":"sha512-J2eXQt5kx4GY04aL/HDfUJywrruUE4xlIgDbF06zb98xXHpFEdra7SJ1nPJrElSAGuv64/NLdVcTefFL2HxmPQ==","signatures":[{"sig":"MEUCIQD5gHQU99kDXUsYdR0aBbvoULfYLFBp0OEMkaODzmehZAIgO5tkAB2XLmXaihzrpvUKfKgWhDp4IY4raqZnUJ4ZJgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5pDCRA9TVsSAnZWagAAO/8P/RAAynNpEVIA7XjURY9m\nwxmbM/ywPnIEDFX+EbrF9az+U8hCalyQMKWWPJlz6oFmap+Lz0vLIXZQ4yUw\nt70kR/lgX0I+WrkakB+h4mi0lC29IFCiUENxfgMUUzdkpdkuJhqV6eEhYxg0\nupNWqhG0yOSpYWrSsEoxzVo1/8UUPuSh1FXH6YroDZwiTCg9D7BMNo5Qwbr4\nEN8JUTldCqmsfxd8sI4ZaEO0/HYr8ZBww5Hp8riz0KNXaYTwm9UDZeF07nn7\nAi/Gvh9YhLSy+OdB8A+D30UGhaAiLkaX0oA85xvTm9LcJZtb2frs2f9lg1tF\nMhRcEd2qV3KuSrs/In3v5wZ2U2idiPLAlxQi/J+djECCSmUIrkBNm2DjYPaJ\nSyL1nnGZ9yu9LtfVaBHnzNVmcbDzJIxrU1Gze0WhIGI/5zCebuDpiJETzezD\nxx1KEn+Tn6EfUwv1lKX3qD/UGEVs9x/e7GWhIsH6QCq+vWFE1M4MC/l+/lz4\nYmShFDhGB2pU81dJS4HzfcOrKtvnc3nO9dklw//6AduJcKmC5VN8wkoOZmUZ\nVhgG7PSd2btgE2Zw9CvvfAyqfF5EdEUXVCJDglgU25aHacSW25S7TsKbMvUR\nhdJQJUxq6U6gsXg/vS0/XfLL/DoUEAW+Wd/9npJlUUEr838A03pntxdLO0dl\n04K1\r\n=QAg4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8825c25e04c8e88b7430f2f8e148da8a9197c02e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/rtl":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/shape":"10.0.0-canary.fe13dd130.0","@material/theme":"10.0.0-canary.fe13dd130.0","@material/button":"10.0.0-canary.fe13dd130.0","@material/ripple":"10.0.0-canary.fe13dd130.0","@material/typography":"10.0.0-canary.fe13dd130.0","@material/feature-targeting":"10.0.0-canary.fe13dd130.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.fe13dd130.0_1610586690566_0.4607515803870097","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/banner","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.c7c5da28f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00d2a8d45876f6e903c4225bae0e6466240a85d2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.c7c5da28f.0.tgz","fileCount":41,"integrity":"sha512-9/B2v0uGG/MWScwAdCVWJNUW3Ku27LyuhjmLMTo86BUnHnI2lKiu8v86Xu6TQJDDTMtV6IS618m6T4MDUlr9lA==","signatures":[{"sig":"MEUCIESEB3ey70ljCUwzlCauDvbgu8xYsfsu1kpip0lLG+KvAiEAxhm0EzHo7LSLVhkJSXcNYHj+YJ9xL2Wth9hgtJFVBIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/aCRA9TVsSAnZWagAAqHEP/0VHtnS1EXRBOlP/0xB6\nFLupPqTE+YJrRoI8ADzu3Ag66dM921MnX0N2mcVVE4hEpziIeWlVRzJfI4PI\nonQAN2iDOi5gr/iQzeqF+JO17c+z9tYR13pc1rx3QIhjsEYzpgo+T9r04WG5\nORaoAe3bUhltdfZT+MxuJauFgSovgTq2D2nJdibBA9x/3UsXLf7heXQBaZEo\ntSKuFKEmhhpkkJR7Uc8B+/IG3WhP8M4wgbuYaDXaMJJ2Fk8ljcAcfwqQvSL1\nOhoQWXA8qVFmMGS88RI5Eo2hfnIBHTwPyzcj5FxkhqR2wY4MdIcSRE1xxem0\n0fYtMoyylw2x1u7FuR8JfuiBciPA33E0WZqtW5+O4r56Db1/Jg5VaimrtlAj\nAgQZcN0Wl+6fvjj0bhlC59FCbXA9EI3oRyrQDu8A+1aodUHBbzVcYdtR+QQ4\niEy7th+kGpBzI/XrKLyM+Hu6V0NEkYEzti5UK+2YSw41UbR2RF0JVEOdZ36M\nWKHTNvL5dDWrdPQK5rv4eg7CWKt+BLsDl6q2LBd/JyCp8It5kjlsUW2iIlgk\n06XXJn6KzlOJaj3+2oegBqfCUwplV/qyGmrezgDkiqU4UlmA6H6bi3yw0gip\nSpvojihypy7EwWes+rprbdmgk9ya1BNTO52JlIrzhEO+q12YqiEyRCXmRnuG\nMSlJ\r\n=IqHc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5d3f3a72d4e9757f2993684a89928b04ad29c6a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/rtl":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/shape":"10.0.0-canary.c7c5da28f.0","@material/theme":"10.0.0-canary.c7c5da28f.0","@material/button":"10.0.0-canary.c7c5da28f.0","@material/ripple":"10.0.0-canary.c7c5da28f.0","@material/typography":"10.0.0-canary.c7c5da28f.0","@material/feature-targeting":"10.0.0-canary.c7c5da28f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.c7c5da28f.0_1610588121983_0.9712898395138583","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/banner","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.b2faa116a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"15a861f62c09502c1f71dc7a23a41d80427f1954","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.b2faa116a.0.tgz","fileCount":41,"integrity":"sha512-vzFAVaaj6Lasm2VXJ9RPdIYjfwXk6GCtTT1Grk8x+bclKxz587gafX6BAKzwGJmk5q3Ru00PlapTABJz9tGO9A==","signatures":[{"sig":"MEUCIQDY9rgcGg4VhDRGfInDD03ej77pSrsuxpMaAltgKS1xOwIgQuCe4ix+ocL4XV3N8B/KyVqYtrOf4Tsfk9lffgNDoB4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzK2CRA9TVsSAnZWagAAf5EP/0fKC4fef/3J+qP4ebE9\npbjOu3xsd4MZ0+onrkbKEpTdebrl5ETp7n/Yq/uQ391VJZ/RcdCwV7Lo+mj9\nEe3ONic1ohn2YxrVSIJk7DKk68drf/j/BYAmW+DRuQDVYMa8BpX+OrWhdPas\nQcXDxFvsYVLukeUpqo6/3kcmzn2RUFHoaQQYQERarAXrrUF5GWEYaHUvfmNn\nzchDyD92bubVZAlRftpOCM2XNJTm1h8cbmVuLWfLLok1pihF7X7VsXhAsEuz\nD5maxdnfMbJnwuJRjQXiL+MCHwhwaDVD2VEQkv5J8FzNxKvQnKxfhiGYHmCm\nfCCzw/JbssCoQ2VMR03PGtN38Qy1a+S05ypWDG8+7qBHma24kl/8M+1mORSQ\nFosfKEHVuyKDPcuSQFCYaA1pblyWjgGt7TqVV/30nc/ukMNjbD1H3jbR1mZB\nkLEOsZVTMExY1b6v2vjQV+swSc1Eb5kmUQ24lJwqkRCPGGq3es6yZsGYzN74\nNhYVu49U7sc6hB2t6KgLLtHeEfYzH9fa7SvMngNDBBsfTzYHgtZKMgy/JfU6\ngSuF3cEPh8Mae81ejQ5f+211PRTwAVfBL01Wl7aFks0H9W+/BYVaXOvkDzPY\nMtIIctIkVtrsGHs9EsXT7Zh5o2rF5D0Cg3gVj+mJjSp7h5Yq5Anej25OqYuT\ncYUD\r\n=Eam7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8c83e6751cbdbda8095b6ae0686196398066d600","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/rtl":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/shape":"10.0.0-canary.b2faa116a.0","@material/theme":"10.0.0-canary.b2faa116a.0","@material/button":"10.0.0-canary.b2faa116a.0","@material/ripple":"10.0.0-canary.b2faa116a.0","@material/typography":"10.0.0-canary.b2faa116a.0","@material/feature-targeting":"10.0.0-canary.b2faa116a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.b2faa116a.0_1611084469824_0.8057283233727686","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/banner","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.0c95c9f7b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abbcc452b69d7d8a7ac6333014df509e055d904a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":41,"integrity":"sha512-Jleyvzycd4iEnNWw8AJ+G+rjeQQXIMCPgohAv22VNU+LvcIkrmoxsHw3EXW1TggjlWU+It6wdoim29Yt+9LYWQ==","signatures":[{"sig":"MEQCIGpNL7g5X7Lz8DcLJLV0oMja3wCPhCYpGO+ioR/6DxKGAiBsMfZj/FztIXrbN1ThAqGv40CqZXIsXUIe7KFbZNyCmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2NOCRA9TVsSAnZWagAAmJYP/2vknt0s857XQSG1auvl\nzGdA9Qj8QdYHHN9fETsT71Qh2A602dZCR1X8U96uHVgYiOsnAO0JzkOW2NXH\nZjVywmeQ//45c7zgZu9yibRZHYNXuIxkFfe4GGkEnTuJaK7YMhW9vU/5tZ57\nOMPl4bo7dguCE4rIL0BqKN4baq3Vn4/97I3cSQq1yS8IFl4SWVxiJng/cXyf\nHAJNMnKQ0RQAa73B5mrzoOvkXq22xAmxb+H1EBlcqaga0fgRY4AeUYfKAtFM\n3aih/b6n8R38p1mNvunsP/ETAE/GitLTK0vAbvItpn+EJgssXJQg8X757CEI\nHK1HCHDZH2iotXdyjJ8CWP2ckDL0DfsF56iWc+o30Atv3rcxx1w6vlHq+qUi\nhQI9mAYm/llmfyH/ink1VIlW1gSXlSPW0sNOSiFHSBN04RAXekEHQyDkjIgd\n6lBsyBjIAI+84ifzx60KjkMg81vuvnp6RWuYX60NhSv1mCb6+UEW6iqMFHYJ\nmQ4aGnJCXHOP5f+NZ0Pj8aR56BymAKTF6ypCvdu7ZtcRsE3D6iCcyEiVLTRu\ng8IbQK4MQderpiI2lBWdyjZVAB6QkosvkACyN+/bAPDIS6Z34JdVrPMHGDXK\nz+IvnQVIb0G1v3u/0BtasvUn1Ag8v7QaH/VT7/Jd4xH1u28ZU+XUoht1mOOd\noMW6\r\n=Y0iZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c9db31c38cf439af3f1498600e029c2dd812acb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/rtl":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/shape":"10.0.0-canary.0c95c9f7b.0","@material/theme":"10.0.0-canary.0c95c9f7b.0","@material/button":"10.0.0-canary.0c95c9f7b.0","@material/ripple":"10.0.0-canary.0c95c9f7b.0","@material/typography":"10.0.0-canary.0c95c9f7b.0","@material/feature-targeting":"10.0.0-canary.0c95c9f7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.0c95c9f7b.0_1611096910297_0.47753505997449364","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/banner","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.5268222c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6195a909e8a5698f1eaed6c1999054e6a7a217cc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.5268222c4.0.tgz","fileCount":41,"integrity":"sha512-RSdQTYybJaevkeguqs52DKMlGeTlCVXm0K7LZd2JjG0LeU2lmjdRA+ggW04ozcVfT5vhDR3+Nvirz9uqP4vpfQ==","signatures":[{"sig":"MEYCIQCEJbTu5Iyn9QeGHlyriezO+KB3hkX1ru/0YnTjlipdiAIhAKa5auFNW90NvLVINvdSkglqYdgfEZWRJAS2UXMYfxco","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIKOCRA9TVsSAnZWagAA4KQQAIEKIa5I/2GH/pspv9+T\ntO/ZE+XUHLROKVoiIxRD07QFwX2eNTP1trpKPcs95LbZ8+K7mewkVUV/MZA2\nGHvtIxVJAOZVEyUmGNdh56LiW/P0zyDhobE5RGRV+MhCOCe56bCpQtr+ZAuR\nbU7klp6MKP+QAo/vsoP4IleMUuvYcj7nY4+Gf5ofh1+Wsavuma7J2lue7VuI\nYYaOVlNVgNuqhtNDiua7sFesZHbuVMcPhQcCF85gkcFjzn28inXLDcmLAIw6\ncGg39HAfQzRdHNIHjfmhJN3YwMR1kjte2Hl12+ytPRhEueS/k3/WV77PNOXk\nKUoz47nJd8zryJw9Ep5ybe/TzkultQW/6f5QXWIkpjRPXhF0LELYHWJuHxSC\nUXkeBGQfsHhBeVhFmV51jIjju5a0J2ovyxkfeh03ALLcOlN+w2dC8B/DhQ4f\nlY+IRAKTQbmxPJOHO9hZd1L9Z56QSGqiWSiLZplO0izatLqODCBdq/tGGDbS\nmvSZeNV2Thbx1JJy5dbydnUG2mt6BXjPsDy9E1TX15tMZDp0fTfYy9sKLTh5\ndoCKVHKIq6fLaljVa7o9zMSR9TqI39GBck9+hymyc25gdyVkGoxltJ5Y6KO0\ngqOJ7sqQmyVKBxGc54Dy374ZI0ZdbulZ2ARtLVc7KUC4SXutkGpRuqyhkSvs\nhs6V\r\n=BwHM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"149775a975bdac97e3f25a99b254c8b632e6ebd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/rtl":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/shape":"10.0.0-canary.5268222c4.0","@material/theme":"10.0.0-canary.5268222c4.0","@material/button":"10.0.0-canary.5268222c4.0","@material/ripple":"10.0.0-canary.5268222c4.0","@material/typography":"10.0.0-canary.5268222c4.0","@material/feature-targeting":"10.0.0-canary.5268222c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.5268222c4.0_1611170445953_0.9637286672830454","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/banner","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.2ed2d829b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e4fdb01bd9a83bdbfa2dcafeb83c878a4ae95ec5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.2ed2d829b.0.tgz","fileCount":41,"integrity":"sha512-lp+2OwVS2ZnOgKpiFjQ/JwxEB/fvknIRlojQfTvnBlO7N20sJfQT+kFH98Uqy0CoK4nv8pmxVjxJt6uF5knnBw==","signatures":[{"sig":"MEUCIAgwUgwins82ewX0dBnAV1q8LmaIWFu3TwYFDL99/jSCAiEA/WVdSRAZ6YiubheEkZsS12+DIMQAaKBkau8vSEutv1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLglCRA9TVsSAnZWagAAgeEP/2cGVxD51s/TAuIqdSG3\nv6swxSYYzKOSmrhrMB8TvTsAhSVwdl0ubjK/b5leutyjSOv6Bs8qHTF1q39E\nvKOtH1MhwSHjVLoRBdTi7RMajONG4GcPhjBsjCkXY0Lw71V09qPSeNv6YH8+\n+nr8cBPoXOe2GxY+r0zrq3ir05u7bdEu+8lU5q5JF9IGB7SLqNxpNNDL88+m\n7k5beVtWNQzAGvtvApV5ZG7DBhdZRu+lDkPAJ8YYFfYizuZ92BBIIwiWYiSq\nC33/qBrDTEGxAX+M7Iz4UrdFzP0DiEO14HutnBcKSLswXocSPDJHwcKWsBtg\nqsIYbXL9TSVCTxKckopZicG5rtXh4aIdSFDHVUcJgKheqIxY2/Rcz4EdC1tx\nPIhlFkZzvIzjVexZGyJH1zcbSUZImteFhclWfrImf/9cwX2EiDBaaBWGstIK\nGdotrrB1JpKPrcS9mTLME+jK1l4wMPEztnvjdmeDmeDvtkYBgNepdkL2M1Ci\nmWsUq/OKbWzyCC3T4qTLg86DlvNCLIIyZkO7xB9afTjflLN/ivNv9S8Y4eQo\nHJ998YVuJTUWgf7AEVwGbTCaZnovzr2QBBpBBjDXXS+H63exvZHoQChWLA5w\nP+OCiOOFwAAgSmMFxSOdLA/Nt23gnNcsbEBBla/4tVuIUjbd6+tJdCfanGV7\nyjsa\r\n=9xyj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e937a8c393e2170307639b8126f0a461ffaf9e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/rtl":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/shape":"10.0.0-canary.2ed2d829b.0","@material/theme":"10.0.0-canary.2ed2d829b.0","@material/button":"10.0.0-canary.2ed2d829b.0","@material/ripple":"10.0.0-canary.2ed2d829b.0","@material/typography":"10.0.0-canary.2ed2d829b.0","@material/feature-targeting":"10.0.0-canary.2ed2d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.2ed2d829b.0_1611184165361_0.4701621478535811","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/banner","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.df00c2b30.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41476bc84ee74725afdfdd83d45a02dbba041f67","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.df00c2b30.0.tgz","fileCount":41,"integrity":"sha512-g3itgVp1DQHvzJO/cgKCvTvCF7385QOBZMqA6YYidaNmFpymXebNxd8W0lR1aqsDRIl1whnadBq49u63TXb+Rg==","signatures":[{"sig":"MEUCIG9peMCHqBWJpl90Tba0ji+6OfhB3MGwTWKZdoTrg0N0AiEAmDR0+952ZQv67Z+4/HlXsOs7EK2RRdyip0FZ+hCg6NI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdxmCRA9TVsSAnZWagAA+VgP+wT9PpJO9BCO8eGpFp8t\nuCjf8wwnijeIwRXS0jplqQwGLnqv3+h9AQzSPdDLhTtL+uN+2TBt45J99xYz\nMIrZ5Z1lEJgpWvvnsrm18wNbSiNtt0JX/udcu/ACvY1KM35c3vckQRWcV0g3\nxnrFQLt1fanxSiLANVjDhkxEfWAhQyDG6jD8QuBZi/Mr5Gw7o+IBpfJ9ze0X\nCniUUu9agLRwY8hQD3Zzb4QGwasBRr0PTQWo14aFRFNaKhzxN62CMYWGP3wa\n3pBHETRUtb15K1sJeayeqq7TxP3esuMdt8QsIDepByiEh6PD5yg0PxHumnnj\nfP9w0J8yDS5wqq44KUC2GW2v+Zpu9Elq3U1gEDEwNoMnD9Es46IMEg0ZEekg\nF++ZpbhYSnhE1ScACUS3EexNasKL1FCojL3nCtwuKbM31lPk3Dqq2DsVNq+6\no/01giRxX/Vbp/L9u+W9awBmHleWw/c5nnd7WmaXc50j3pwTibrW07l27EFH\n6+CqKQx30s+sdhOx7WdAulvBoyWQRgfFnu9PN3PzHz+vlabH98s6FyqqkNbn\npetSH9B8s9BNkeWu08kDJnbPxfiIym1WqqiqQl2gZYIjPSNjqFGeHPVYNL6F\ndo1FKUx5I2LYBNGmynewWoDBaqn+ywH6Rsl45+9xgA3qBD4PxjRm6v4x/Rkg\nNc42\r\n=kleB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b80e68ca5ce1e4ff7a83ec06c805029869aaa5fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/rtl":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/shape":"10.0.0-canary.df00c2b30.0","@material/theme":"10.0.0-canary.df00c2b30.0","@material/button":"10.0.0-canary.df00c2b30.0","@material/ripple":"10.0.0-canary.df00c2b30.0","@material/typography":"10.0.0-canary.df00c2b30.0","@material/feature-targeting":"10.0.0-canary.df00c2b30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.df00c2b30.0_1611258982031_0.29244497061151575","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/banner","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.fd61b0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"340525701ef86b1e1b64503acf9c5207b941ab68","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.fd61b0476.0.tgz","fileCount":41,"integrity":"sha512-yf8DLQtPacwWhkPNj1rkZRhWhKBJ/qG+7fbrl/KRnowjxeLOZlvATYtej+y2LsbJKxe14/DNcOAMcQ5xm9hAkg==","signatures":[{"sig":"MEQCIC9pjddcGLZC2fVYsamtcKvZuErVd6D7YkCPguZiQssKAiAp4etIdhQtS4tbD9NOCrQDjA2jtSgHPA6axYqLechyNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":433672,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd/OCRA9TVsSAnZWagAAT28P/A8zjCIoCVIpdRbjok94\ng97UxRvchaxoirYRPFmMHi82bXV6Cu4AlIJ+y1/2ZBW0QW3tQSQkdgyl+aEY\nRMXcw9203AZQ1fC0K/a2ODDkshq86iNsDk+yDqUWHJztEYJY8YSa1dM+Vf5V\nzkd7iSOAwpdqoxlCqynIHeNEnBF+OgC1t7D7TEtPkWjLFCEIj+SJd0NR/9p9\nevFlTrebySNKEIoBKvUArnNEDwSLkgfEL2AqauTqd5qlHGiTk2igbduvDYgR\nJY0SYhSWZjg3iCsCElc9pwt8OfXQbqCpZIZvHNH66rIEBMD5wn5aeen73cKx\nMWtefP/qoXQ7N2dUA+ZPMKeuB/lhRHy1tMBjEowj3GIEJzxO7yyV8wNgpYtH\nnKqHXnTeM1gvloxeusE5BDDxSeNs/rCvF6HU/WZxTSSKWPSHvF0ouDy6U4XS\nidCIEIqXLcYQS8mTrtHVvLtDTkXjJhtOPWXf3I0BOLVI6HlMvbmO+zKxgbw8\n0TyPg0caOMzkuHnJgBliqknGXm0o6f76R3lPlleHo0f0TdK/7NWH4EgSJ4Ld\n1HuusOiZ+bAEzsu7btOdZsfUXL/BGt8d87HsCAZ1R7a1eVtGWilfqYlbe7J2\n389916TbJGMv6rAPVThWp9tdHFozYIf58ysFYwQOrrUkYPQPCiv9EwO3A2LH\nDzxH\r\n=EYCz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"67853fc809fc128218f211f5b54f854f102d1ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/rtl":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/shape":"10.0.0-canary.fd61b0476.0","@material/theme":"10.0.0-canary.fd61b0476.0","@material/button":"10.0.0-canary.fd61b0476.0","@material/ripple":"10.0.0-canary.fd61b0476.0","@material/typography":"10.0.0-canary.fd61b0476.0","@material/feature-targeting":"10.0.0-canary.fd61b0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.fd61b0476.0_1611259854411_0.047271857000170225","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/banner","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.3fb3a0265.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f15d3798b070b091e0d94d0fc59bbf9d3cf69f62","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.3fb3a0265.0.tgz","fileCount":41,"integrity":"sha512-qYXxQKpHBaY59ezWGaHLpygx3XylDxHxpHr6GWQzh5DTFt0c3sERxhbSGzWSyEZ2kToCXUmLBnK3hGFSGfrazg==","signatures":[{"sig":"MEYCIQCgedkNKat/P8v2/oYQnCPQLbDXZLHd03eSbORXMJvCqQIhAKFtO0RNXi9ZYUX3hQcJe8exOA5PW6peOCe0ORTHux/T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbxCRA9TVsSAnZWagAAhZsP/R3xzOk16noh7i8X0oDr\nHsCQZDWIE712TA/PdpmDsN9OiSKdyiiJU96ABs3UtQAgO/C/9qbv9juw/0K4\nrj1IO4Lao8Ns2lTE3OGzVebLQnJLI9BGbdrPVp/nqlEoj51xQOIC7GrFWh2Y\nNuq1d1MK4vxm5gGgvh9EtTcAbDF27J+Ff53t42nkgQGvoGChzvQtJJBhPdQ3\nKwL4+VjAQGPQBr0x8gce/YnzmCgRQjvfcjA8SWjPpus2E2G9slmf6maJBoWB\nTHRDkSwi0uSJE4lUR+WFb90dgdcFXR8fiJoBLNAh9q1giukjfBmeJK2Fb46j\nns+xHED2qvkasM9whiBdWtG5dx0o3S4ofOkt6jVaGpxT939gqjnVo1A0f2ki\nGHmin8TN7HCdpGPY4U8be99KBfbYfTvYRqi7yXXJdV43+5FMiTtp0uy/j7Jo\nFWk9wmDLYhumc4dXfKjIywAk4LHzH9bbbDTl/O3O+WQszs0anvrUGotQecM+\n+/Tbj2/9a2OyotkIBlQzRQVBqSJpn4Vr1uMNtmUGM9k0tJ2dvRQjmXv5wWMC\nNVi25afwdItLUhnodbNeK8CZ5O4W+VGRiod8rnKnZcx0wBl1KhXujKtxaKEg\nv7IzVHZqZIWjUM8+yxvXmfYfb4o2lw7jp5CTEv9aP3EBiKBeS8TJB4vzI8+W\nfC7a\r\n=JsHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5e619e42cc5398fa779a726d775cc7e9a72a1acf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/rtl":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/shape":"10.0.0-canary.3fb3a0265.0","@material/theme":"10.0.0-canary.3fb3a0265.0","@material/button":"10.0.0-canary.3fb3a0265.0","@material/ripple":"10.0.0-canary.3fb3a0265.0","@material/typography":"10.0.0-canary.3fb3a0265.0","@material/feature-targeting":"10.0.0-canary.3fb3a0265.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.3fb3a0265.0_1611273969076_0.45612899261950623","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/banner","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.07deaec27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9a9f69989b7ec318aa0bd80b0f9d11a109ab0501","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.07deaec27.0.tgz","fileCount":41,"integrity":"sha512-Z07/ufgLtH6TMctN/Ztocq6+kPMUupKg93dk/6tNdpJ1qMM438cnOrKIiqAGMTnjxVA3qbLu5djkrn5U2jGvOw==","signatures":[{"sig":"MEQCIERD3s/8mGfgjXYTqJ0Kz+lrapNvl+HG3jlbRF2mbQfZAiAOalBs6m46QoDWAzRG6LHMaZYm9K0MlkjavopESFrxXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwQFCRA9TVsSAnZWagAAS8wP/0Noj2feZRQA/2eNdp2H\nLgiIkjPLs4ArfG1nqQ0xc092vtGV6OhMKQNauGb3sxMjakq7t6INB3n2lwV2\nwDaT9NfgnYVETDLHeeonHMmoqOcPo7m2MeyI6Oqkd0tN0QeRpf74LvjmBAEQ\nIBkae0QU+6I+o6hOkfs7nc+5PwmBP03vZGyZBraC2Dx6XES73uAqv0FlLgfx\nOhNRN0/pjmPUymSRJUrlYVTCWDRKb5MTJwZTOy4Ij4Hfn2rg+2vDjNn7eJYa\nuz2/IzbS0l/uAdhXOsXzxxOB6iVqN0FVjr3DdUwpxcG4wkWv3j29FEb4D5Oy\ny5Nigksvyw0WmlgltA/TfxYFH0ROXQsep2fU3Vw13iXbKi+Vzt80N4MI1v72\nquvu1Y7Gy8gdIf98lBBA4Z7jrM4GA9YNFQNqJnSBZV83E8xjX5fgofVheQEf\nxlyxvt2xlWUnPYQJtWV8f0ex26wyfd40ZQt1l/M+DQ7TcX5+zwUmnFTP8ixj\nUn0NNE2ZV/aH8euNG2G7Ecvhj9tN/aEjuKLQVuAxIhvkZ8L3tyNSPnjat5fL\nhMw/CVNRrKT7BBVWk49BqreBrX+kEIZ2lVEKJ36k30Hd4NUDV479zvf3iUhc\nod2MzJeUKvqK5PGD/mPn77Rfz33ZC5Jmir3lxAs4fp7v2uQVKUWKtqDIO8ij\n4UVS\r\n=vAz0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"be75b8d81f1ed6f8ebe94c8673f32110d71cec7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/rtl":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/shape":"10.0.0-canary.07deaec27.0","@material/theme":"10.0.0-canary.07deaec27.0","@material/button":"10.0.0-canary.07deaec27.0","@material/ripple":"10.0.0-canary.07deaec27.0","@material/typography":"10.0.0-canary.07deaec27.0","@material/feature-targeting":"10.0.0-canary.07deaec27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.07deaec27.0_1611334661443_0.04313195332579678","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/banner","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.d2959b16c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49e7c05e5d584e055f2aa83a7fc06f0ad12b033f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.d2959b16c.0.tgz","fileCount":41,"integrity":"sha512-yL8NoiosfsdXiIkObyCJ6ASPy5gANWzLs1q2wdVlkxhzDqiKqhv114TsLWNW5uoBxdpRzBDOLshWvnXWzODJOw==","signatures":[{"sig":"MEQCIFacQJ09OHVwPye5gNlwZAQDVBHrRBqDARaTGkLoiJpCAiBCSzWBCT9iARXfwJLcZebPg49HUOCkATko1BAn18ruDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx8jCRA9TVsSAnZWagAAUz0P/2LU6QM6SebgeXfrFnKa\n0fCAZ2rlxZOkkZu/URYHsZSQA8YYeEQooHKm8bAVs9wMcde+jfl93Xd81I37\nAlDlosXRtfs1NaR+JNO5uySTqXip5sC0STs0hYpKgEJ7cGr4mZqnzeuqjGFR\nLmMzwELn1PAliPcVf6VzU545pAFLQunPHFQtYx5CAlqNSnTyP875SmsnQ800\nK0w2py+auewbRN6QmZn/s/mSlpAvCRxPsDGl7DUo1TMu78Iq4cXQOtH91MoT\nDA4sVbZfJJBiBqpb2A5pDZAtA5KsQlOnRPut0f1J7TSpkh8xRSmtXW8ji9zL\n/Kf5/rDF92FwOuSuFgZe1vy8hcgnnvsfu4vXcIJHRj7/YNd8kwACoGLUoloM\nLDLVTQTA0o/wTZh5P+cJaUutV9GFhkAGIykCeeBvgmXz3csbXnuw/hoipf3t\nyta425R2LkLKGYAPXSV6QMCrtAAUM/cE3gsZiiRIPDXb5IS3df5V4gKkT5J1\nuAtaZyrL8zMyvd2Ehap37PxQBstQD5ay2Ugo98Eci9hIbY4Wi79BZHlrkkQV\nPF42cj5UWfjoPeawQko6ghcwVHlpHZWmQPKLSpBqq5e8K7eWvhhC2dqb6D/C\nHjSk942u2EhxgltqBN4vOTo3pZ3FSaH1SSxEXCPgUNMGDQ6U3buNtYRkZu96\n0OZB\r\n=Lerx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9a89df0257ea15e66bbd565cfea291993f0c4ef6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/rtl":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/shape":"10.0.0-canary.d2959b16c.0","@material/theme":"10.0.0-canary.d2959b16c.0","@material/button":"10.0.0-canary.d2959b16c.0","@material/ripple":"10.0.0-canary.d2959b16c.0","@material/typography":"10.0.0-canary.d2959b16c.0","@material/feature-targeting":"10.0.0-canary.d2959b16c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.d2959b16c.0_1611341602527_0.6287243002858613","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/banner","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.75f3bfe7c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdcf8ba48ed1b6fc73aea916533ef7ea7eec2c08","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":41,"integrity":"sha512-79BdN9gbflj6NQ9W8VsTidDOJv64P/sSrtI4LBuKMX3o5flMrwFMGijKeyJzO5I4f0ITAgNhqXqC+BxTgcQiag==","signatures":[{"sig":"MEUCIQDdvcrmK8LGWjxxOSCSu6fUVFRu/zkMIvcb+4qCFCjL4gIgU+n+B1O1jpVTAtoL3zjyJBqyOmejLEM4EUNZlKOfa1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1dACRA9TVsSAnZWagAAADYP/0QX5Zilut/30WFq/ftq\nDBmnGiNsyM7pGJ8eykMXlT3PxQDcf/t/384BTRdOSsruySNa/7YSs3Bt0TuE\nGPFPSupmx2UcSeBkU1Y23e8d0xUqp/Sj6X4s0ilEol8YJKt0fVLjcl9CEmXD\ngyRW1FNP7AB6Lizc3wRYv+hKBTWUh7Rj4EvIgEF9A6ERtBROPtdFlobJv4Zp\nWpOhwrPxhXuq5x+8ugQTBTagx2ZOp2jRdh9oVrCYR7vwrEfOb3EgHYypn1BK\nzWH1xYSxtJNaSafNduqcN+tTrixO+m/yr64Sj0PeEt9lo+f3cIETpQz3ddq2\nBKsIJ3Hbhwzntco9gis+K8tibNq3oFDV+PuVpqY1/r5id8YlHN5CUzAHZHc4\nGYjA2vg48yjgdkNea4DsxGcOK5/205N7T+V9rZZxiKdJNITgPun/4aGbsq8T\nStfH4rLmnj726f8dXf6QbtDClpW/bndgks1yKb3khcls9eIlNImdebnVpNTV\nXcost82ULQfihKjdaqnIB9UdAuef85/hMNTqSnMjxq4/rNzqvvy5RO20XHNN\nzpdbYVxmbEl5T234vAZkBGLUIqG1qKYQmF4dybAYzJkCgI96nrtb52Cm8rXG\nYptTcVzMiE/tvK/SB6qbj01hxQlILBZ696ehNNXqDF95Fq/y86wjj/VTPjET\nhuPq\r\n=IcV2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"057941e604e02f88d571d61967040f58bf499bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/rtl":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/shape":"10.0.0-canary.75f3bfe7c.0","@material/theme":"10.0.0-canary.75f3bfe7c.0","@material/button":"10.0.0-canary.75f3bfe7c.0","@material/ripple":"10.0.0-canary.75f3bfe7c.0","@material/typography":"10.0.0-canary.75f3bfe7c.0","@material/feature-targeting":"10.0.0-canary.75f3bfe7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.75f3bfe7c.0_1611355967790_0.2219182263446544","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/banner","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.b9adb7a0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fd9c684e029960c910120efa3f84a345fe3c647","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":41,"integrity":"sha512-cwAazK34ViM4Y75+vApsgGbE+nscenAgfaqUPlKOw/MdwxEk0LPbhRJdLG5Nqx1rvmO7zA5hZ7JrgxzW9/VaSw==","signatures":[{"sig":"MEUCIBm5OC5k9nRxE0pDVDT8+hi61CNnXi7EwlO3ZgZCgTqwAiEAi4aK/FUG15gifIal6PixkcHBgd4gq0AZYwHIEms0cfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2GpCRA9TVsSAnZWagAAGIEP/3Nl/xTqwwaSOqAxdk84\ncIlPuej4K+8tDr6HJI+nXYK9xc2hNeUoWf4rD5DDa5pSIBg5+XzdFBoRylQR\n+52J26n1Mehm5nkW0pvWGLWwfmkAWwZi9XfPRnruZYIbMPYjupeU4ndihYDS\nrQzIUOUDOvo+ReBMENB1Dk/W5QrwYyrnbnPsGPBZGBVeE6ywqi43Swg2PH+V\nNbhlZws0Itf4o5owWL71ikS4wKbIwk4ISKqS9Fwrf8xIRDk2+CI7q+nFvxB4\nPcIiQit5ws0Oeyf35Vr/hkX1O2W7YzrvPGwjfGUkZYF3q8QnE0SOdNEak7J9\nIMfCpGL+pwH5nEGxdNftPuuBL5CBVxlr+IEww6ZeGQIwUuqul7LRMTZr9x31\nkRn47JOTT6870Dzu8BPwu5ChuJjOrccusS0Q2pZwLyR3rLoLDEWC39RRmdwU\nMK951oDJ/iaE/Q7YP+yahD9gJ92hBeAbkgvl52c1vkaf0MkSS1yFMNVYxUZm\ncqFTyeNmq5apT2zDYfDarsHEQTg8MCsjrgZ6wXYmJNRZnoJBWlVJSuf54Obk\nom0aRsyCyEZX/GvpJTXyqXR5N/ZUZOx6qdHYmrYpkWQtVYLP4aeCwnGenQY+\nSTh6Q47fq/La/r0wyuqRvI2Nb5XcikoBqhblbPSQSi0e86A0WHOHx0qh9iic\nOQ0S\r\n=piYV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a591eb080c699d02013eb9ab0090fdd5e9813a72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/rtl":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/shape":"10.0.0-canary.b9adb7a0f.0","@material/theme":"10.0.0-canary.b9adb7a0f.0","@material/button":"10.0.0-canary.b9adb7a0f.0","@material/ripple":"10.0.0-canary.b9adb7a0f.0","@material/typography":"10.0.0-canary.b9adb7a0f.0","@material/feature-targeting":"10.0.0-canary.b9adb7a0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.b9adb7a0f.0_1611358633215_0.41565156262014513","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/banner","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.d29ec2862.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4aa99c3a9b34a1c3f0b4eb31ecfe0d0271e1fd2a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.d29ec2862.0.tgz","fileCount":41,"integrity":"sha512-gjabU0fKaasfwAo2RDw+EKyn5Bo4oaIR4fsxMFcmFtNiJwGcLUJU2tK+HOlCwgww3zv+EPvLkWm8zQ44bIf4cw==","signatures":[{"sig":"MEYCIQDU9odDGbiZdcCXNbZMIHOIvdCmPQJi3h7yH3wqIH4RawIhAOusRtDDFDgKKpCqS8uPDh5EZKrf/rnBhgkwELjUlhAA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432514,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvD3CRA9TVsSAnZWagAA05gP/3BWBHY0g7fnflac8Lj1\nAFUcraIBifBghukcPYPhdNvOOVSzQgjRAmBefgUDyUwWPz24Oez8rQCjDQVh\nxzBAQsgItHOfUYqS6ZElstJM7Up0YErcPzLkVLUw09AMyG3nd7vSK5nNLZpc\n8yFRBgcPHPsEGSmkuTu5aOtakkxUKILTW0xSn7+D4BZm7Dpm5CvWWwfVci6Q\nQKFYzlAPJ8QSXQqyT0UAMcraqdHc9Z9BzkReRFS9+/ChFZNXgpVmBbHTOETN\nKNdDBtOx8DZLd9QAJ23NZoKol4cMrjAm57Qvgir5lPtlJTFKmcVSdnaF72x0\nsx9nYkDknRz+Ff1JNzIZMPsJlJ84TSX2Z/u1ACeJzHr0J0g8yLiY9DBQpjRD\nU7SljAgdxVYJ2Sz7tp5LyXKZWxpoRC8Hs1iyy94TDbGxIHLjU/oQEK4OF6EY\n/vA6ouK3PXs+VX9UbAMTPf0jM8lxKxz8b8P8uSxOJWok4Z1j+LLFmIg2AT7a\nWKZ8JELsFPQezNRdcDz4sSKLnmf3ltyFQdKXyf2WtcWGSShlWo90H20vLxGQ\n0Hu5GRv+25kdChnGdqeo5ubGRljUM4NG3s9Fce4+Lmnx+hRWo1am8F+AwYXq\n4AuD2agDqBRgClxmyAxAlX8M2xm0B3HtkXah8HMgLnd/VBCSD5T9lulyJ5vS\n/Lf3\r\n=Oqqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1f2d18d6e94fa1f0808b7d768169b9f4827dc692","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/rtl":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/shape":"10.0.0-canary.d29ec2862.0","@material/theme":"10.0.0-canary.d29ec2862.0","@material/button":"10.0.0-canary.d29ec2862.0","@material/ripple":"10.0.0-canary.d29ec2862.0","@material/typography":"10.0.0-canary.d29ec2862.0","@material/feature-targeting":"10.0.0-canary.d29ec2862.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.d29ec2862.0_1611591926641_0.19410318889709455","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/banner","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.96be07c68.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c12d7a7b84678b6111581630159a003aacd709d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.96be07c68.0.tgz","fileCount":41,"integrity":"sha512-Jp0+WwsnJ0fvd8DZvveG55I3u2QwaUeMJYBlNZaanATGnhf6uSo/V/Q8WRr+0VZcR2eiYFo5MFaGuCAU3zVMdg==","signatures":[{"sig":"MEUCIE2szKEwH1U00xWToGLhVEtcbKToGz2EvDeEMMJWAGp7AiEAvR1hkJi/Bk9zTMF1bxS310E/m4iEgOQ8byU+IBYtkGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD141CRA9TVsSAnZWagAA6AIP/2Vz0/wmj261AnQvzNxe\nxY+NlsRwQhtv9Np1VaP5TyahT06rb/3HCfre1IONFd43I4avXxJHSyOL/eB3\ng7WUOuYTDyB3G4jYpHOGA7lOhlbIg0rUIVmu7fu0X9uZgvdmDSicXoNUs5JZ\nBREliEKZ5ruTaACSZo3TYjFYgu7tlxtpZpT8d625U+IaUfPu2GCGL9uv982T\nmABCDjf3BJ4h03qoMHs0eT/wDbG+szYiCZdnvYYb8Pqf/3RnxHEGtbyStLej\nufr6xi6kJ4Jqp2LIRQkIk81qtJTbUkkMsDjUZGSQjXBBFQdtyo/sBrgUcV6D\nNt0OoCn4bmPrb23tIVlnDBetHVgmyGjxcqAvMJBopYi1AQdl4nB3z+kSaGGA\nYpxlWBHnmYMApf3KVouGZRgEG9a5lRZlqUGay7Z6/4Tr/67FFGHFV7E7fNH9\nAohD9+6g8mTE17hrrCGpEnNQSqt9WXPMG7goEDEGwzHdwCTbu/WXHlJb7g6f\nRyGhZ+ISCKstP0lWhiSl0m26Ihg9Kzea/GM/qgfFaLzVdAvYQnPxRpuc0drr\nkQofufHXhs1oDKQsKA7kAZVtMiA+hddSRuyrNwkdiZDTHXzx0TUbZS3K2EuE\ndCkZH7+tcPKinVVzubGPfMkC8CcO7lR131+omSzZylgRqPly7YPE5YUq0Jqq\nnF33\r\n=YNf0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ad510acabea4f02cd7399e109ef73d3b0bb52e0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/rtl":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/shape":"10.0.0-canary.96be07c68.0","@material/theme":"10.0.0-canary.96be07c68.0","@material/button":"10.0.0-canary.96be07c68.0","@material/ripple":"10.0.0-canary.96be07c68.0","@material/typography":"10.0.0-canary.96be07c68.0","@material/feature-targeting":"10.0.0-canary.96be07c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.96be07c68.0_1611619893098_0.36556221650198006","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/banner","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.e383944e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c3c117a14fef8326e257eff6bd0648cb1f78235","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.e383944e9.0.tgz","fileCount":41,"integrity":"sha512-DKDrpmabM0tlle/sHJ34MiR1lia+Zyt0/k1AFJAz4J6JPPJ/XjQ2sOGRvNk6F396hHOdAhs0Cp8Q0FvN6RdNeQ==","signatures":[{"sig":"MEQCIDqBvXy5SjgO9GizL5w2+TCXe66cEWgUK3Bs/KppLUKzAiBGA+wHAxYWj2x3TdTBq7i5+UqteSlseeDXvHFIf3+0Yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3RmCRA9TVsSAnZWagAAE1gP/2Akc9wgQusaviBda2Yq\n9BZaQ9+3GqJ+axKvuTpUZ/zD2FWYyfspCBZr+7NX+Z/a+b9ejO65q6oHEOI7\nNAVXaGkMh7/z37SGKaGML5E8DiJh/lPA14dABzuAyFr3xLcuYEjkfgIHITy2\nWmlnmzPcBrQxJXyYCUty+N4ody5Uxgnw8aXZ922CiahVgdc5PW3FFLEMxNrt\niWlZE6ZMnmlFoqd/mbRaLSEaz9Zt8lVnIFjWxAkfFUViswJftCFi+hOG/FHH\n0bnuxpxxkw2Yt+RLTdQlo9CXepsf41p1pZGirvAxC3RsWFlr8ckgTnmTsG02\nJP0YLXzPNPHpdjw7lJbI3RcJIwHpRjOorP6Cu3BGeH9IAn1+rUdNBZ/V7b7/\nsT9Q30xMWjWCKj/b8lH+n34NtIgpqIbBPVX9iEUpmhLsh3RlTZu2+Ta/Zt2O\nEOpI/WdCd4JgKsyvjxYuW28iNUTbcQoGlijezEMVlUsizmkrNpEvdyHHlVRp\nyuRi0Nb36Ce8lnmetkB/V11dZj7IMGbn5NNgXxknPqdthWcaVGZJha47/Lkz\n7slxmuhPgQGKD0aD92h7xCMaQXZsl67L5GId+75lGuINjFFlboCHbi+XLqzm\nsC6qlTBIWBc8A2+iUKaXMPTSTwtlEd671GZrVj6PuZtbRAQOIgMRe45H7XJ+\nOpi5\r\n=93MZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dc6dc4efb9210fc9c70fb089edb90278a8ab66f8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/rtl":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/shape":"10.0.0-canary.e383944e9.0","@material/theme":"10.0.0-canary.e383944e9.0","@material/button":"10.0.0-canary.e383944e9.0","@material/ripple":"10.0.0-canary.e383944e9.0","@material/typography":"10.0.0-canary.e383944e9.0","@material/feature-targeting":"10.0.0-canary.e383944e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.e383944e9.0_1611625573702_0.04951634706131647","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/banner","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.623af861e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b13ee81579d4710a2701ca7b1ddd4f6aa2d08bdb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.623af861e.0.tgz","fileCount":41,"integrity":"sha512-2r1480caJ36J/F6PcWvuYWEDadQTAvuZOwKjoPJiJFzPEBhVjkCUvxoFD4j/ioaj2OxGx6N+4ij+H/SG377Kvg==","signatures":[{"sig":"MEYCIQDkykoErSEa6KPXO/Kk1WJnDN5R+6MXkewgmbXBbCaDQgIhAJ0kMTAs/udzmmoAO1losbxFe+ZvxnArwn8c8HbsLV4d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5CUCRA9TVsSAnZWagAAapIQAIOoVqeJSMs7q+MgLxwr\nsorT+PkKvWLtwY5r6imrlIYeq8a3X6TIAN608mLYsw3277XBzJ3vVJc3aFmJ\nopc5UBz7ND3wYOsLZMYXOLAaTRxk809d7XpV+EP4quE3ZeAFcxSu9i8Oap1a\nlT+82Q8vWCoctcUWxJNrVxYO6fZkF745pUzn+LoOdTwUcudL+bESPUNvrddo\nrOgwYHMsDm9fu014pq3s3g+KTjRiVD6rbHorFGGD02ZO/9kQKdMc61OnY4Vz\nlEyGcImf+Q8ZoHN7VeIpbD2LL6MMYj80lpOwGAzXFlNT/ucW3p19t0vMxvj2\nR1Ht29SXmGSJAMa9x4+UwhwAnJhgvY0qi4Edd7k7LUJTla9ZH35rl+VDuQXJ\niR4bTEUXmDA/knkQwQ2/10T/nYls1hotmhgbja+akb4ukAvWLRxqsNXLK/HH\n81/+hJxRnFLPytfl9bYf4mYknMVgPPJ2UNAZvEoYWxY9eVWdAMLsuLAKpIAL\n2tbDZmL8nsDat/45wbr3vV2SQVsy1E6xEl+VRxW8xfDsh3Aq4NGksVzM/XLX\nluZ1SSdVyNZn62x4Fxpj46DRW1ba8A2xC9SzZlytW7YkwGOH0CDG87nH3sV2\ntfREw6H8iK4OXYMbBRBtXlK+lmzMDd0owSNPkI0y5xRYDitUictvzIWuhbPk\nOQlZ\r\n=AqFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5906815761339487fac225651c29aa422211a72b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/rtl":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/shape":"10.0.0-canary.623af861e.0","@material/theme":"10.0.0-canary.623af861e.0","@material/button":"10.0.0-canary.623af861e.0","@material/ripple":"10.0.0-canary.623af861e.0","@material/typography":"10.0.0-canary.623af861e.0","@material/feature-targeting":"10.0.0-canary.623af861e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.623af861e.0_1611632788168_0.6735385814977217","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/banner","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.6863fd43a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"44863a577e6a5cd69a292cba4678a1285abcf081","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.6863fd43a.0.tgz","fileCount":41,"integrity":"sha512-cFJWc5w7lUqgR4VlTmGTAU2o4hXFX+PI6MN/8V6fEM3EHzwLGj24UdPJzmNVTaUJMH7SC/jlnfjvnXDk+DvpJw==","signatures":[{"sig":"MEUCIQDJ9kK3wXMJe0F9B+tRu8wfCv46e4mCuWaIpiele7cmpgIgFzZgTz3n54/bz2uiuCJUTDR/HLm8Wo3xdVNd6XDDb9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIr4CRA9TVsSAnZWagAAUbkP+gNlAlWTHLgq5zY1T5kv\ns4+aet8uAiaULYexyXG/euxlh10D6nC6HCIFuFHhf+RxHxjZJ30TVxj5hZ9z\nfar6IQfasiWAui9RttvtPqItt/L3YFcMUl9BvCerTY96B2MjFXcVQl2BoQvz\nWmODEH4UG43s7GurRecRP4GurEqoVIbkarhNLu1MmrKBiORBmpp5PS77Jmm+\n5ixBBbx+5cNuG9wgbePuQoamjT6KIUp0KliRupDnLn7cyoI6tt9fPChDFFjb\n2RD7+sIhfn/xptFPKK6YKkuKZi6VqV71FCjMXytYOnMGk2HK9vNgUfJPnKON\nxxFNRpHvvV5lIk8B0tcvzB3+MbVQD0pRWeTqPTqOMk+yYxDb5Qd8qqqAGYI5\nefieMLaXZQWco2fxUcqvCRrG/MpYkqD3JFHHhP/hQKfsW2kupDD6nd3AzC8V\nvZkgQS49EJtlFsfYMlQ+VM/lNlmanfRH8stl8hPL/MuJ9fiEPDOfNUK5HwBK\n9y/kDVtesS9Hm6YAWvBT6CQtjN+ZSlvBuRcLeHs0nAQCow08CdiYYX5K5H37\n4+Cy9mF3I/wX9DRv+SZBcy7Br+qMdA74RNSirxQf9mqXkeh3sc/btSGrtli4\n/akqpXnma/ewUlws4TAfgHcagpujPYwaa2kdTRvRbQeM9DltbzCXhZVkVmEn\n4Kdm\r\n=cunN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"49d0dacd3a675991bd5b8c454304b1f10dbcfda4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/rtl":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/shape":"10.0.0-canary.6863fd43a.0","@material/theme":"10.0.0-canary.6863fd43a.0","@material/button":"10.0.0-canary.6863fd43a.0","@material/ripple":"10.0.0-canary.6863fd43a.0","@material/typography":"10.0.0-canary.6863fd43a.0","@material/feature-targeting":"10.0.0-canary.6863fd43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.6863fd43a.0_1611696887841_0.7580059768661529","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/banner","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.ea55b87ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55d1ddabd8d2ce140fb5e8ea7151c37f6b66506f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.ea55b87ca.0.tgz","fileCount":41,"integrity":"sha512-NHuseSBjDQF4DUvpOxLr5arTimLnejqdUFI15zT+EMox67HRqoK/3BXiuUoRBAupwEDZ4Rlpqw4YxQcb9gR7ZA==","signatures":[{"sig":"MEYCIQCLKCmIiqWArOnOPPakSmLI8Z5AxVN35WXAqslVVBnMsgIhAJQgUKd7sBXzRE04NOxaHu3aEnky45qakVOri9e65Bh/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKoPCRA9TVsSAnZWagAApYoP/1WNCvKceEdlHYVmRExS\n9rtCAqhfw9gFvm0+AKFC/W//Ap7TwTpCZ/ZVvVndUE57avskp0A6tIivoBap\nkDlzASYDCk2mmq5QJIu+nBWZ1domoyPS1CHp+G4OBv3FuvL9m/cd3foTVmNm\nbFQHg5kfEOIvavFK1TFiYlKha15bum8O6uRF00k9vVUHegvg1nSvF5ZDEKhG\nfV9s/2DjxFifZzcRXmeaiyHH4as3hBdpYl/zpZ+4hSirWB34osSfP0h+As42\nseWevifDNGyEldERYS5NbWpmdAxpNHqbazwnfNnqjdQQfKVtzF4XJT5e8FVx\nC3/k9ekELGuMSZzmk5xIs3iDjvHFmu8tFLo30xr5mDzA0k6LZBVmS9QmRlvh\n7LvaAAfk+K1n7Az3M6JSGECzizUWCE+aFeTFuWBgh1gmW6LvUa1MX8Ot9JOm\nqHoOtCRL/0VH04Ynw0/9U6VWYdGfDWKDq3oNJbUCBR4hdH59QM3Fyk4A94my\nUzbsYIDS0whrvuG/L1EHRrE6Ywo125XLfU44DMvWh2Z0msNUtVFbN4VSWaLx\nqRaoS9TGlfXE6YlnbB6r0BSQx/GKc+t6hdtPOvtn5LZMYpx8FFd7PpkQsnPo\nbPeEjQA3G0CBUdSC0g83UZ05FPnbEDEzSVQRGd1cMGd2JrIGGRedmoQuhIp2\nxGn6\r\n=DVEm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"00e7569feb0aac4c4dbbfb9b292c9f53adb608bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/rtl":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/shape":"10.0.0-canary.ea55b87ca.0","@material/theme":"10.0.0-canary.ea55b87ca.0","@material/button":"10.0.0-canary.ea55b87ca.0","@material/ripple":"10.0.0-canary.ea55b87ca.0","@material/typography":"10.0.0-canary.ea55b87ca.0","@material/feature-targeting":"10.0.0-canary.ea55b87ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.ea55b87ca.0_1611704846570_0.31208629270716415","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/banner","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.e902ff05f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab875e51211520a0b3a2aee978d1ae218d8453ad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.e902ff05f.0.tgz","fileCount":41,"integrity":"sha512-bzFgtTnnEsEx8SD1ymzkXhMOgRxXbAEWUoNXENegY9Zvcid7TEZmB3JQG3iIiMwgyhn1rpfHDdhqMRqtOdbhjA==","signatures":[{"sig":"MEYCIQC5WHPqNUALu2eqE65s7uehebQR4Gnzvk3+HkF20NFeWgIhAN6YsNNWSYQAcXyo+dUBPhGb4uT65uxjxc+IE/Fdm8qD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK5PCRA9TVsSAnZWagAAJMoP/j9DobuRIC0Ev1K7TLMh\n9axvJrlU2/GnvjeKya4TocXh+D2Y0ZockILq5fcNPZeV/h2jms6em3qKuURe\n74pcTBLI3EzgUufvZoyZ8thuDjSD4on+nhCJxsdIBHgslApbN14q/TX6FAnU\nzyrjAlnvRldSaPc6UrGcohLFkRfqRxstLMV8R/CcWd8GrM988lJIBBRVwArR\nVEmt3vPgHw5N+JxFQczVQlOrvyJAYTK+76tmK3RJUwFdvNBGJ13WWrA5mUqg\n9BAINs0RTbsjsNjSkQPz84keezTQBS33SGDbMRfWsQG7ECUfuTJ6+K0CV9Sw\n4A1/mYeh06YTczJIvoEm5+79sHOs0N6Pzj14PTty4329tdI2/cUI2gJOTVbu\nW8MVwyAIGMITodviNcP0WezbeG5636fvGm/sDSriS/j/kQMetxzK6x2PVVIA\nKJXcOnu9JhATNnjWP8EnU52Ah+NhEhUkq1VFibzukTA8hTjitDkvbKwIK1sB\nfNnI+L4CMgpZhZZiN9sxfArQM78gwkguuDNGKhXL6fKkOJGnFRwFHqNqGZfv\nRSJwwqc0tF7zK/ZDz4EcajMjV5KIvlxRs/fEdz9/kn8ajPSXTo8vdUAifvzS\ntEPIjuG6XG+VwYNSgskImbwoke9GO4KUBpv3kZwaT09EAyqHd9yax00YD9kk\n0nvj\r\n=ZdpH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8ae6ee07772b70becfa69208ee5a4849f86c2fea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/rtl":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/shape":"10.0.0-canary.e902ff05f.0","@material/theme":"10.0.0-canary.e902ff05f.0","@material/button":"10.0.0-canary.e902ff05f.0","@material/ripple":"10.0.0-canary.e902ff05f.0","@material/typography":"10.0.0-canary.e902ff05f.0","@material/feature-targeting":"10.0.0-canary.e902ff05f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.e902ff05f.0_1611705934478_0.9594203821555158","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/banner","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.2c9fc538a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"777f3074c927557a662fbbc791ffdacd0c298222","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.2c9fc538a.0.tgz","fileCount":41,"integrity":"sha512-y51WhIXKKPX3mIe4E9c8g2KX37wbZF554AOqAfYCKJorSA9NHoo+sWyv1rD7iVjJQOAScF+KrAPoWHMnfp3ebQ==","signatures":[{"sig":"MEUCIQCbDTnpgAvClnF/BgzEXM8659FlhGFH+U/jNs5kgvsNLwIgWnQSIimya7XQ78gHBB1Dw7pth/VBW+N7R1fc8CcKemI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELO0CRA9TVsSAnZWagAASg4P+wbXYtdlOmz7zOYSaNLC\n1boLBhpAr9NLzAZfWrn6gRSnloJg2XkvrXEjSijlsAb1LwvUkpDjbevFHJOh\nz3RJRWicqUs+Akf8vWzaFf2RZwSvIZA+2EUqFZ/knmCCt7wj+BIPXETNSYme\nrEoLSXuuY70Te2qF2Mg1q8T3E2IWEiMaM4/ynSsOwTHoaVCuscq6NIfv5OYj\ndE2BqCnajhU/yoVIF9vczITARftqdY9jbOspI0zl9Hs14Y9tie2f0C4Zzzeb\nCft7B5PtzXqnt4+XJBOCj8gJ2xPJYSy3Rk+vgLtbQ+JIqblAXyDP4baVMOZc\nly5b88t3QVQdYgs7cL4W8HW+Les4ufYcIT4tu5ndtx07+x3Odx9pl3wLP62A\n18FfstSpp6Qr2kAjdABoJkjjeo20dlfvij38ymE+2MIA/g9hgktdJ3ghVTPL\nLKfx8fX7QdkvScr5V9Rfq+13wEUcPag4Pb2Akg1j8ajEziAKObJXhwqfEGWX\nrxRp4Tqh/W5UXZvTeY7ZLCLYrGzolBfOQhiMYW3Or/oBFmtp4w8pD3o7qSih\nmYo6oA/tCYhWjolBRyfr6Psjfg/WrhSVub/cIMTYn7oapMlX+CsED3zh/GOI\n2NAotO3BWDFA95G4HWPzDKDUuLoL17YMn1N7otnkXWGdlXMhjdXs5n14WW00\naK+8\r\n=Tk/3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4bc5fff9ddee1f7703010e418626d050ca883474","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/rtl":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/shape":"10.0.0-canary.2c9fc538a.0","@material/theme":"10.0.0-canary.2c9fc538a.0","@material/button":"10.0.0-canary.2c9fc538a.0","@material/ripple":"10.0.0-canary.2c9fc538a.0","@material/typography":"10.0.0-canary.2c9fc538a.0","@material/feature-targeting":"10.0.0-canary.2c9fc538a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.2c9fc538a.0_1611707316573_0.6530890882716482","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/banner","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.6bf56aaa4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4cc557b06b893e76bab8d3d8282d90eda780e27","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":41,"integrity":"sha512-lgdcifjLBdgf8rFM1kFOSYuQo1Vw7/RL8X1SA7lC+qtt7H0C9gIjh/6IWXEdiQ08EnirlPFL/J1glvZ/EMznzQ==","signatures":[{"sig":"MEYCIQCWyAvwY4A/Fjj+asVZmvP++j6lSiTQ/blgP2tuZkxmXQIhAMsaBTz65V2XaXjR6KfoveIxRQkl1DXQT2bRF0DGLjJO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMAfCRA9TVsSAnZWagAAQ6oP+QDsCQECEdZb+0ftuXjn\nGfZ7tLJegct5daw7/3ItKRlRSBcUfMsSCPs4WxCUXZV/Aryt2UelCVYR/wuj\nF3K8y2QuuNdtu7SSqi9tcb7Qst6CVoTpxGHTtMWWhw+k088VDkRkR9eGsFq9\noDYclYFXzta3COQ6bFrtldBJQ3gLaylNGXMV1QGE7aBbSIzm+jHqGJ+/9GzG\nh/2JrK8mlDlkmeuKMiW2m0DXjVeWs3RaOtYrpjg1tD0jrCkX9waept8bjvpv\n4BQbDBezbbFedUsSsrF+N5jTlXsUA0wcXFDmQT4NxUYoqXRKA+suK8NB2Ro0\ntK6d5Lt3Te55ez85i6suLEdSSvd/r+4xOOLvDH6R67izEw62E51Pdw0crqGQ\n3vBr3+V9byFRJHXyTO+4LCGvttuZf6248Q7mg74P/aW0wyR3Uu07Men7HthL\noCKISiCXuyNSxXLKxUM+fDyb04LH9negVwWD0wSGASe00JURWtiXnLvQp1Q4\nHGowbZWavCkclxXP45pvWb0Vcc325YwY1dxnp2Xbdql3fj93LHPlP2yeFgC/\nGq13hYhjf4dPsAKUeZ7EkMfDcCYwOXnOJ3qbJp57uaAyu49URZweJ/ij4c8w\nmNb6pUIyGa3oQ6WZahu4zBFZzIBFEdL8G6UkuxGxh8JvKWLF7HEZz+KnWeSz\nHplE\r\n=yAFk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"557b9cd09fc15e60ea09bd17651230487a292b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/rtl":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/shape":"10.0.0-canary.6bf56aaa4.0","@material/theme":"10.0.0-canary.6bf56aaa4.0","@material/button":"10.0.0-canary.6bf56aaa4.0","@material/ripple":"10.0.0-canary.6bf56aaa4.0","@material/typography":"10.0.0-canary.6bf56aaa4.0","@material/feature-targeting":"10.0.0-canary.6bf56aaa4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.6bf56aaa4.0_1611710495442_0.13030328990631768","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/banner","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.994873795.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fd9d07146aab550be4c2eb4a2af1589f4f754bb3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.994873795.0.tgz","fileCount":41,"integrity":"sha512-Jj5nLtdDaTcMg9QiZ7hxj1RG5fsssq+4SZvVUwEqh2V9pS1gB5lMXVpi86mJHIE+YJ5rJ+ks3jxcSiat7WV75w==","signatures":[{"sig":"MEYCIQCfjccrkZvGzOZvN3/3J1DHyK5YcJmqk0AB9/Hd0ECFlQIhAN3OQaYbMLO1MRRIxvx3jp8fAYCx+CGZ0LDWQ6JuWtCA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX4uCRA9TVsSAnZWagAAb2QP/0up0SMpWWP6u9J+xPDs\nscjVTzFghFu4b/iWoo3L+IGiR/0IpllzkB4NBfnUL07Xtcn6cV1+qtjFJJIh\n0rcliHBzYjVifHKWKdBrlZ7dqVWIHZB1vm059JalE6QFNU2JCgKeu0OgVMH3\nI0+FVvQ1yzW75/cCUaQdIU1+cIqTUYOHb3TPRpDkaVNxkK32C75EnRmSLyHR\nsy/wbuCFckaK1b83EawekMTC0t6E77/WTewM6GmgCapZZjAmRis6M5TT6hJM\np2TstZb6zWX4kNvWu9Yn4A2ws/yMRj33OrzT4BQZAOp/DXEKtWLInsHly+po\nJyv8ZBltKGKqjlNPFijfap/rZLWiOshKUD/w88s5GmMvCEwQhrd1LFZAiN4F\n9g5vy4ehwdML3q9SuZJyYFhyWVABeNCoj9UbvFklJcnZoFWfzBHWyhtca8mt\nQfqYxQ5Hje6E/tYljFqi7aEucsA5s3DhpsY5Ce3tkr2rBeqYCGMY0HrzZK0D\n51YQai2w0c/4FTlu3tCZdwL/IBD1fNRG0GDb45KqoaxrVngB1p6GGExgZomO\nZonOH9Kgc77SK3PlGv7rcf98kUEKeKTyev3se2hfY2mwP0C8c/ONYPMH+j9o\nVuCR8dMRsm07HOAe5bsVLynwsCWpbKZ553AeN1t5KyEnD4eXvvMYd8rjIru0\nHmyv\r\n=NlFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8d1337af6a27bed9f06167ca1cc1c996fffdd9a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/rtl":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/shape":"10.0.0-canary.994873795.0","@material/theme":"10.0.0-canary.994873795.0","@material/button":"10.0.0-canary.994873795.0","@material/ripple":"10.0.0-canary.994873795.0","@material/typography":"10.0.0-canary.994873795.0","@material/feature-targeting":"10.0.0-canary.994873795.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.994873795.0_1611759149521_0.13822875529347978","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/banner","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.96878e1d0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3e49c9bd7661703b579868dfa65dc6f20b1f552","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.96878e1d0.0.tgz","fileCount":41,"integrity":"sha512-juFcW3tPDNtgitAabFHm0bgBqTvxm3K2Ld2adYrWZaI5wY419nqfBpAv4OEiGUustJmwIM1yUi3rGNw6nFidwQ==","signatures":[{"sig":"MEQCIBj0CUUqVHh51EdR19WHe6OXsYATd6MSKxmDmCYKdj42AiA3s4IqWe/biCuMnnJV+UabplF0l+ODpk21kbNxXwt5FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEar+CRA9TVsSAnZWagAAjtwP/R5AM/A+xTESnOvaPmly\nO2/dBZ0H1tPipIkugq4EAz6G2GLHBWc8rWUZp2Y6X14VsXrtZ5ragpcQKI7Y\n+NL6ER96yeKI2SlIUMtZUnnfcqc//Fvd8vXuP2S7m5wXq3Tc/G0GQ7avdh38\nxah6oAIUa0neWnEdFWJfrd0BJDAB+qqalMau9TBrb0a9lyFfKzTPuynj5jpL\n5syYLfpinDPZbKDjjBf1aQzN+qHKyec2/tzxiQ4d4AmU3SN86Af1QSWCI6Q+\n+C2RSX1DypLVIUef/CkZSqRfzqwLQIG9EMppghva2/oCJOMISwAzcKZZGvRm\nKEFMLHqSTb2A/CKmeN867BZCnOQWwy6QywpwnXFXFdf5jQBYzhYJnOqxY7LZ\nQGnPD3GgmWP+MlkI5DdfuS6Zaqq5YyHFq/ijZ9POL4YnFHey7TSbJIbTl4nT\nj3PsJ2UmBOCf/FZHoA7w+i13qG+Q6oGN28uGKhxWn6cOgkBMWO0vmUGQ0SeF\nSd4euPB8jXOr/M+PD906k8+lo3vvyhyRFdH39kA5sMUozfvzhReUk3wE74jL\ntD4eM+jFkebbq1hR0aK+9QMbwi1P2y76ezvbSc2Z2qRlq7ZCdSNeSc/4wSHv\nfBWQoXeXpKFJ4M/RmBddwe8QymsMntpKBIjZ7sNhdharzAN5izC/CPTgQceg\nUNSX\r\n=mdIU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cc9f62002fbbf03874065eac25971ed2b49a47ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/rtl":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/shape":"10.0.0-canary.96878e1d0.0","@material/theme":"10.0.0-canary.96878e1d0.0","@material/button":"10.0.0-canary.96878e1d0.0","@material/ripple":"10.0.0-canary.96878e1d0.0","@material/typography":"10.0.0-canary.96878e1d0.0","@material/feature-targeting":"10.0.0-canary.96878e1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.96878e1d0.0_1611770622139_0.06696087908033621","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/banner","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.3c117cdcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b6f0dd4729e4eb3deec2c497f0c6e18d9083416","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.3c117cdcc.0.tgz","fileCount":41,"integrity":"sha512-pNKBNRveU6ePJB2ACdE3Zmr98VptvIisMVPQqjSCvpIBYJ6JGSSHOL6jO+gTWJL7ftsJ3Yb0NxGWzBmKxwsVoQ==","signatures":[{"sig":"MEUCIQCEhPxUaEibhGrRtZ071Xr58q7i+dARP3pC/srIQM//1QIgfmQFZLC2eD7XGxmviQVoT9zl4v8FxsVSU2sotjQBTp0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbIUCRA9TVsSAnZWagAA44MP+QFTWwCsyoNYOF+C1fBJ\noiDzN+22GeWV/pp8Iw7SwXtcLF56dl7xWqqmd91MaE8iduM7cOSZEsEHW6Ca\ng3bnjURUCUD56soI15QniMAfVc1BtZQkAsG+yCmLQB69tcfxZBn7thtBP4Az\nI9PVpRLIhCwFf+4q5A5nKDoykkKaHHYNvH8n9LpHiWbnftGHNQVvbNleK9eP\nApDjksRnOms4Gl3vqYjRjTVQqZlOv219hFB5IjTIc2lBExiiCb3fwuBq7PS7\ntFeJ8yt5D7u/w5aeUOQNr1O6mWQxGHqAnT8uK1BOkAnzYsV/zQjY/9RWju4E\nXT1MBkirrnTvRQPuiwMlMJPINCuBkVELBBphQb+wE/kq4tVn3EtSW5WvwtU2\nL0tA/rrgUN00T2nq5+3JrKajhvlsgT+SG3q/dgFPrJXJTx9qSU17z38/McS5\nv5whgou7N0CNR8ieuAlqJjZEhzc9bsq9+d9STgL+buwYhtQ+WJrYagSla5UY\n98ex5hXt/ki4/bHYjYSZc9bG4ZegmzSkUxHGnUfscQOsiezWk3FR3WKfEaUH\nwlvXnHplp7xJuHcLnLl5lYBzEzsr9JDBNxCiAjdTG2GNiXXpawTONAf3eGiA\nJWaU6n4F7iIEtEPSl8creqH6bDFrF8beazLyTsuvqioiFLrqUy+4d6+eMFMV\nF4I5\r\n=fxvz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dfd1ede4a4727199e63765d305bb36d91509dde8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/rtl":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/shape":"10.0.0-canary.3c117cdcc.0","@material/theme":"10.0.0-canary.3c117cdcc.0","@material/button":"10.0.0-canary.3c117cdcc.0","@material/ripple":"10.0.0-canary.3c117cdcc.0","@material/typography":"10.0.0-canary.3c117cdcc.0","@material/feature-targeting":"10.0.0-canary.3c117cdcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.3c117cdcc.0_1611772435520_0.4127333020456121","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/banner","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.b411e7033.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2203d379bad5617a561e18598fa0c12542a329db","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.b411e7033.0.tgz","fileCount":41,"integrity":"sha512-iibnnZsU+bvRIifgHd4z7i8C0eMXGbjwYW/E5//jxuPR2gv9gjEO5QwdaX81QxWya64JzQEokt6vVds8RN6RFQ==","signatures":[{"sig":"MEUCIQCeqSaqedm4WU1TpGkKMCsYTlaJp5slPOerxullr2yk7gIgeDZaW1tsYpemePVxciP0grbuyMnyIHtaTgleWdis5L4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeOXCRA9TVsSAnZWagAAtrgP/iapIFtJXBcLku9/KzxB\nhY7+ft6PeuXhqTr9NGRXCRz6hHVK/v+z8mpdjpAj+spd0Zf3xHBDHIXcB70z\njF43ts/n6CJtvi8M4ws5a9g78QKS8L0EEOPbXYngoyx1O4Q03GIJx5+HBsvL\ncBXHcjVw81FuNl1nvQ+9lGcoSU6GkCo4L5rb6UOfUuDcskxUYW9bH9ivvo88\nN+YDWXx5RelsplLiBFQ9QUv6R3JNvDC5YOps45s+/oCMG8nNm/ElKlNKxwzw\n/b8QvVuAWQ6tXLvnVdogYQILfzHeWhaEglIpzKg49CA1lYeB5PCmocbpL+wo\nlupP8xf7b1kLJuCk7dCPp37XS0quRyn2zf5SdVHpdMM5HbnlKWxmg1S3jpQT\n1cgPlM452gSbvABvrRI4bIlsy/eCcIG41B+SBypGruxRmvTXjA8ZYow3Z2lk\ndNCTgZ6heQUbEQQTKtp+lUFCy35g81ObIFBtR3FtnsGg1gAtoe4N86oGsxHY\nPEEep/uJ3Zz6PzasC09EStXfiQHbektBRx7vOwaKCBh8GhjnZQSMEyRBbUaT\nwoJeEOuwrguMKtmTI4HsaDSppTzWIbyzygjqqcQMzLAkc/Y9Gr9naWrVf8bh\nqEytruq7Nfdl9bBooCiW8iNAozRlD72KwC5QuEa+nsB7jIa9Z/FNyN6zFakM\n6uuB\r\n=fCQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d12550a6229cb648f6739f83d7ba5feeaa67dac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/rtl":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/shape":"10.0.0-canary.b411e7033.0","@material/theme":"10.0.0-canary.b411e7033.0","@material/button":"10.0.0-canary.b411e7033.0","@material/ripple":"10.0.0-canary.b411e7033.0","@material/typography":"10.0.0-canary.b411e7033.0","@material/feature-targeting":"10.0.0-canary.b411e7033.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.b411e7033.0_1611785111375_0.3194350321514594","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/banner","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.a9ac16b4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4e2926a747671155aaf01a871e901045d5b0e36","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":41,"integrity":"sha512-wS5rNAF1+GF4t89sh1c0WTBAFDoTXxEBsUoHihijOfC/yUpa70Od10gIR1XocGcC0k5Vz/s4S5ICqQ7/4ZpCUg==","signatures":[{"sig":"MEQCIHuMD9Yzu4pZyKDT0JAzXuKhFBJACWttb0vK/SptOwllAiBu0bZgjJpdzD2zkbSVo3FOapd+c5jGKsBeUvi+6Uee3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfGaCRA9TVsSAnZWagAAUkMP/0dCKaW7j3N8mg6ZVmCK\nn3LpbEMrYjFtOrCm/Bwkr75WKN5xBbJbZFvqhE158q1jve2PY1rC90/6eJBz\nkLi+moJ4pH6i0OuA2jMLgMOeGV7IHHpRRFJwPu8Cjhfb3O3HNaAvoOLBbOGr\nXi8AbVIBv606qTLrajGxmR+4qBhL02Dmvaobjo6OfMJ0DgKaaCMEDv4bEfAk\n8rRD6EGekwkEw5UoIPOJhGllvw6qhBHr8V3e9dyILxf6zeZBW80QV4DN0iGG\nLMDFdLyCXfCYVstiaScGOmKFzBdjB7y9b7IxDfwbviEyBPJ0GcVpoMN1bYEr\nPOUSkZXaYXYTOV+owN3BwhCVHsdsNR7oZ1RtRtnT3uS/+Nz7naiHJ1cALJUc\nSbZQ+STAhTq8WsLT7FVZPrE9UY/40vmxUfH+g88jt2Y4eRhlfFgKDSIpFlU1\nsPc0EHaWLD38ld6P65eSQRlw16itBsi7gLkf3QFzn1oYWjSaQT7IppDGCl2J\nRn+3ofzpp5Zuvrcpwm9RzRzKKvz4J0fTx1r3Ndcn6yA8KXmUgWGPb1XOV9qH\n2kjfH94AZ8ipMT28iC/mkpGWac402rYbFpaYrKdsP8QSjAgfhUtpIj1KEbLD\nfx3StNs0rkj187S6EmJKNOV0odbGzDqAkJj3IG5Axcbunew9GxGpFDxGtrXE\nLHrY\r\n=Iyy6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1635bad405a8d329ac4e844d0a2b5f3bac553113","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/rtl":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/shape":"10.0.0-canary.a9ac16b4a.0","@material/theme":"10.0.0-canary.a9ac16b4a.0","@material/button":"10.0.0-canary.a9ac16b4a.0","@material/ripple":"10.0.0-canary.a9ac16b4a.0","@material/typography":"10.0.0-canary.a9ac16b4a.0","@material/feature-targeting":"10.0.0-canary.a9ac16b4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.a9ac16b4a.0_1611788697885_0.4647432143307466","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/banner","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.fec7b42ca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5ff2e9593a3266dd11512651ce2f3ac0456ab51e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.fec7b42ca.0.tgz","fileCount":41,"integrity":"sha512-LlGdvOupKF6IBpTvF6XrRjnHT0dH2a4fuYGFtgxxCyTiA1zOVMvwzgila4hpO/6SF7AHeJGB+blXNj9/DO7GRw==","signatures":[{"sig":"MEUCIQDsRPUh6HrsdMjWQ8MWr+kzuPfP8cGCxk3taUQaDa+rdgIgRNlWglx4QLGJoxx872zJPvG4Ep0eldMDe5fkQPsw648=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1yCRA9TVsSAnZWagAAaxsP/AnXoRuqXwNJw5jCnvDr\nRtsO3RG4cEuk/ejzH1mdUeTpNg82r7TBf1JCaNh6lcIt+lNCr/SpCLkmc8Ux\nUGgSSgjsO+J4wCQ0K7H9M6zSEGdCZROQ6hvLFfXWHOBbCkoiaY5Qc+lytxwv\nZIXl8HMctT3daVqw/yRYuEDs+CuocNbKtU5aAXUPmcKepJPdD/H1z9VFaARC\niixzb321sPKmEaNThbij2iZTOTjpH30yXKDwKlV3mi1AoBkjHlU1FCdKa4Xm\nbhFPCTjkWqpAnSSIEpeIQ+EFfW2J4JTM5nmVJUUS9YwEIV/AKrdmRY0Y/4JG\nFvhCnFUfijTlUEHKMzcD2rRAA5+MBf8GAysAXx4hppEGYCUqHoEi3Xm27UoR\nClK3WYHeDs6tW0LIYyr8yUw7jOh+v8hjGx0L9116MNMcNZ+wiEs5dqtjc2Yg\nhEozHFJb5uAebnOPYS6+ypjDhIJiLZgD03WViIUmfIZYIFSXteex9ri0qohD\nGgnqLBq4tIja2MZ8xgp0NPfGE4MqDvL0qjMS/k9W/v16/Jtq9KQtpcI3tTrZ\n6WFIcvdijjk+JIKwQRoGS2WCX9+K5TWpmSIbEXzZl8WxIMd6LKUnBl9k9xn4\nDATbvsCcExGmz44OFpxzuNAxGz1Slz5uAFs8Sht2gU5tg8vzKV78Z4DH7wOV\nW1hh\r\n=JqOQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c05b9618cc2b93ff9a68314dc20c83c691206159","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/rtl":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/shape":"10.0.0-canary.fec7b42ca.0","@material/theme":"10.0.0-canary.fec7b42ca.0","@material/button":"10.0.0-canary.fec7b42ca.0","@material/ripple":"10.0.0-canary.fec7b42ca.0","@material/typography":"10.0.0-canary.fec7b42ca.0","@material/feature-targeting":"10.0.0-canary.fec7b42ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.fec7b42ca.0_1611861362047_0.662907858282634","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/banner","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.8e66dbfee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05b63fd17f1de9171b7951d80e7f06194f7a3d3d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.8e66dbfee.0.tgz","fileCount":41,"integrity":"sha512-8lbo44kQ68fZJB98pWDNJzV0uq6xT8PHk03WPGpxyLUPyrxx9XgoqF1Rx2KGkIhJE8pXradha8a6dQeg9qLVyQ==","signatures":[{"sig":"MEUCIHRHcNP7J45OZzecRR7Ew+AQwhp9pnrU/DU18hanocQDAiEAtoLYEpNw47IuCGk+GkQVo2a6xZ1EFo9oKNQm7j18CIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":432546,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGI0MCRA9TVsSAnZWagAAa+wP/3ZcLcg1B67VwS0nDiHX\nRwOH/x9nzEwufBuytzH5b/MEo9yFpNCcMdUcALB+fW+eyXDnZy5tvDxe1fud\nFzX6da0OWZ5hQO+EWxUtdA/bh/tLetMNCcoz/ODx5uixxaBETKOevVjf2o3Q\nQP/rn835oyGbWkAR1arn+sTxcLMBGJ/4Vr4ffvC8Mo6hXwWT7dpE7hFgE888\n2Z5YQLBwU37ivb16xEqTONmxZs0yZs7d3Bug6FiG62rPkt32hjt9jEqvq6/z\n/ay88qeloifl+Jlsm/5wKhDZrdOPWjfaNOoqY1S6LhDKMxknLcIKJv2BfZ3L\nnKXBn8C8Ov8pNoYlCpDZY7Gi0KhhhQy6IEoHA8wQgvTS/qFPAm+khLNIy72m\nHc41L4JI+hhXfG3Qh8ODpYG9nsIVrxWfvfz0GhNpS4ibhveLa2TeGgdmA42H\n+Y9uPNlm2QRGfbnoFAbjnhU+x1ulNqpsMI8/hwej19hxnpbmJ+znTzt2+4aY\n7pEAE/vRO3pm2Zc4cligycMi4eQUwYW5UB7yc2HNhrxnSP8uaIU+pbX11d8t\n7bm5IPJ8djMWx//QZJTpOLLUGbtvlZkCL0oJT5AXfoFG+VA7aS+Bx3lQ/kQd\nDVRoT9BaNnDLthxLZ4ob3UeiqoLm8f7naxZHqG7UrwXUI4IJeCmGP6R3Z4Zk\nSTni\r\n=UJtP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"63606d4d60d94cbfccb1897812018e02aa13bd18","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/rtl":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/shape":"10.0.0-canary.8e66dbfee.0","@material/theme":"10.0.0-canary.8e66dbfee.0","@material/button":"10.0.0-canary.8e66dbfee.0","@material/ripple":"10.0.0-canary.8e66dbfee.0","@material/typography":"10.0.0-canary.8e66dbfee.0","@material/feature-targeting":"10.0.0-canary.8e66dbfee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.8e66dbfee.0_1612221707794_0.008163064854076474","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/banner","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.637d15da6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6204c0dc6b1deb596ff192d81ad110dabf1ea6c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.637d15da6.0.tgz","fileCount":41,"integrity":"sha512-aVmvZXzPz2sWAE4oym9HL4eaJgmJ+7no+GjvijDbehZRQFMy3fPGSS8jQI1BRjiKJR4fOk9LJanzTiQZN+tNMA==","signatures":[{"sig":"MEUCIQDBMHR6MH1rv80hlSB7UQF6JSxI/SJeiYYNxftz8emfEgIgGxED0BqA61rMuWoDsh6bIOVRO5bEEfWPeNLe7ma+IfI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ8FCRA9TVsSAnZWagAAaHwQAIkGoBU3wuOSClS49tmc\no1gfWhd4Yk4Y+Y2Sga+Fse2+PQ97vfiVkS/cRtIqlRKEYWuFrLi39zxBqu3X\nERhwkrbFPAPMruXdQ9LXvKC6myPYIE63rs7HSuM5sReAM6cvl6tWmTP0N5LL\nrBo1FDFY6WinrzvtTPflN15c5pEJZ8YYMARlpvsHp17hV6XZFxg+3ZD8GRTT\nwwMfscdV2o7Ava4sFp2iQ9gW6IwSlhHxnNBqdboi2c8NP4skcZhYDTrNCkzD\nkQ4ekI2J6FFvBn7S8vS9fmm7QX8CL75SIztxzelqrP2hFBbGSN/jfJHsPrid\ngN8J+5fC6RI9HNDlo1Y79HbWxYKdcB3JaSYIEvJMCzFPtZxc/f1lM7Lm+vTd\nIMNi9R+BibrDY4we6De4x36dmDipr+d76zrKQ8QMnQm9RDHUWdP1nO+6DSOz\nx2dngqBXSK+pPDfkMEkZGNRqFFLrAYTn9mtvFXivQPIQhjzgM4Wfua31nipB\nbXS8ngkImugy4AwbLCBNXEEWgwiTx2nkxCHNSsFczsZsplnAP8tBS1atbOqY\nF8Jto5ptjCsvrqiOlLrMyU8DB1lgoejx8aWgzD9tHdics6uNji672mjKLM35\nCDRi5qKTzI1Zpl9ZFnvrlOsMFa50x+hB/PrwcDPPptUZBZmblKFCmem2caS6\na9RK\r\n=medM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"264dfb09f81436a3537d88f2366133e250344864","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/rtl":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/shape":"10.0.0-canary.637d15da6.0","@material/theme":"10.0.0-canary.637d15da6.0","@material/button":"10.0.0-canary.637d15da6.0","@material/ripple":"10.0.0-canary.637d15da6.0","@material/typography":"10.0.0-canary.637d15da6.0","@material/feature-targeting":"10.0.0-canary.637d15da6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.637d15da6.0_1612291844950_0.969737804813797","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/banner","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.fb793939e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4e6bd2564f9ab363aa251b0cbe44d4ccc5fd387","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.fb793939e.0.tgz","fileCount":41,"integrity":"sha512-A156iRIcNTjiI7KN8KYA/lrlfKptol4GC5fpPxpmI1ooto+SjkxqYzb9/IrIl+PyzAOkasnp3/jnPaujcvoeTA==","signatures":[{"sig":"MEQCIGF6icBQCPKD5DNm1pruJg1sPG+tCpGQm81AvYg8syXYAiBGNi+5X8/fROYOA7igeYKtJtwGPMuVFi59vFphXnIUhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePfCRA9TVsSAnZWagAAd/MP/jrQVxWpNHbToFDFxb5Z\nzNzBBq/BXFiW20XHdVIvY9qPnUXXAzBQgkZg1YeLPYQWb70XdgkGvMOieqaG\nyAzFC4wDeyM5ImpQxZD+4cKFe6hdVf73zd63miaLYrBjYPd2t9R1vuV2c3u9\nQsTMqBYuKlZ4oUru5tntqMvpyEq76OJ+JR6V9EJ6eXgG+9YlQ2UBY/CkcD8D\nx0VcXMgWPL6yJzxQfttPVlaEg9AgeSv8pjrHrechAsulvgHsfEFc3FAm8EEl\nAeErjImBntggZblo2SF/qzRqff/QmlhPiE1g6kCwECa/BQb7M8HJXGWFmhyh\nHhszYIPp9h1hZKZ/O2eCig2yDL/5lSDuobUb7oXnLOXHRBYFC5WkDCMxQ5yz\nus6Z/wdBoRuLDtXzmUocz5u6/HBCZaQZEBOECA+oGXTWp3Vd4V8slwjbD53r\nO7AQTaPpbn1exlsPKGTpVBPhNVc3WhvZxgbKkYkbIzLeVNN3dTmMfNWRkNNw\ngNHoXWXydztupC1qUOeWXSTPwMdzqnwyUBs5tItkjAYVAsIelEJsG8xBQlMj\n73MpmAK8X1abZVae2oOYd+cYX0e/sZt/V+1hIZ+Sr4ce/j0VznsiqNGQNkBL\nY6va+OUqXJfwKoSMpNJWddMjBWts7nzMLIEMSjiGO9Jtbi3+1fGf2CUHWWJ9\nfi67\r\n=czTZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b89489007d2a0c1f3821bd2291e448d44723ac68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/rtl":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/shape":"10.0.0-canary.fb793939e.0","@material/theme":"10.0.0-canary.fb793939e.0","@material/button":"10.0.0-canary.fb793939e.0","@material/ripple":"10.0.0-canary.fb793939e.0","@material/typography":"10.0.0-canary.fb793939e.0","@material/feature-targeting":"10.0.0-canary.fb793939e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.fb793939e.0_1612309470826_0.6810316424986949","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/banner","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.15a4d40dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aec63965313e203bae7212c1efbaff7813e04aec","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.15a4d40dd.0.tgz","fileCount":41,"integrity":"sha512-tRckczdmRBu9Sm5O+tKwXVGrm8RyVOV+GC6M7qsKJzJzOVRfBcEyqTxpG07V/QbxyPT2BhJHmAdwT8yuwyGH9w==","signatures":[{"sig":"MEYCIQCkSrBTxun/jUvGkoIdvcryUqZIR93KHwWSSoJmxnoqTwIhAPjqxLJG09XMtkp4QDnFjT8CHCsTjyNYV5fM3HrWNvFd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGghCCRA9TVsSAnZWagAAMuYP/iN+ET6QV0bBpZm1br0T\n+bbfdIU4dJMwsCwW9TH06M4fkf/RN4kqbIBofwxk0DT83c6buXzPNESEmf8T\nbh7tIC/72bEF8m13CrNyNzF2ESpSooIwRxhIA1tLXpzA+/d9DRcHc8bguG5G\nGEZaFCJNvbxu9hvBAKxyQ/tDusK1wNrM7LF4BO2Ylybb/UTUQ4Eos67dJLgB\nt0IUjUIusnM0oxWsPh1xC2NB0vupqz9TgIVnAodRxI8X4165q1WqTzOidiS9\nT75BOIXQKEPM9P2hpilhmL8SsV9UR+YBA/kkiAv3hLkPwx/9NwQlcYyqQD52\ni6nfh6N27RmHmy4kZ+QC6u3zrrwfENdCE9dUn/mTk2NPn2k9GCHefYSRGi13\nLyNg9lxkd1D0lbSjYcBUg1YfZpMRllmFXfXAHVycLGc/GloQtGoXq53hL1+v\neOfLaQOCE5NmqyroHbpviF69Ezs71xNwCfoelqdo3FsfCKWnMOBUsCGHHnK1\nb51Lc586Chbs6wuDz2FDeEQGIwDFNhOrsnBcjnBVGv6TwIPg8qu38qke9paZ\nZVQKKd6qETod+5ggQBN38iitArPniDlIZbJmF3EgxFHxUwn+q5BI9P25qI1e\n6v2rKbW0HDBcws7+DfGBHleG1kL3bziO77EJtO9NUtaFqpSGqD4kUtUKZfhY\nlhyu\r\n=HF/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a6b5f072852f1f101d03fb492c57fc97f7f0ca9e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/rtl":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/shape":"10.0.0-canary.15a4d40dd.0","@material/theme":"10.0.0-canary.15a4d40dd.0","@material/button":"10.0.0-canary.15a4d40dd.0","@material/ripple":"10.0.0-canary.15a4d40dd.0","@material/typography":"10.0.0-canary.15a4d40dd.0","@material/feature-targeting":"10.0.0-canary.15a4d40dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.15a4d40dd.0_1612318786165_0.4271263226841473","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/banner","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.7a003acf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88b44221ec00cc919e325044d6db69d7c0b8df12","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.7a003acf0.0.tgz","fileCount":41,"integrity":"sha512-vlqYiShXvsR02uXc/6qfv7cThpSWOsBbgfrSl+EdcihfpZzP7MFdp/jsa4hFve17s9pZqctp8xmtcENoG1uL8g==","signatures":[{"sig":"MEUCIQD4U/QPrpJl117mEXlFADLeOlaDxLm2Rdt0FEkmq4xUoQIgUtc5KP7fnkcPXHfDWdBrb3Ne0bAfP4krh9Qp3n7wHS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG11sCRA9TVsSAnZWagAAlXEP/1iss1kcxZKWt2vn/Zla\nERPDCl4KQ3+5r7P8qrqy797BbAPaEH6/nIu/aG4Eb5gA5IDy5rTn37HRVWdB\nAVhd8JJCdUaDntsFuNlPbb7aFj5h/T0KL9ITupFMdONIVajdGL0luUBvbe/z\nmAm0NeSxoZHHrFWyXabuA13OLIbymlQcpLOwxNLAsv180gt/sia5T4HUgj7c\nFuPglHoFRLeQ3dyY2/1Hug9FdolOpGsBcxF8S6MOtTaJjqwDeblmtIM/0464\nVgYcdZriN8msWwB/KRbn2oxV9DxOkwHl5ZDyEB+IVqraHCqUstdcK4AUVptq\nEX2Ry8+HAsAosLUJLoRiaM7aePe9/FIbDBIhiQ3qtF2jSjLe4OYKtdgxCEN9\nwcuhLBsf8iO1TQX5HIa0BHyCavQcKZsyLMvI7eA+x3IucLeXZApO6tVhx22+\n6ZEg6wnsjyAdddMhKwYcEjlHaB6yNWd8EhmSnh9XBCN6L1zzQhpJFGdnVFDt\nd45NFIRWjbtNDR2WvpnKStzrP+WsEqlwNjygk4PH1VJhOgNVu2SeWaU0kbw6\nE16Rc7WIur876XAy0OgVknJ9dDVxWBSRZKvsQqtdLfFjkk2gVahMGyTJXEE8\ntkhqFDsPcqlYn7Rrc+QfUQs3EUrhlctad1ozO+QU0L03eVVgDUguaUOubk+Q\nXCDG\r\n=6EVf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"50aca8110f6412e14432e118e1f9229dafb02d85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/rtl":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/shape":"10.0.0-canary.7a003acf0.0","@material/theme":"10.0.0-canary.7a003acf0.0","@material/button":"10.0.0-canary.7a003acf0.0","@material/ripple":"10.0.0-canary.7a003acf0.0","@material/typography":"10.0.0-canary.7a003acf0.0","@material/feature-targeting":"10.0.0-canary.7a003acf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.7a003acf0.0_1612406123604_0.2866789417460307","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/banner","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.05f249666.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c5ff6008eb33ee78d628ca625d945df42dd3e27","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.05f249666.0.tgz","fileCount":41,"integrity":"sha512-3bxpM2LJn/DMRo818upqmaT82zjPja7twmJ8XBVnlhgVjhQdj4Xb/NzFYqnN3KAzFVw+qDVR4mq4SDaEaWMDEg==","signatures":[{"sig":"MEQCIQCx4wldYmWgpDJw7OANR1TvDjdZWZrLr2ZF+soxTiX5vAIfOf0kPIVVrJOFc4XgdGmROASIXWIxTah2cGFCLEno9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQsCRA9TVsSAnZWagAAAx8P/0Ffl6tzJNPj6JieF8Bp\nHTiKAV7InfwPDhKv2+Th1z/zqq/tX4+9BBhhyiB5XO6Nc/TWeZUuXbi2Em9P\nJAiI4TU2zpuY/usfhKoOpyoifLM6hGf4DajDucyCtxezocADsKz9dIgsnDHN\nMMMWcSVd9vN9TRLFdw0+B9FQGin51RtdsAwY8Q9aonApecyjq9obotbFIurK\nNZBq+W75EFqZaQRmYBEm/36GE+4OM73ATJL1rSDfmGf3NZCmocMzU/7z0zAi\n37+LMIWm30XLMHOxRudH1RFCodflTeodwDS0FhRzYeD9NBpoM36a6/9CjFaE\nBsQEdp12+2CFGJuuJ5uR8yTDeGV3N4vhEtzFKzjQGkj6PQ/svXw/baUjTERE\njvqWKgW48IyiuwMrIV96ftB1Qy+W5EVW6K9d74Sd90D9rmvmGlziswm4yXob\nqZUfcMohhfu62rweAq5azS7yzYI26wDCCtjqG/lVuZkxDojoYWotMQGvKZlv\nm+5VRWhySEpzF3hZ5TqxzKsGzPWEuaOSqjYQ6JuUaE9zKzdeXJMwEoU2SeTP\nTJhkZ7CH/BkNn2tmYF5tEeKbg8RlZUnTRWV0nSvp6nvZIpRAU5qBL/cy5uSD\nlpKSu+Z9ly5NuHsnMrxL2vRa/H3KuU/xRJQ+9a8s6kM6PWPXLFbcVwYvp/ME\nceam\r\n=T9g5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6f1fffc7e905a3d49f007f288c26a4b5ea11dfd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/rtl":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/shape":"10.0.0-canary.05f249666.0","@material/theme":"10.0.0-canary.05f249666.0","@material/button":"10.0.0-canary.05f249666.0","@material/ripple":"10.0.0-canary.05f249666.0","@material/typography":"10.0.0-canary.05f249666.0","@material/feature-targeting":"10.0.0-canary.05f249666.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.05f249666.0_1612461099709_0.7082239740261989","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/banner","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.1a3a39629.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ce5853825916b0162393523c0cbc14ac1f7b208","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.1a3a39629.0.tgz","fileCount":41,"integrity":"sha512-FbXleRitJM6nnWdC1HdAgxu8prL0hFCG7ncbx4Dn29ezz3ZWW3op3KaU2kE08h4pgeXOUjjuokoRm/bXVUr5HQ==","signatures":[{"sig":"MEQCIGwFmtQvcdduCzdMFMVZxUuW2UqP0TeTxhusIqKrE8ezAiAbOPS/xVchSeEDtVPs1ZoSuJhgdAxb0EwhBBKoAJauRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHECYCRA9TVsSAnZWagAAqSQQAJmuYndRa8XDuwMLXvwe\nRD7hBq1w03heBp7Y2pvcVbkkAZWGhSUMoEJ8dfwGhrxw/YULvuiOxH1VrCY2\nx9InYLgDSRYPMOPDP7T0/td4dv++7N8LL7k9tdcBJ1djKAQgp2KQaAhE6ITU\ncYrSa0t2lb/T0WIhZt0uH/0jXOqpfljIoEGv6w/2m2VMcE5aPvr2eDmNcIcg\nrN+JKRA5NKeze6cMZ1QrZsZ+YFj/aa3JaWAAXSAzuS3QHVGwdX4X3gvnVi28\n9iQiy1vucwSMGoc7KdzLLgxYyc/l1kRsjcfAiV6HGZtTuTBC/2u0Pxz7yQCC\nZKLUEmuukg9DFnnqyhrK9pbZkPg376F2ybseZeQpcCmSUajbYn1ehW4fRXx4\nBxMwojjsnI8NTsXH7DF+GM5wEX3R+wFkb8TjcH6110w3aeRdPKuqHwIir7Z6\nOnaQpjy5fcXSV7Wx9vtvSBhXCxShk/fQKB4R1SYakTtwZ3W8XA1jvuiNyscK\nK5aIN9Q1Yw/Lx20Jz0aU5eydMoOppSwJNqMPB71cgqSGCvzwmzm8lXlfQj/i\nCZpeO+19iPW4cWt4qcypDvGqYvet0UEkWTCoZ9SIoa4EVYWM7ygKO+WrY9UN\n/FBrx2cgF8XP19C6DL1M0icVzOUiQ6bxlx8QOyF++50mBrhnOQXGYkySc3L8\nIiNx\r\n=6t0W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"87d65275f85db5a2c4e630df10d231afaba36449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/rtl":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/shape":"10.0.0-canary.1a3a39629.0","@material/theme":"10.0.0-canary.1a3a39629.0","@material/button":"10.0.0-canary.1a3a39629.0","@material/ripple":"10.0.0-canary.1a3a39629.0","@material/typography":"10.0.0-canary.1a3a39629.0","@material/feature-targeting":"10.0.0-canary.1a3a39629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.1a3a39629.0_1612464279660_0.35470949342827707","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/banner","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.8b1cdb1be.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f71cda7a52b675f91537426203a8786a4746040e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":41,"integrity":"sha512-WM9De4TBhS+ghhe0fFg4b6XaXiyow7Ip14EXeUkI0JkL4cIGL57LpRzUbv+lL3poLyUpoeSkEMb4I5Ui3UOsww==","signatures":[{"sig":"MEUCIESv6ZNkLv+xoi7FVQ0pEoRB/FNNEHM3xbBx400cTJzeAiEAzEJkMpLHHExsj2dtdFgFI8k5bG9g4VVbuM0hVb/sWiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHbeCRA9TVsSAnZWagAAWN8QAIXImbL22UoohqyPzGWa\n5qAbToH5MFy49erkIrUa7mH194iPxQbLcJadMv7OPcihACwdJoO07EXUzdOy\ngWwLJzUdGoXZ4aN+LyBMEaG3Ov/T5Q4EIj2jQxQ9g90Hc8z//RxMd4TGBXRf\n4q3Gl1YtK37VuyKhhdcT6hUehozv4cUAeVCQXQGEycNjWOE8Anz0KLG/mxLh\nojmCYNDVmohEJmVFXWzYhSf+DYZMjjJ8L8teDtgLKMGM/5632c5b/TYPmd28\nFEQ999RLCHz+v0tGgBY84Q2tT9vqgHrjf9QZuqVTxNamJCzMv5V0qd5yuLZx\nNpxAVa/YgFo1Fx7D0FtYGpvh+bTtdt0SWluxZxq8QMK/1h9H7i+OB/TP6QkD\nYPxnPgQTZ6LQoZvHZosiRc1vEQs1kqM0WbXJM26l4HIVryUsL2Sz4MWxFcsk\nl9yYKpO1mf6NZ7euCl3kRwpwH5EpXuZQfeRp+ZKgI/IaQDfClrHEZ4gS4Amp\nIGyHidavTltfBGlIhUfYGirZKHWO50Vf50uNOCXlm+hcu0PRl3bzps2OVepv\nbNsWAy3oaFlvUZAifZcpuN2TQyNNXgij1FPJmaDBtOJ07u+S/IgEid3Zgu76\nXN8zlJMdxyOqKeFpZRJn3HGOjx6zvSaT2OV/o2HhiOJJeFEXT6NN8nyd0kfY\n7muw\r\n=c4pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"73f8ad23c72c2fe32bd1a9e5e102b6aca8ce21d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/rtl":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/shape":"10.0.0-canary.8b1cdb1be.0","@material/theme":"10.0.0-canary.8b1cdb1be.0","@material/button":"10.0.0-canary.8b1cdb1be.0","@material/ripple":"10.0.0-canary.8b1cdb1be.0","@material/typography":"10.0.0-canary.8b1cdb1be.0","@material/feature-targeting":"10.0.0-canary.8b1cdb1be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.8b1cdb1be.0_1612478174440_0.9083495287015466","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/banner","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.8271f00f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ac0002bd90e5c2807ec91302d44eacaa1396d3d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.8271f00f7.0.tgz","fileCount":41,"integrity":"sha512-hlpv2FLdHWhdQSFgVyPmko6xkSV8AD3+pZXNBj8zfmDuHoyPMDybn67sElBPuC6kqRrFno8wijtBIBWxA4qX+w==","signatures":[{"sig":"MEUCIAcID8DJ60e8YVJ85aMgXOggVByvVg/xAuHISumRV385AiEArMqLiO3ZCIcdrDdd0STZRVRjqj+U+r0QkcHenA5Dtlc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHzjCRA9TVsSAnZWagAAwGIP/izWYtBhZ+JhJd1ObZMN\nhHH2NQeAXFJcJgSdIiDIialLta+RS1r4bAHCzbBhLtWugTKGtB3iuf/s9yAK\nOJAAdf45F8oh2lu9C7q726pmD9BtEqxkfAIgIhFuXzQclWP7nCsQanvKaAcV\nK8VNfFLtqMUTP8SMCD+9MGCr5dEkCPVfs48piptBsZBz979zw4Z8fKWBJNPg\nxaHRLaVpztjdoLybe/O3k/l5ZYEUTkDt9YtGAAAycdgJ8bqN4FSqtne0d+6C\n7FsrZSFQH5kKTYxU4smkKaJBxSLUOusYdQX6oTm7h4aG+14ZiDjJ24qWcVp/\nPFE0BbWDLal4fuOK+qWHB3nYU04cQdiPfjgQk0/zbxI6L1ejSVZmdBqAQZwt\nMtQu8n+sMC29oRuyJ/u1q4G0mwrI7uyHi4WNAzKug0tOj/FuvyGP0yCZb9/f\n8JNChG7CVumMwNa+wWfnUO8t7bhfOSMBchxNcskxANrTu9NyUSqbJMgx0qHh\njiXDYfKD6G9MT9IV9Dxs1w4EXbhAoz8cuz/4xxIdo9TqQi16jGqKtqArbCip\nOuRUWN/pMS+o291Pzi0jUMuayS4r4nrnS4LUnVm41GmBdqietsTbOn6oH4eV\nhK0HXR9ine4qMazBmlh/VdxCd1k6gPjT5VTa4dlBRobu47m5izNlzkAXwBPa\n6Y4W\r\n=2i78\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e210c5292564fea23c9cedf08acd2b8ecf86e94d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/rtl":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/shape":"10.0.0-canary.8271f00f7.0","@material/theme":"10.0.0-canary.8271f00f7.0","@material/button":"10.0.0-canary.8271f00f7.0","@material/ripple":"10.0.0-canary.8271f00f7.0","@material/typography":"10.0.0-canary.8271f00f7.0","@material/feature-targeting":"10.0.0-canary.8271f00f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.8271f00f7.0_1612479714827_0.27463841741327677","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/banner","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0-canary.533092a90.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"872d343c00c2817cc46674855899f3d1f8262b04","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0-canary.533092a90.0.tgz","fileCount":41,"integrity":"sha512-dYxawrlRagjYCRnydvZ7dE+MMkEGDbFQxUlau9WJssaqSDe52YzuxRnVAOsqeizAdo245DIK5ZOoTm+ayuRkjw==","signatures":[{"sig":"MEYCIQCamW/RXf5sra7YN9v3NosPdLuy+rCda/5xL7uAObnCCQIhALXf4M3WwndbHdGUbNTj+Zy4SFov7powP4PIU0B8ibLq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/wCRA9TVsSAnZWagAALusP/2rndOwe1hPvW74oG+Zh\n7kcIETDaBIcbGwmLaSGkHZD54FpSEQ/q+DV6E4eDD3tTy0+admXqRWOiXGA5\nYhH9jMaTO42LvlAv4SCdgAmF8BkuvyUcvDBIaoJecRmnuha2eNeduP0YRhlx\nql0cR8mY6kWbb2Eez4IFZPk8Wql3hynk44IiqsvDhWgm7T1UXFU8oeA/4UwM\n6JP8Hb24MxIhYPFQBqj7F14kb/1o4DX7WkVY9AsXwYenJBcPf7TSIaWyjfTb\nyOjhbcpPk2P0pyUEH8G+Lj7t6LSJS7/u30QP6aKL7uQ6oowy97npGAVaRvl6\nJyTVjw0y525T1M9hHPmj8vUK12mgjfHhTDwFovUvQmKYKk+PzmN3oKOEouIr\n2CpGvLPLYeWQ0IXxt+J90zBsRDKc4luHzjmwCxfzNUMYpKFSb3m3Z/gVCm/w\ne0SanBnxO681ww1EHuJEdy1eRvHi7Ye7zhTtEvZtKVM5BZyLGLB/iZ4ltd0B\nFldjWVfdD9Q/5uXWQ2Hgm02NPTEztDZXgPFUo1AZzMdfYl0VQahG4dmHs4dC\nphldVixMog7Eg1C3wfCUcdv8E0JO5EiXiYXi0BpGdmUdYBNVRTsFXOfTR9vZ\nCf15AW8b1YM+HdnXxUcMTBmJcarmheqIab221nHM+E6VCcrOwixJHO7xK1uF\nUBB/\r\n=/FQb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1f76aa244e85ddde7348716259e771c739c09f23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/rtl":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/shape":"10.0.0-canary.533092a90.0","@material/theme":"10.0.0-canary.533092a90.0","@material/button":"10.0.0-canary.533092a90.0","@material/ripple":"10.0.0-canary.533092a90.0","@material/typography":"10.0.0-canary.533092a90.0","@material/feature-targeting":"10.0.0-canary.533092a90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0-canary.533092a90.0_1612496879644_0.2813362457868931","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/banner","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.633a9fc7a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b118f0580a15d22cdbd46104abcf76dbbd464277","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.633a9fc7a.0.tgz","fileCount":41,"integrity":"sha512-kwjPQTMaLj5ZynNPOI0rsLnb45FAIXkZ+vYxu3fhg/fk8g3p8ULuxJJHO4MB5CE3pA3EJOuith8Rw74OTlzxnQ==","signatures":[{"sig":"MEYCIQC3oTZfO4AgsL3uEZEzjB1s/N4OYJ0SarW8/bhZEpdqEQIhAJvtXgHEELPH2y32hgaV10Wu7Xh3ZiSDmZ0OTvg5iDyR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/1CRA9TVsSAnZWagAAzhoP/j4kGImnvOSaFyqYD6vd\nQuaA6EOX5HMC79qr9ZC89H/MO4ohKL+CrFsuTtxvYrIhMuE8P3uLgMYsDVrG\nr1lmB8vsMrQcGCdQ1e2Jw4G5kaF5W74Jv6KtRwUh/bvcR4qeOwPO1woyw+pL\ngZW7qo2i+sbhmCnYuqTl8WAaZMONrHJoKTADP/ad2xj5x8t2f/H5wHnTmWtA\ncsq3qNSFuTevCeoLrrsjt/Qpj00dRTbqOlkApJaevV1WPiD7ghWaBN00921E\nkg0Qyebd6B6pi+7KDwq9Svq+GUNsixuqroSfoW+lSv/u5W4XoJw5PCTmyI9s\n0xknG0pB4iYjhSsJbskxxaei607lEzW3vvpLkXeCLISy6Ozv/ghOlSeJK2Ce\nhmTUfxrL5TBzkLZPUocN34WSxA00GGOFfLcRLoi0P8ka9Pq9/bL3L70J7iZW\nfYDFdS0kUafm2eY6kKE7TEX9d/nefGPDkjzxDlNltsoErwovKpI8Sh1Dlmgj\niaXTgGvkDYhw6lC0GwEyz3X/OAp/AEADoU2FA2++FgEtptSfLWmO85iOlys+\n00ZYWQsjVKGG9Ju0DcU/Ve0Da/Ez6MlctTfJkIZNhSa0DsdmM1ooLzzt4Crx\nhgz3Su+B+GzcQ+kN4yyLgrj5yQfjXOWtp3L2zOHSBKNRs847EWoLqNk1SNoR\n5hZJ\r\n=S8FR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9fe28e8829bc50c384861e340d551c0718dac053","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/rtl":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/shape":"11.0.0-canary.633a9fc7a.0","@material/theme":"11.0.0-canary.633a9fc7a.0","@material/button":"11.0.0-canary.633a9fc7a.0","@material/ripple":"11.0.0-canary.633a9fc7a.0","@material/typography":"11.0.0-canary.633a9fc7a.0","@material/feature-targeting":"11.0.0-canary.633a9fc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.633a9fc7a.0_1612541941494_0.18626247772002347","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/banner","version":"10.0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@10.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e3f628012bd17044f33fe6e4203cfd5de7b58a0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-10.0.0.tgz","fileCount":40,"integrity":"sha512-USIk8WIFHLGafjxTsMjNJf8AsRdAvI+XZjEKkPwvpqgFcBLgDa7rRVO8YsgnXUdcqq3hitAo+w1NbNMU2pogDg==","signatures":[{"sig":"MEUCIGFToVfTyasfVxjQLRt2vlIP31ILwWqb9QHaCAfmqs/DAiEAiKjo4YNgu4TZ80+akhCLPz4eMvUckKU29g5z6Sh9t4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":437810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXBICRA9TVsSAnZWagAAlMEQAJoy342287GnizCbj5+T\ncuCcCUtVF0YheuYqjkMc1Yz7izRNY9LMtcgBtPJlIjPXRSANje9aSj3tkDR0\nBSz9eTfKwVZyvPCTpJwnli/0gQoYlTZ8BMdyjwYyD9N6x05jATgnL97RX4gL\nfqI42yxUovhMgWitb26Mp09qsYPiKgDDHygrCsR0YAK5O8y+x2Fscd5pJpSr\n8swTeAJ5ZdRch+HrQjgr3dfayH6zw9080k6PtCsGg2BriYaufGrXGN6j2hd8\n1LudJqVDLDBknChZxJiuewaIESKO3ZGdvtNpqBD7rFE79rG7Pldb7GN4HbfL\nt4ICFU2KPUGHzEldzLRJXWY7D1y8uCabBAgil/RK993wDkcLNmM8vUbIBYpo\nZtGXOd7aZSEEF5W/8pB/frEus7LmDfW6oBiQh5vcRA3gXGDdvWqPXiK7KY72\nuHghLgOFHyQMFiILVikoDHdd4M2mjLJWGPwBdgU07Z0waFsKWI1F77ysZq85\nJKU4vc8rGLNi33e4l/+9BFftosgcl2Ryosh2a18vQLLStnowEtctN1t4726K\nGs6J0BrBFLNXi6t6uv6lp0i6J80iZQaWfmr2K6SA6ppNZWbj0WwdWuFeVM/J\ndipTs5DTqeo6zuMMuWdQZxePcl6guuwVKKLnlg70k6Y+wlKy6RtbVmAUHipW\nuX5i\r\n=0NyR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","gitHead":"633a9fc7a98d0d9bdc177bc9ccbd49beb25bd5b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/rtl":"^10.0.0","@material/base":"^10.0.0","@material/shape":"^10.0.0","@material/theme":"^10.0.0","@material/button":"^10.0.0","@material/ripple":"^10.0.0","@material/typography":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_10.0.0_1612542024120_0.9077413847271283","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/banner","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.b5227247d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb640f46205fcd702c4e3a7c607e51a1bc4bd581","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.b5227247d.0.tgz","fileCount":41,"integrity":"sha512-/QDkchPqS8VV5eu/vI9Rii+yh3UM0kOzg859gvvkO5dpvqZjfaecFvXrWSq4Whwg5oZD7/c+EcYE4j4iHIO7VA==","signatures":[{"sig":"MEQCIHyAfFDOGCRGQGeq8D+kTm0ILTVm260Fh22R9aDI6CY3AiAJeGSOdtDMs4d4fx0G87jj61wEZBbaBd+EBnKVsuWgdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYPBCRA9TVsSAnZWagAAOpgP/385FG4rKtxEY6/W43Mc\nbBk2X1M58CLXqeUDOqRqDW6jgjZwnoEupV5eyjMeOnx7sWqkllbbgtG4G4FW\nN4bwJx7sYK/gHw4Y6isNB6qn1/KEvxqiI2r5XkCVnLBLXeItL96ewIhWvh/W\n4LolUipBG24nZnoRjPotF579ebe3jEzclMyTNrk6HIT9jGoS+LBw4Bzpq7n9\n+KeDB5yN/VRkfBaNbLxvuBihIp333gT2L3OdL71LpLH9uXmRdTO3xt1tayYC\nfOtjynVXO4yMDQJsh7DYqT/0YtoGyvbq2TgOqteGnmEj/Mrzzka23bvZrof9\nQTGBe2O6gVgxJ3M7ShEzTZUcb4UxZGeOc4ZjreTCJFEim3MUi56k/KbsEwgP\n2Yyy9dNkXpweTASw9r7G9xQklZQd12Pvv6Xc2Xn0oPu2MVe2DTY4DRRQ+uLC\nCnr2heugGkEN9RRQNLaZ2/gtbldZ6bciO0fZdYy6B7V0dFHVcprVrT5adehC\nU+ElRVQV6zyz6BZ8MvO4JcwhePmKariLOZC5ua3ow3BabbAajte6Haf0Dmx1\nYnAyUN9A+RXg6+QyDMQbqP9mKKtIRuaaLDrgtc8+TZuZYA8wuXNLLuXbqs0u\nYLXNItPC+UF4mHeDXNSh1qRlUEw4a29l+KSAtc+PvGffOjPKHEFMMguTOOd/\nF/+O\r\n=Ccqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6f733c52a8cabe9fdd3ba4c35cb19e5526d8b312","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/rtl":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/shape":"11.0.0-canary.b5227247d.0","@material/theme":"11.0.0-canary.b5227247d.0","@material/button":"11.0.0-canary.b5227247d.0","@material/ripple":"11.0.0-canary.b5227247d.0","@material/typography":"11.0.0-canary.b5227247d.0","@material/feature-targeting":"11.0.0-canary.b5227247d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.b5227247d.0_1612547009104_0.3039709888394353","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/banner","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.95322b11e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"effb28a72571264589551bcf435d09d99439372e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.95322b11e.0.tgz","fileCount":41,"integrity":"sha512-Rz26xyHjmu1jN5SnDhStKHNxs5uBa26CDydG58zVHdtnbttitpGSQbBg7YTgJWP539ko0G2GKKe9oW295OEB+w==","signatures":[{"sig":"MEQCIDEkexCsN0v2RkdAwvVxuKDKVLD0i12XMIa2qsalvGkDAiAMPMJKvFqEc24TittSfAup+ZC06khqQ0jIhEBuneuGMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdWqCRA9TVsSAnZWagAAWgIP/RbNxlirw5uS2j0xPeOx\nlLPLyLdlbg0Dt7Bg43Ep0VoO7lQ+V8nVEmcGJheCfBR8CECAawGYY8iOwQYj\nr5QUd/O26h8S1/PLYq2aj8NL5jTztxNi7KwqFB2kSnpgNeW8HLWhK7dMrByE\nvjoI3rtVzDC0+3u+gzUpo4pjLnMRQUri7hn5OM/gpmhp2gKM/xfsMDhhFbWF\nyEOeLT1sY+897PeYKCPEKUeTjGsTsF6l9RzXJ9wYuP2GV3h33wlnFVKoRMnK\nwPEE4O5KQsVDKhmDY3Qra8gA1bVvwIeCM5TDVP2QHFBPVGWtvVxZTa2BKYAF\nH3hTgpvI6LPYsIrbo6vSO90jxknrcpnmNZesh1gThLEzUiPPcaueVofsZWWO\nygiom78lc4Vd6CwNkjSUmhHH5IF4IOPmUu5G2x4NqBjk+hy+aIIGxc5dXMXc\nq5ZSluG5cl2/YSudiILUfPGKV/HcdXx9uycaFQ03hhEmZpPGcYFwPeWpU6Oi\nau3Gt2Gt7QLibpfKhcpIUK3KgkqneoLIlStOVa3Z7A6yQfBrQ+acZmD2ESwO\nn10Yu8Noc6ZboZbr5OXK1pPNZrTSK2HKj6CBrObabQt5MxZpt5wFYJ6gw6bd\nYjRp71pnZ/p53IuAl1DM3JBsWQhRIeOSgxVftxOXRCcNtyRNoI8M8k0qwR4Q\npQmz\r\n=YUna\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"96cbc49ea4bd39eb1c275fdae68b6bae32b59ad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/rtl":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/shape":"11.0.0-canary.95322b11e.0","@material/theme":"11.0.0-canary.95322b11e.0","@material/button":"11.0.0-canary.95322b11e.0","@material/ripple":"11.0.0-canary.95322b11e.0","@material/typography":"11.0.0-canary.95322b11e.0","@material/feature-targeting":"11.0.0-canary.95322b11e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.95322b11e.0_1612567978112_0.9779500338173099","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/banner","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.1f318ff0f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d54d5e138a2ab54e629a17d20fec575edfa00ac","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.1f318ff0f.0.tgz","fileCount":41,"integrity":"sha512-TAOVlj14BYSk8fCXdT25r4SGLjGqLfrd6IHIfi6gp8/L6gkRVRoxlfhMDZtzJT6wHjeQnMFtyclvrThK6bQ5wg==","signatures":[{"sig":"MEUCIFXVVzO2Q9E+Ykptq/CIFOq2/O9p97R9POUPZbwiO0wwAiEA9canqQVO7t693bE6E/0Y/JiTW8cFL564i9qS9a1JVoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd17CRA9TVsSAnZWagAAPEwP/1KP7kQtZ7f7ldtNZ++G\nG4uiaH5cah0zbJAPfE+YQvXwbG8ObrpxCjugGepeykZC9KUgrTJxoDUrCloS\n8/bLxjcvaveagl7+nLx00P6jMxq/vsqYtwRZVWHO6hhvstYU5S0TRYUJMU2F\nKEFiCbAQssKjQz25Ijtd803/VFHV6MyOxKzwFz1Qjq/e32ZaaCAfUOmVRD8U\nh1TVa1+7hmIm0eSbYhaVkyZedCNzlk7nib72+IzGRrdjo4aUSuUSninxEIwO\ngIUH82y/4WB+Bx+rRu3JNVRbgaOiwMj4WdkoFVWpW9tZ98Wc68Lv1LmmFPZV\nR5d/WVYv0EakTxaRe/FGi7c/8ocOaD02A+VYLKnyjwDcRVlgtB3jZfh3Hy49\nRz2e0TlfpEngWRgM1pkF+EkKYiu/UstTjCrIis5TF2INcYf1qdYyXb6kqkZD\nwOJH42SNU88n7TbBAMp5RRPRhQTc8/dczy+evIeZzTIWDKIKVVFCBi7jMsGn\nmyvE3X0tnBM6BbSebW4NQBG2oycG2wm68p/Lri+59gCKH1rY4jWMXJj1xw3C\nb0s211SJriBeB8KZp0MVcg/Tw35FduV4LhgQMF+EILE6+6N7bsOt4QdK53fK\n9+5AETznreXb5+9/OnYcYsNsn7Kn2k4gOCyvZmC+lPJjgm1gRRPpP2kf7GFy\nNAej\r\n=GPrk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fbdc53421d5701ba23a43e18a010bebd179dbae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/rtl":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/shape":"11.0.0-canary.1f318ff0f.0","@material/theme":"11.0.0-canary.1f318ff0f.0","@material/button":"11.0.0-canary.1f318ff0f.0","@material/ripple":"11.0.0-canary.1f318ff0f.0","@material/typography":"11.0.0-canary.1f318ff0f.0","@material/feature-targeting":"11.0.0-canary.1f318ff0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.1f318ff0f.0_1612569978944_0.7800330312432231","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/banner","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.ab12cf7a3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30e4b1bce559dec2d2d20128531f60cec5e4b0ba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":41,"integrity":"sha512-P08lzrUmUMv+1LN+ytnh8cLLCRxsjdFvOMy+2ThaFg9PNCjAGltPXaLRh2y3d44toDFH83O8eDDWn6roCB2qFQ==","signatures":[{"sig":"MEQCIHeg5cQXcJvTIKE2xCv++ew/woShnzwwSSz1CPm5jmQiAiAj95JxcXf397ynKhbss+bzaCfD4gYaz5ScBzj08nuNVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVMoCRA9TVsSAnZWagAAYFIP/jzd5GvoB/SIKI3hZktL\nKYUwb51S9q2009urp4v1vyR97Y5aOCOGnOBdSPH2URbKJbyXloJhXo4zpAsx\nQsRGvA3/BerOM4x44KnLl/w9MUqv442H/+N3PJHwQ4kngxkPeWsE35FF9KzS\nXP4Xh4xTmE9Ynm+MJOsKnj8SBoKK6+D+9/p0xrLrNJwqpvSvGAW8z5gBJ3pD\n9HpyF2W5Iu+LppFs+gGDgEUz0o5dbO4oZLJ08GcnAuDMJ+BZaoHdH7WfphaO\ntmGALZ/msdsMk4GxmdNbn68M/C5oAgklIBLTJHZR75NrYd4rd/BmMSxVGdu3\nt5V3gSocYOio9yeDZni5gnD+DoznOd0vYmwRwMKz97gzCotnFOAZ4mOoq1PH\nPb2vqjVHfEIZN3vIx7v8F87J+n/7VkvF3f+zM0u3jOgau050rPbfjzYkNRTY\nJ7W05Anq2zrw+gARr764NPwSyCWt0zjHgPueSypblhDa/FsYtxXQLyjKsoSV\nORuLS36JklSjhp2ZWW8pcONvQ1EzqbGDQrKkFHW5xQ4p+FXtEXKkK26SXnKR\nr9yPPOzXRWPTkyvEaHHEMUi4A8vqCQATdb2duNcItwCaowq+JXq7lwH+hHcd\nBeskGzmDy+Q5uU0IERwCkH2DvMHY6Q1w4SQlKhfIx+p+3lXtkURIGFlrsHCc\nYdpS\r\n=Xy0t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b1cf52745607ed664e2dca58a230a3b3849aa273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/rtl":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/shape":"11.0.0-canary.ab12cf7a3.0","@material/theme":"11.0.0-canary.ab12cf7a3.0","@material/button":"11.0.0-canary.ab12cf7a3.0","@material/ripple":"11.0.0-canary.ab12cf7a3.0","@material/typography":"11.0.0-canary.ab12cf7a3.0","@material/feature-targeting":"11.0.0-canary.ab12cf7a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.ab12cf7a3.0_1612796711690_0.012217500310181206","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/banner","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.98db2c5ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0183e939f0cdacbe1071f3b0171558c9d217bc8a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.98db2c5ec.0.tgz","fileCount":41,"integrity":"sha512-ecoybVT//+Eady7MxNSxn9qH428pyOl4E8Tu0PAHYa1wwyLyAheklw2ZTs+xOSaKXR9hUunCE5p43mFXTX5RRw==","signatures":[{"sig":"MEQCIFSD0945meuWwfzfxtplSg1r1NwwG0fcvwPJEpp1SEZ5AiAWSHJba42wiA1/nzzbWiVwbou6UgDxYVKooIiCYNlNmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVpmCRA9TVsSAnZWagAAYDMQAI2ac86QKXcG8xJ0U6CA\nBBRyNL5iu77B22t7xdgUuzz+DJIIkW1s7j+tqa70Zq5jkj6PgC1n8PNdZiRl\nJhJzezM1pZuxuHUWpdRp5pTgS8wYiKxPs5lLH7nMDtewE9n+zJBww1VLd+Ta\nATzXEQXrKXv5PCMDsdiISsubhrBNI2TNjWvG22wA2ErJW2dii1fd6poJzNo6\n2/UClG1ntHXuIkqzJmBUxuDALrTqy0IMnmHK/a+/Jd4GbkQ7jwp7ySqmF1tb\nQ9c+p2Cu3I9Aqo66GroBs24QjVjgeffpq6u0OCZKjHhzt2hKf0vDXctM+Yd8\nGkDEeTfouFRjAfTBU8S2wJPAqwfVOzQyn2nHsBoUGoTZu6rlCabuqYrODCJI\nKsgDtF6MSexuH23gKTchejwDyeLmiLreDbhKndW/5I8JJYN/65W4mnJoz3vU\noM1JbmFZQhcBrt/jg8qTMC9fMNWcA25mXvxVgNd86sqQjhIMzCnWAzcIl/JN\nmtPWJR6+X+IYVV2AR+KDFPTHOdJIfxoeme2YcdbyFuX0fdBPGxX9WG9EqEGg\nPOos7J0/b3ykNrwbRmODpNW1yD120jtRkAPERcND73SWmgZ4FnTYh/HPQ69m\npcrgAHmB9v7zrHwoAOxhwJI2mWWgz31S3RA4OewZECGglvkZYmVOPYl6JNz3\nMe1a\r\n=z9YX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cc1b9da2cd7b871fe0f5c8370793e0ad9b1a5f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/rtl":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/shape":"11.0.0-canary.98db2c5ec.0","@material/theme":"11.0.0-canary.98db2c5ec.0","@material/button":"11.0.0-canary.98db2c5ec.0","@material/ripple":"11.0.0-canary.98db2c5ec.0","@material/typography":"11.0.0-canary.98db2c5ec.0","@material/feature-targeting":"11.0.0-canary.98db2c5ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.98db2c5ec.0_1612798566107_0.5243619144950269","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/banner","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.1f86b9f6d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f3fd426c1e37a04ce65b8f6fb89ef0869c33880","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":41,"integrity":"sha512-UMCLcv3jRwby/E5w6vT6q367w8lSD6tLQzCExZQjZDa4/11mx6VMjWgJRbExFOqXKCt1SsclUqeYLliFtpFd5Q==","signatures":[{"sig":"MEYCIQCydTmAelFY3828rw1Wxs+WznmpeQx1XDHFV4DhoBaLHAIhAM+ITs/F3JYvSeYumKiFjXopahsZWLkcicVsXJEwYMFp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJ6CRA9TVsSAnZWagAA2uQP/1GJK1GWjDSjbaDS+eeE\nJ0qduvmgO36REHNGLdV6PPXADpPn339X6+v5XonKEYThN1d4SXSqA42fbZ9B\n512KXqYoTYXGJRvs1CCObxkgDeE3bNLmqIVHkdWnKKrpKzC7CaGFVZxGwuBN\nDUkA03rfgaBtzGMSddj5WxtViC4e4L6jkoh0uTv2sVAJCuieFaqbQUkEcXew\nKZQqIOLhcg+3J1vSKq6KrxgtdoDyAnZzfwDMb3LLzeDSMf/EJUqfT8x0gTuq\njAoKtxWB0pdfwT/+LIjPWEKfNYTDxnXKYvBFwIxOTglbY7MyU3wYD6WuVqyK\nBAAZNHUP7T2c8RkF4LUyHCY2+oNXLy8RMbRguhwRWxt2VOrCdtGF1+ZTMLTd\nS8e/zSiGGPGML9HSwyZpBOY4SazT7YGgt+Uv+47jRkt6NYcH1OVyQgv8Oqv/\nwe7C1VToEt0n40RpX3HBKrxIFlFgzwI1N4oaoEPmdMA6ivG863KqbuQnKOhE\n96WIwZMeVOKsfMgTq3AQZyPemjQfpbYCjl3YRP1Q0PL2WIfswTMhg6lAfMHz\nklA/K4G8P4DsGr36NTXxtA/iV1Sj3LYc6wb5mYDSCavfEc5DcXgoVlcY4TrV\nkM8bHMoC/PUnkHb7fAiIggq+UL+Dao6QeS/C1LAYIADttlFPjRw6wYqH/Iyh\nRnpu\r\n=/X+F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"aff88a7d3786743558ecb0dabd92c225698d2b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/rtl":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/shape":"11.0.0-canary.1f86b9f6d.0","@material/theme":"11.0.0-canary.1f86b9f6d.0","@material/button":"11.0.0-canary.1f86b9f6d.0","@material/ripple":"11.0.0-canary.1f86b9f6d.0","@material/typography":"11.0.0-canary.1f86b9f6d.0","@material/feature-targeting":"11.0.0-canary.1f86b9f6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.1f86b9f6d.0_1612804729739_0.4295436001837436","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/banner","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.aac8f5d9a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fab6390586237136c7c8f6564eb2a2b9c7b31923","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":41,"integrity":"sha512-tyApChdwLXOGeDG1Wc6TjYYTlO8bt6gY1Noq0oDQAjb6Wwt9RYD1eHFJynOWOqCv+yKOk/zAjivgmU08klU5+A==","signatures":[{"sig":"MEYCIQDx1P1QZ7Kev0iLT+mYPFZa9A0lK1TXabCXp08X3agqHgIhAMTpwx8zpqnXFFe+zmse3zhiP4F+70ilvegLniIr2fji","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXyWCRA9TVsSAnZWagAAxnMP/1BM594W5QDZVCuWnrqr\noj37sEDYzoAx50/4aIz3UsnzURZp9bQz6YINyjx3Gsv49ctCkwpyN5GCvVf1\nAJQ1Gw8ya9sObNNfC0NAGdmibH/lA1YjJCU0iVrp3wMGwE81pAKTLUUfSQzQ\neYShp4gvH9wZi/cr66IckEPUdPUOUu0XudmdBAh8VHbxVm6TOnisBrzGeUrU\nRzMlmuuDmKIa9SxnzA0mxxDf/ab0gYAoWSA1k5kHt4DmgjdJsv8Uw/kDZccJ\n9+5I741yb48OL0Uygpr2ErSKVV56d7u0gbgYeZn+iNi6fhtAKuOAnlgU+qAL\nlwaJf7sESNpVIZ/bL/f8+LCIi1IitFPrDgGL/qjj1K3T6hq+SKQG0Nx1FQiA\nnjxNbTZZF9/vePjQZdCA42Eg396GXUKi4ifDVSjS/QTSpqfa+Fy5vc0iiaeV\n6P4ONSP6RR+sUjgBJWoavy5PTqbTMFEi02jceZ1sl8PcoSOQDjEUtv1PxQrK\nb+3PDaFh8SPr3VyZDqq0GfIfZh4wpIxS3BpUPnm0XDKWERTOVZrYDhXryTwC\nxv76N/MdKpVGbmu2GwUGvpBTfi3weYQcUDvArPg2SO2rmgd2Sm1PRcpwLVNf\nG03rEdbtkYzGh1uJ87SonwV2F5dZLbkRy8QvmKKDQX2c7qckhIbr4C5YSGtG\ng7WD\r\n=m6Du\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5accfac22392cfbc1035dcad920093851b33cc79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/rtl":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/shape":"11.0.0-canary.aac8f5d9a.0","@material/theme":"11.0.0-canary.aac8f5d9a.0","@material/button":"11.0.0-canary.aac8f5d9a.0","@material/ripple":"11.0.0-canary.aac8f5d9a.0","@material/typography":"11.0.0-canary.aac8f5d9a.0","@material/feature-targeting":"11.0.0-canary.aac8f5d9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.aac8f5d9a.0_1612807318222_0.6368548336486672","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/banner","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.750e18fc7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5d5133b2c3def0a1ceef02db4eb8a05d46d8090","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.750e18fc7.0.tgz","fileCount":41,"integrity":"sha512-0whTfhbPNNNgQ/sxKTYuudVM1QAhUcaIvL+rJRMJC8qZRKnMg0QoFHskmlixh+Al0Id0jrjrfUaJFUC0fc6yHg==","signatures":[{"sig":"MEUCIQCYTq7/f5EPF6kUIi95CJk+nHm762LjYrBSwFrze15UeAIgfubetn8HILvufpUgKywFNk/CB1PxVlfZE3iuNaMZ/Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbBOCRA9TVsSAnZWagAA5MkQAIc4LdSu5cj0/Grqh/Dj\nh5MZJ0gXpMLvNSc+y+ZaXoKQYUMcQhCv1/bRiE/NsjMCIFZJM7rC218kn0ZB\nggR5TSCpPeYFhXIyi6gfqw2KnATHY9bWNvVwp7nV4iy8q3hSGHnXDZmj/yvQ\n6A16ZHWisNFmQKwfj1f4znnzC6g/L6xBCookiW4msdz/vWv0jVUeHl5psHnd\noFoB/7VEUDX71056KfdvZlwcDjgvCj9ePpq+WKqgncU7stV74n3tIzMwJhHv\nTzHP6sWDCyh34G4Ujq9oi124+ndVz6dKxVqO+m9uXpB0pt+7JhLEB84qEVxq\n3pFjFwUA+vOkS8pswwEoiUJPphuD2rnMHwqqp1wUB0Qj4urdY3EosnHLz36W\nkzsZS8EfSJzyZREvlzZWz4txNqTLuuQ1vi5aic1eV+rOqwt5SJPGtO2t4Nw9\nZ6pieUkFN3VbQNbAQp/K+bqwP18lcLFuwb9w7qqmAzxJl4CQYYEXBTj6VTEE\nJr5uf6+gUVvQu/lUbuzCRL6q13ALLbKkowOjOBGQhch/RTDKXccG7tkaSqkR\nn3wHZ/zvFAF7jiPIrmjrKqVOBulQfkQP72Jzqwd7vc20if+O7Gieahq/1pmy\nZverI+BtVX64ryfSnTXuAW6l+y/xzwCLJ8dRRCNB02Ia6i5y90NDe/WoFNUd\n6BDL\r\n=cQRw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1bab3bfc895c50d4159c7b24b69d3ab3a7eb9e72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/rtl":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/shape":"11.0.0-canary.750e18fc7.0","@material/theme":"11.0.0-canary.750e18fc7.0","@material/button":"11.0.0-canary.750e18fc7.0","@material/ripple":"11.0.0-canary.750e18fc7.0","@material/typography":"11.0.0-canary.750e18fc7.0","@material/feature-targeting":"11.0.0-canary.750e18fc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.750e18fc7.0_1612820558015_0.9657759204784102","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/banner","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.b62b1266d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe9aaacb2d8fc644b3f046e94e09d22155928e66","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.b62b1266d.0.tgz","fileCount":41,"integrity":"sha512-3XFTDM4kjs73cYOabYWr61wriJBCIvbUaKwK0aIky4Wxuj4WyJccXM4692/kAUfMJYjPR+a1Fezd1SmOcsBlKg==","signatures":[{"sig":"MEUCIQCcBs+t9l8wzbH1sICkL8AnJf/hEMMhPfEXpHs5YfEJEQIgBA047eQjLQS4hq4kg7UZRRmjxSm7ladQJP7jGC2EIuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwR7CRA9TVsSAnZWagAA9CcP/3AWYu0JIu7BmuzV+STV\nigD29BBOncZsAYBRx0UB4yJ+TC5emZmtg009zMrLIsrDFlAOHoEHMFk75fTk\ngl0MdpE6WqwkxVuzc09EETTdlt1Wh/jD8FkAlb3ErY0QrlqOk9motlJZDxSR\nA8GGQdOukzuuvEwK7AG+ONP8S3aYA91F69UYw8p+tAY3mXzr6VswJoVYLrNo\nt6VSxk3Bzr8k0IpQ87Tqc9c39GC8mnzzaJWXDYHbrTtFjKnzf34EaSk55nz+\nIPiLUjT9HBLEFVatOWJ8GSX/Y8TZKMh9QDHG/OKRivWgH8SlBTduTj+Aab9s\ni+ssezB9xGOtieqckLC3i+HzeRpPIAhFXUfohBt3IkEC3jPJ7ZEu5/zqH2Vu\nD9+tymtzPmcTEUaaW5owVSFyyBG6GRXdmRac5lFeDtyVwwXgvZLa50Gt/iEo\nkSeGylWPgFgT+SPEDji6Y9iH5PMdExVjtaAbVSHlfnWJkovMi3T7XH3keIwn\n3vLNdHVMe8PmvY/LdDpFNt47hx9joKo3W38XpBvizjDzAnHxY6mrN4tFX+TJ\nnhQQgLA5wN4gfPbIr1K5TkxxjrVVR7Gf4ShSvQxtFGBXbbKivplzgGx8Hl89\nyI5YGPCmE8br7H7BUxxrekyy+KvrrgMDNcmXvPHngyZ+wlYLDd4aUB8pkyv3\nq2MY\r\n=vSc4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2369de5a28b7ff8c15bb5f1b2ba96320e8a9126d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/rtl":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/shape":"11.0.0-canary.b62b1266d.0","@material/theme":"11.0.0-canary.b62b1266d.0","@material/button":"11.0.0-canary.b62b1266d.0","@material/ripple":"11.0.0-canary.b62b1266d.0","@material/typography":"11.0.0-canary.b62b1266d.0","@material/feature-targeting":"11.0.0-canary.b62b1266d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.b62b1266d.0_1612907642950_0.9588538064541996","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/banner","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.a6b3101fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"563745011adabca5a1be04d9762268fd2e0d512e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.a6b3101fb.0.tgz","fileCount":41,"integrity":"sha512-78THFZv8H+YnlfGKKf9QjqMnOdzbVAAw8NlSKpHnVjBJ5THH24nOBHQsXdDbAOuhu3bKWicBQ8EPDZB2GXxXYg==","signatures":[{"sig":"MEUCIQDWi2G+NsGmTndY0ulU9+YJyfP9xd7OUQUug1bjAtKLgwIgL/Tn7XXrqtTrVGP/U1sBGmrGvjMATM58AxluMa5hkhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438368,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbtCCRA9TVsSAnZWagAAc7oP+QA+2aR6EPUzATHRnVOI\nSMi7H+VCAjzfjzPwKoLinB/u4cbEum5Et7BWKUT00xDcCn04QW46DE6ncKCH\nQnUP87YOQfhlKFOVvG44Z89H3ERZ0Su6WO7Rb/vHuoJ/5nlAe6NOizVV2OGr\nLsMbLQKKX3hjPxvWFix8AAEbJ5Bvr3vKlzifZ11Xf/m+4BxhswDgV5faRNfe\npa2GZS05gBZRvWhIY/u8vsRlSCRvkabv7I9k0DUti36eJ1j7LqfG64cIRiKd\nzuejdRqwIjEHqPJmBqv8FBRJINdIwdKS5419+3dvcRFiHIy7dPAO8PfdZrhS\n/tJ+zkhoQit3De5hsASHjIj1RvCV+ViUtMmLyZuHAPShG30os09lvN7wILsJ\nwEjKvMmFfNFIfrgz+JzQrkCpEGrWnh1rgMfPYOL1T4dbSREK40t0yt0Fu5l3\n0hOrYhMUnRGDEHYuL6vm9yL1sIC0bVL9lZdEWq3AtJpq96U1owbullwCvmde\nkIEwSf/Z+TS5zUZNOEHsdi/c+ShF4qEYwPSbTgNHqDCusQtzwNm4/L/za10c\nQ4XlJrzX6kmAWAe5ZhUg891Cjeb1fq82Ge0JMeg9d1bLZz/sMp0WaHW18lLj\nXjYRLdYPTvi6nKwV8YNF9xuAmK3X6rgf6CMxUFmoZp8KEg8GtwwYhXtRZMFg\n2Y+O\r\n=CDJY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4e94d35f86983ae07d81d1c7893ffdfca50c2afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/rtl":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/shape":"11.0.0-canary.a6b3101fb.0","@material/theme":"11.0.0-canary.a6b3101fb.0","@material/button":"11.0.0-canary.a6b3101fb.0","@material/ripple":"11.0.0-canary.a6b3101fb.0","@material/typography":"11.0.0-canary.a6b3101fb.0","@material/feature-targeting":"11.0.0-canary.a6b3101fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.a6b3101fb.0_1613085506157_0.614254752063786","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/banner","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.ed88df700.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a683651b2dc5c2f19c73fce11871ab0198a74d0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.ed88df700.0.tgz","fileCount":41,"integrity":"sha512-QAWLMkaSNQ5H3su8Jom/bq9Tu/dRrYU3a3Siqe1e/Jl26nade4sw2Gtc00m8rENLvG1et/oZKCnqMSrePsZmEQ==","signatures":[{"sig":"MEYCIQCgzn4SWmRitIcF84Ev98KbzSrGUbnsqwU4NenJFpDmKAIhALdJUAGXmHfqodkaHXq7N9NZ7jEcMpYQF+hLNphyRZul","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcbwCRA9TVsSAnZWagAAo4oP+wYzknaGczo+19+oRRgn\nWYvOqw14IrRdBqoQCJhh9kNcQuUBhLUbsOUPQcnUr67cV4qJV4D+G+zuWKN5\nbR9JF7HIYkJueT/Iik2P3q3WUIa10mrQsN+AqZEF4/d4mHS5WkCYI7hAQJxj\n9lQIVAzPGcfBPAhfTtCsI5itakU3Kdgj4fBZwHR2yXJ1GkmuwHhXUpxI8jAM\nPkR6PMNi7vkKdRqRrowPkCVQfdDVw8PyA8gc4M8Z76sTxQijzp63KISHQdyy\nZsKgndk8dbtGL2SWiLkx5dvA0DZBtcwWoXUDzomUKFCvc2pBZywb0w+kFBNd\n/VedDyTuUHiPe7IZIasIPMst9/4X349FJ7bDh5QcbOEHxJ7oM/yPRjl3PjNx\ng89EHebGKHY4pTXVWh6pWvZTOTYUI+xPQyR1HwSspqp/L/2B3f9YSM0nMxQK\ngLp8nvzmx9JG1+2ip+J8xDGjqEOvH+BaURSkgHfwsw9XCivTHuPnWApDzAx+\nqNqozPPBKHnQo8/MBuVNClG9pmePq7iKIT7hlWivoOQQNQHYyBUftqa1PmaJ\nKfIDZTXIjD04lyIN/hgXKv+WuFWygEtDd7I9JR4NOKBh/gJcJ8Q4tz8ZaHBI\nuGqJi7yUTmWZDoy7Q75IL8sqeNa1P8MbJKocc186M40P3aHvye/6JNGjyhEK\nDXKk\r\n=/ZNH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9ee8b051c4fdfde9d63ea193e791d71e20094867","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/rtl":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/shape":"11.0.0-canary.ed88df700.0","@material/theme":"11.0.0-canary.ed88df700.0","@material/button":"11.0.0-canary.ed88df700.0","@material/ripple":"11.0.0-canary.ed88df700.0","@material/typography":"11.0.0-canary.ed88df700.0","@material/feature-targeting":"11.0.0-canary.ed88df700.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.ed88df700.0_1613088495903_0.2943439080901826","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/banner","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.d30efe6b4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49b524b13ecd9db3d94dd8352dd01bebd83664a0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.d30efe6b4.0.tgz","fileCount":41,"integrity":"sha512-4x0f6koiFCGL7OYAQEL65gR2ZWKvNr1F6QCTITxT+Wt0Sy5hmxNq+QgGFOUDLJUgPFJ8VxGb9Wcy4ZCdExrc2w==","signatures":[{"sig":"MEQCIA/ZkZiFN4l5zuihGlUBVkd4PjBOy1DMI/jLhdcfYsCRAiBVqvUXEA/l8SJLtAUIAd2T+LpkrV5iBozLxAvS1MQWng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJes+CRA9TVsSAnZWagAAS2YP/jl+LlTlq+/exdj/lOdc\nUnOBX3cogSOWmoHYnqaubbNA43mLi1SimUeUjbTzye4h4c4XfPXo1SALo9BJ\nA6nZR8tIolz4T4JawtqfDEY285F1axz4fKDner51PotmshgpKr046lmIExxo\nQuiTiGs+c1esUnvWa6HO3Jr36V/Kaz7HmLCNyWNMjeGAvc2dyCHKz0mwCeWw\nYiVGn2QbTUfYzuycNEYe20uHiUlyXJ+cHTxc1pXNdb4W7tAsO0tLqVMXlI3L\n6yMo64r3m1tbfRk8mKFw/2a+4UWTFgxRMBv1GVSHAk3q+SC2kE8zpNvj2Vvs\nOy7nnhISp5PEoNCcUEX0tlU1lC4b+O/t43ACFh7FqaRCSrce2D41O4dfLTwx\nzagtGRTPUG6MONmyMTvA+WEt0iTcn74YJGRnuYmdhvZ6j64oJFAzR0MXoB/J\nEaR1OQmIoqWXFdJO/lr3x490/LQwHIIvo6a47H0EBAEYFriUb1po3f7vnEBd\nC2C6ZhKhH06rcttaQiCRuLeUhbOrIMVrvIsymR3pOXkauEixndk19byY3ZEO\nEcymIpj3ddcqnSMDhCbDJ2s8YvS/tR0SK/berNbA4OHSzx5st9FizFqk3LBW\nOxcfx/2Ze6bKvfx4S6ZKpDTGUVvfHx2j+rl8RypKtTqmN//LrCeeesuDKkBC\nGk1G\r\n=k5zq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0d2a46d4ab9ca5088511e4e0b5cf2b261e3e644f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/rtl":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/shape":"11.0.0-canary.d30efe6b4.0","@material/theme":"11.0.0-canary.d30efe6b4.0","@material/button":"11.0.0-canary.d30efe6b4.0","@material/ripple":"11.0.0-canary.d30efe6b4.0","@material/typography":"11.0.0-canary.d30efe6b4.0","@material/feature-targeting":"11.0.0-canary.d30efe6b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.d30efe6b4.0_1613097790309_0.43231408795068105","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/banner","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0393bdc4b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8149e335cf94ac5559e8a7757b64684fb0ea99f3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0393bdc4b.0.tgz","fileCount":41,"integrity":"sha512-I63tMjCy7Pe4UsyqzU+LEVyMFhdqV/259jTphXWuUu2JIZugamoYQ3WprnY6YyyCAu723/HrZDA80reyLIsQbA==","signatures":[{"sig":"MEUCIC2Wk+FoLXJ2fGhOQlsMOBBHwDCo0IrTZqSXWSEOjYAOAiEA4dMAELBUUal67Y4JenN5L01VEkvH4KZaiNfBesntQow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgTQCRA9TVsSAnZWagAAOA8QAKMm6rfAG/48Pqnmvtf3\naq9eRycg3aJA8QclgJmRItVqhW6ZETocPTDAG9RZDiYaeP/ILxBu8y5wt6Iu\nrjgy7IPUeK78EMujJzsVx6Rl9CksWOUnAxC0fcp+7Dwk57pmdjUkSCzD3mIr\nB/rvVkxSvr8nWOouD4nbPWLgg/Wh2TD3LCB8P0coGXqWs/+JAfDXEg9NvGld\nxq8TXHLvofniaJAhxyC0G2oGiKGhNF0BmToI1SOwKWMaNscJqXPOpKVif8Wr\npMxzTP/8UtQmoa4SuU0r7bUmcqkTFFFYUYHUQKRjP9xlRIodHn4jvbyVRKng\nfnNYXdgrVtQTLlhbofQ75Xz+Pyx5PMc+HaSXLdCJVlPWMDeumMmFl8jk9LPs\nkk+mAZ3xit/X263kG9ZFl/8L1OLfkByjo9DiH2Kjra8da1Zwai+HA9jP3Sez\n9eK0sS9odnCIf8PLegHLQU9eioAs+umInf1tngkLlbdoNFkRZPn4894P0OX+\nbLna6P3F2NUsfvwIrGJbT+U019J+cjJDyxKTA7APRobNXMLVa09urr1eLXp2\nFqp6+4SrHmr2jZUsm112/7FSPLB5sr8CwXoPf3RRcVYLn8oyNHvnxXS+Y43w\nEGoKzms3BEzZqXkoOtKGm7DjtSuw9U8R3h9dToFjVco429k4t5U4OmIG7IYa\ntULl\r\n=5DTd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8f241a2f549ae5b1fefdbb0c93ddadbc1e1705a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/rtl":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/shape":"11.0.0-canary.0393bdc4b.0","@material/theme":"11.0.0-canary.0393bdc4b.0","@material/button":"11.0.0-canary.0393bdc4b.0","@material/ripple":"11.0.0-canary.0393bdc4b.0","@material/typography":"11.0.0-canary.0393bdc4b.0","@material/feature-targeting":"11.0.0-canary.0393bdc4b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0393bdc4b.0_1613104335419_0.24277703722472932","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/banner","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.7cd26af4d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7525b7d38ed16697c98c48b24ca0fc9e9b8442ed","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.7cd26af4d.0.tgz","fileCount":41,"integrity":"sha512-baCGskYFXruXbzG2SNGdfhE0UJe7ychEOw6gCuQdNoa4IHxlCPsz8WHvFFpCO45jhllQPLhlRrwva9X8wPt23Q==","signatures":[{"sig":"MEUCIQCwhkr5OdFGep/OvYs4WW9jbV/v7zFG9IA0riadZ0F9SQIgdEjr1SINl1gjwd2P3+cV2uJy0/uYNJ4QbiFsSvoIh+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqYvCRA9TVsSAnZWagAAvlsQAIIXCUamFqA6Q8uiKQka\ndwf2ZNWSbZ1pRhqMhHyazm3tWIWyOK6RPiDl4hvwFRe7lj/q85yXXd1VQCKE\nzvtDxCJuTOHHMrmJFlGv4z/rahle1X3y2TLTLKDkXUrKh+mJV3Qm7HJDB5Li\ni1S6jcH2+Ybp6xq0YnCyZf+1AjYUVH99vGcZn1oDZNHmPddbzerrOQXk+q+a\nKFxgjvyyQcPG92yzzz7Ujd2/DlRCjGyogITFkGc6z5Y51Rs58Zlq2MrCDILX\n7GKaLCya8uP1RSGICM4eNpi8PwXtteXuBKyNQcsm7ZUvwRrcwKXWpNeZ6892\noP4hceNRMD/FdMhXMkfXCyqY9QTcVcCuAdF+58vjj2BijzPh446R/YOojWpg\nCfVvMDxkNamOnQtQ5ASW04T//BSurNv/4U3migZjQyxseEd2JILcB0f/PiL6\niuNpnZ72GL43Dcalquu+1yEpMUiyCV7/RUfneQHtknsXtrQuhpeu6kLFUHyP\n1Gh0UWSF4bC/TtBwbYRnme4XfU1rgDuk/0YL0+NB1GrG565dCwVQJLnRwYrD\n/hBjwyQ9OHRkHo5OZJX2m7dTLOTpYq1LQdZzHuifSLmlBs/9J/58zN3suf8v\nLVV6GoxAWQJ84D99DH9hATMubXrk2jczWMKNVfYS8sCediO6Pb2+J2GAosM4\nBDkc\r\n=dO1V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"da78e237011a9e38abc623fed26601ad22a7426d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/rtl":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/shape":"11.0.0-canary.7cd26af4d.0","@material/theme":"11.0.0-canary.7cd26af4d.0","@material/button":"11.0.0-canary.7cd26af4d.0","@material/ripple":"11.0.0-canary.7cd26af4d.0","@material/typography":"11.0.0-canary.7cd26af4d.0","@material/feature-targeting":"11.0.0-canary.7cd26af4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.7cd26af4d.0_1613145647317_0.3618958975173774","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/banner","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.71fe9a067.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7584bffaf2980d8d6add4420b14e352dab688aa","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.71fe9a067.0.tgz","fileCount":41,"integrity":"sha512-LmM7e+AyHRyVitw/O7pTpNbKPybRVqQ+mAqIamtqs3Awtm9s6SPnk1EDm4/wDWey7vVyfszl+gxDu361v4ipMQ==","signatures":[{"sig":"MEUCIQC+8XEsQk229ALNkeAy+lGf+RX1G3GpJZgorm9H8NMmmwIgarQaVRstAsNtCOtk+0qAovKkcqU0Ee63YOLAe0H5EYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2TCRA9TVsSAnZWagAA6OcQAIyZAVY3K62hLUFTa1zY\nxLeN9rbP3TwusZ+G3inEajfkUUD7ITVsU8BsZHI5+Rvv2IjHw9oXjKpR8/xq\nMb8x+ItvSShMwtgHpXnPI4n0Q3GiuwQCZoIiZm8IfqEVs+Xm7tE2FeglD9mF\nO13TBNbRCPkqUZf3eru6cQ32uxtJaykvNF556cYVZ1hNszFgUSO8lTuukBTg\na+dvV18TB6iyhjBJzqmjdZThNkKBgb8+Zq7NbiQGM9sJB1JpwOrIiNNVOmE+\nCtQoQbfg1ALN1I02nlKC2Muq+kNM0/RgFa3s0gCvj8fEsoqTosY9H0ZD2dKS\nYAsy1EV8Nbe4KDNgiLRj7Dol7kB+aY9K7c2Ascu8ctoo6VkYiwjUyfj12uCV\nR3YJWDSiLpwx+MARIRhrBXDA7ns4OnDyJLS2PdpwTc4BZGZrmVJzj0TXhgkC\nN7aadi1dn7AsVy5OmQPkQYYAvdIIAiJC+MtZ/WWT9V21qSLc0Bg+R99eAsjZ\noB34F1ozvIzjF0MNhstnDZEWlAPj0VJFis6omMKBeVewIhCME3bN85i0SmZk\ncCVAx+oYS9+Ng8lP2g+9PDrB+U0w4lNF3JKnngp06jKY7NcdLKIXBvDrpumR\nRi2Seh7zJxx/q4oM+bu67150HE8Epb7xWinW5WLw/oSw08hU2XJlwMsBJcQc\njBev\r\n=nCxe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c79890da6d0bcf08c3d7c57e31df805b50394019","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/rtl":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/shape":"11.0.0-canary.71fe9a067.0","@material/theme":"11.0.0-canary.71fe9a067.0","@material/button":"11.0.0-canary.71fe9a067.0","@material/ripple":"11.0.0-canary.71fe9a067.0","@material/typography":"11.0.0-canary.71fe9a067.0","@material/feature-targeting":"11.0.0-canary.71fe9a067.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.71fe9a067.0_1613147538632_0.7330528932566747","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/banner","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0fd56a86b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1848020e61d5e9cce22ed389cdd9c2b69d26c49","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0fd56a86b.0.tgz","fileCount":41,"integrity":"sha512-7A+Xnkh6Sqp7SNu5pcIkUXEELrm5oPSi3UW3rVaiiUvSprcgJMUM3ZANl4uusE4Dwvs/kWm4BV6Ubd2wbdaEhg==","signatures":[{"sig":"MEUCIQDndOwzgE84CkAZ5a0AGU1HYdqlfQXd0uqyHiW7awGxiAIgfpu77KDAI0fSy5zRJGLsA0opEGkB3QqyElVbofFiLG0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxmVCRA9TVsSAnZWagAAD4YP/RBm8+af2yqAkYidRu9n\nEjC2aaTyPDMU96NPN5qvluq60xbxC84v7DRuWSQKXBDNKGUYX7/QVbDt6JA1\necjIod8D57H+lVlk5RBDPMSXKED1PakQ5oflVw8s20xLbswZDgAUioGRfHYh\nUYceD9xBR1DioHYY9ZCoVV1u4LusmAjFqK0tEasmSP8BuTz4qr5sgS9qKvIe\nXZCeNPPafI5YFaY+tUjHD+R+12Uh5TF6YFC9z268ixN5DU9MtyRyWSG8IDn7\nTB2IYOH1i/BUtrUGRpVIXi0ECAJPtWymD0t1zIPrUCCczH8YArRWqbSr8oQa\n4YoR0JPePoLxkCUc298dpbxeilVKbvhaEXMUxzdk0/1v1OWOkSwsECyslJnn\n6xXOHGblFcFBPTH8lPMunlBVBiW0FGTpkntyAt53gDWWdDWqzuYF86UyJt/z\nN9LHF0HWubEJBO1AHjm+p/C1pGdPbLk+fYoHJfAC/+ohwO338cXA+Yk7For1\nrgDPaF7BRnzlLJC7gmYfatChQviE3Tl6b0FRjnvjyoJDJPuCZa817iaIeYbS\nf+TNBYOL7Q6P/XbCrn3OCUZ1YWOe+YRDApzYw/55GJh8igLxqcbo/e54d8m/\nHEtLQ/8LhLLqdadakDgd3hJE4nNAGItBz8PnCJF/VEirgaeX+7/BWukdqFU4\nP59Z\r\n=DQ5d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b5d7e78bfa318c864343a15754f4c5ab98160ff6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/rtl":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/shape":"11.0.0-canary.0fd56a86b.0","@material/theme":"11.0.0-canary.0fd56a86b.0","@material/button":"11.0.0-canary.0fd56a86b.0","@material/ripple":"11.0.0-canary.0fd56a86b.0","@material/typography":"11.0.0-canary.0fd56a86b.0","@material/feature-targeting":"11.0.0-canary.0fd56a86b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0fd56a86b.0_1613175188458_0.4678874095693111","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/banner","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f19bbc4af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c402db6eaa605ac7f973033a86998ef89f5a0b6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f19bbc4af.0.tgz","fileCount":41,"integrity":"sha512-Q8SWIeOp0rWp5QQ/JR4iv5CKMmDyxW3OFxXZpIG7nT7YcbRiJ3ELlWELElzTOolXowykia7tl0qlMTcq3OpjwA==","signatures":[{"sig":"MEYCIQDystof96+oWT4C0N/WFbSa05Z8Z9XRdlmQ4yJhqz/9gQIhAMpPnskh26mKFdvmmg08tcmKwRzSlw3kjya9KMaNpaQe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLER/CRA9TVsSAnZWagAAmJIP/i0YDpZNoikOUXwEE6S0\nLlQMh6VWMa87TpDl2N68eGlMCd+uVj4ejgT3E/cv+PCru1NlrinfjyF1x4bG\nDk/+OPXFR4Mcy0QSO6Bzc3n8PzL1FCMoP588hvQNA5mz0AQNnrPdKIe5nwcS\nA2z+5xa4KdKxgTL3xYlCo1VX4KT9rljNGW4Mq2FRJXX3yVJX446x2Slj3Z8F\n7Br2aTOA51xtvcflNPiH7njKow0TaLgzZBwgFva9uJrFmHIp5YVmWYX9ll6C\n1SHcPkLzZhcl5JGYg9ff3GNM1zKFXCO0I5gQ17oB2O4IOa5F3rM8B/RpQc3t\nesD9VBz0wwL5qRGRICI9mGlntr59xCkfPTcvTXQyHudbzy0Ka56oJkXo3rmd\nJdMmflqPpyy5xUour1aEEUtleTwMhFcelMBNI7wy2m6D343RRwjaJPvueDak\nq0JYHH1I/vi+oUGrYMDxE3qrZJD+sehDyz+6sUIvpGggKfFJmNFi8N47rT1p\nwmhSkYVlttEHWeulGZQFu58epIeUPfoand06J1Q3HYGVIpPm4bFfe/nzta63\nfOOf5aJGbCbYp6B9Vui4SO3xIVvQRAYSEmpuJvLPMNBiFCydVtVsclew/i7b\n/EzXYBEeJacCc8iUBmpKz7uFZxDRcxDUi5a3Lu3u/sJK1kiAiMHrQMHY5zOE\nNGoS\r\n=WbRI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"842729c260f5a3be9fec8618b41657a90e725af0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/rtl":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/shape":"11.0.0-canary.f19bbc4af.0","@material/theme":"11.0.0-canary.f19bbc4af.0","@material/button":"11.0.0-canary.f19bbc4af.0","@material/ripple":"11.0.0-canary.f19bbc4af.0","@material/typography":"11.0.0-canary.f19bbc4af.0","@material/feature-targeting":"11.0.0-canary.f19bbc4af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f19bbc4af.0_1613513855140_0.21640130465029306","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/banner","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f9cac96cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"642266588edd3be2c717ccd80112bf9103fd66b9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f9cac96cc.0.tgz","fileCount":41,"integrity":"sha512-9uZppqGjZhmS/OvpaEz5YxQ0nRhNhZgUH+oQpeOKvU2kqBRNBQOoq+hqSsQbszgL7UL/FCBfpaYeMsLf21wISQ==","signatures":[{"sig":"MEUCIQDF7oReCyXjGWqd9MtONHWIvcNzxsDXPyvFDRe53ziU4wIgLb6ocVXUfe0A56a/94pomoVxdcniqyhKpG8uhZE4N48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUApCRA9TVsSAnZWagAAciYP/AmA2rntD60asISDKpYx\nxMEX1detg705Sd8EmOaXQKUZ/Y/zI2+m7My1hLjAc+RhvSMBqpDv2UcEJ8+X\neUhiuLekSFLKgjc51/r8BXAYaUllJYgIdcocAUOtCJZo5EQH6M6r73cwqZAh\nSSQqPdZXt0UisGSUyLGlo3DfyeOCoNQ3KMB+Zbj+IC05n4Ik3U8mScxvwa3J\nGBqW3wU04O328dGT6uvaY1qmfE+rCWSb27uLRptLqkTXV9Tr2Bq4LvBETyRI\ngqc10/bQ2/+ekTh5ESs4Rz29Maaz8cjJW1Ec+PXMRatpcdo5dVM9vziyiIJJ\nXUCr7opVqwSrkqKlFRlEsr0YhzMWha38xBvSbnNdwnc5tuvkcfhRall+vZ5P\nKgDGggXiEz7Y/xnXipuWHH+3q3zOHa2c97+WvoJ/EH+yjhSXAL/K2Wryltva\nqUNRq1Ts8b2JFYVrQ/b/l2EiTbYjd/JPOqlOTdB3tY4YK1mD+9hr6sGNkfk+\nl7fqaP/ed/ourf1tCv19vBfXohS42BGKxp0yWBXuwoTWP7n0vYafZo8gbk6u\nw018gwfI3rYuD2gCVJ1xJxuBai972sthrbgcg/mv36tEPHiSRiyNkyOJN99R\n3CxMX9PquJbFlzoJj5h9gJpyohJZYWrzTfQrJIxRFhjP4DMyUlPn9L9VdA8p\ntCGI\r\n=maIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"993e327235c8cd36a8c15095389eb149ada97cee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/rtl":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/shape":"11.0.0-canary.f9cac96cc.0","@material/theme":"11.0.0-canary.f9cac96cc.0","@material/button":"11.0.0-canary.f9cac96cc.0","@material/ripple":"11.0.0-canary.f9cac96cc.0","@material/typography":"11.0.0-canary.f9cac96cc.0","@material/feature-targeting":"11.0.0-canary.f9cac96cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f9cac96cc.0_1613578281342_0.035348403547460494","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/banner","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.79ce0878b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b4c7425072d009bea382b610ab9f14ea05abaa2b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.79ce0878b.0.tgz","fileCount":41,"integrity":"sha512-3sOp3pBakz/btMXnH/N8gCMS8XfVC4O/f4+XTaXKa8zU59FV9VwEwCnPQNzLwgVwDgT1a/F0i6Ojned2xUe5VQ==","signatures":[{"sig":"MEQCIDjIXTXjJv4JLBZHvPAWqlZRI72OZ949NYaJAppQ5xvwAiBLzYGQQGCIynWmzBA27nH5nrbffJZLxwKIXECz7ffunA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW3eCRA9TVsSAnZWagAAqyIP+wa3BDK3TKRpY9hC+8Gj\nE/zvV4AW3mRmlmDFNcqMmMa91Y2nUfni8aJA4UFcpMxRCPuv7qhmHYJW6IAY\nEerI26SkAIFSOAYZzxrB+7BTXlOuBqnJOSgcAvypEA9iS/VUXo9l08zQH3hW\npKRkrIwJf4EdyYvyqVgsLuLlj9hEztxP98SY+yfN3SMJgSYF4KnCN3p0oaXw\niqSa6eDzlbWcG7Y4klnbMCiB3Iwi7yYVd+ACmoUaiwWEQSAWp6cHGKm5HYI4\ngy+yYN3VjdZdkiPM6WX6UCYsXR/iURiV/+M/vpx9VLQ15/WvQvkYvWExEfpG\nquqjmZ4qupP762EvVy5jmUXE966re7JVqO2XALq/pHn+C1rD+YSs3PmtTG5W\nnfRO1/oebFZcHt0VYXXDcH+th/vCVUN4LWGz27fLvuc2+ZGJJXL7bYpP9lVa\ntGaJ/rloMfFqpqFrkOFsvRIeP7xHslxYyux76tLfRSrWUHuc7cBpOv3nhv+W\nzbv/6i9SDaqKpj34zrX1K0OxTBIEpp7Bbfs6GEKIWgjORtTkriHZT9Yg1o7W\nHPW2uvqlaVFjCH9uEI15izsApsIR3H7B2SkmjzTMZKSWpprKI8to9vSUDAaY\nP6yavpSuDrscbvKa1lNVpB0rfXpt0S7In5bPYuRAKgUuhy7oZs0ngxbW+TT9\nohag\r\n=osHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3941c218ed650b1d1767cd6b17652d4e1b5f7ac9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/rtl":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/shape":"11.0.0-canary.79ce0878b.0","@material/theme":"11.0.0-canary.79ce0878b.0","@material/button":"11.0.0-canary.79ce0878b.0","@material/ripple":"11.0.0-canary.79ce0878b.0","@material/typography":"11.0.0-canary.79ce0878b.0","@material/feature-targeting":"11.0.0-canary.79ce0878b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.79ce0878b.0_1613589982050_0.1479472341760979","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/banner","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.d6e507b5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"644a1b98ba2d463b8eee87ad8dd317620d7044f4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.d6e507b5b.0.tgz","fileCount":41,"integrity":"sha512-9eztDoHaRYEXEgHk2WBVmm5YfeVxTNTfQcv/uUkRwy8t4PSudZ+BwSUrtHNR3xsaSJyAnNlFmhLm5LDDj/OoxA==","signatures":[{"sig":"MEQCIGXlaDBUWGiLfJ9+7O2L6zV35YVph+QuE2wctIBYaeXQAiB9qrbak18WKa15JTcLTsaQ2CJL55QmlNdEI4gbF0u9JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXWeCRA9TVsSAnZWagAA1GoQAJnuezV8KiqvFrSzNsOS\nf2wea9cDybWpmljUR/NBl2HUgcp9W3xeHhffFh5tC3XfYE7FyDQld9J2cOjV\n1SzNkkh63d5g3LmsJOY4EnKnFmllbWR+IoD1OvFXEQM/oj9QS0IS8VqeBKhQ\noA3Fp28fjp4ZOdUpsGQdKSUWkQA06b1y3ASUn5ipab/ZH2ASwNzfSuNno0S+\n4/lwsED7IAzozSKjcY1K2kF7AlkUcYFXIt4xacfHyAx+dx2c66tYjDOES3E4\nlfaL1pdrO4B1u99vRSrAK7STz/Z9HWbD7YB5rQbNCYAgI8BmO1CvF17DKxjg\n/leP3RK+QXixej3IrAT4Dk8L47NaY7UtEmbJ1jeHLtw+tZtpGcZcbiCRt8l8\nsMGK0A4kQsdrnzBd+Fd5BaAgQuzdA2zwhDQH8Ns7iPCjpEFgw5BmIWYFUlAa\nnKu+As/3JZc1igtw0lBOoQWBXO6yB4IrsKq07z65WJEdiY2xVPT05r23QqCR\nKqI3Z4QZam1dgKp1I/iKFv3FeX8l07uZiedJ28R0WbU58YpK9CXNQTM/Z6Mg\nUXKQ9sTGd7i72IEDxiIGaQQeNMvSlbzY93HD17Dw+XkLQn89rndtUcl6ur1X\nFJuWXdZUNFhlGgzSsAZlWnpntzEXfCCHiBiCnk+NbeVxMnfvzFHUfIZRO07C\nLwl2\r\n=hT1q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b20b73a4aa16995dcd0b73e46e4dc31f7914a367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/rtl":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/shape":"11.0.0-canary.d6e507b5b.0","@material/theme":"11.0.0-canary.d6e507b5b.0","@material/button":"11.0.0-canary.d6e507b5b.0","@material/ripple":"11.0.0-canary.d6e507b5b.0","@material/typography":"11.0.0-canary.d6e507b5b.0","@material/feature-targeting":"11.0.0-canary.d6e507b5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.d6e507b5b.0_1613591966372_0.556536447835464","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/banner","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f2658381b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e20525c3aa862b2f14a64afe36c726028fe54909","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f2658381b.0.tgz","fileCount":41,"integrity":"sha512-YvmDfuBw8FGAElRMl4jhoCiRcwnT4Oa2fvxnyklkDfSZY5OdYierYa4fEVa8z2MipT15SwJvpFolepRbvhzPqw==","signatures":[{"sig":"MEQCIE0kf6ZmKnp6anwm8m7enEVORjBZXtNgE0FYdfweDMznAiAqMG6HXD8AuhVPTKsiFhUi+VeJSqjf8MZKxrchYhPqJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZyxCRA9TVsSAnZWagAAe/QP/jUBV4Pa6OixLd3stjyP\nXA05VcPbrN4hPUtwMvc1b7k/myLIksfPF/nX4pSsN53L3DwV3RS8t92LD5hW\nCeBgYkE+goaRuXDbGli0V49dt9Qg0p1XwieR3unAC6hLjFJ03St80s8z4qkm\ndmtat/xlioQBTqcsavp/zL+3ClG2csb6lVtQUCxft4mTPPddajFyljJUiazp\n8TMgQTbVkikGCSmnwMSXYCVApoJ5jB7AMbXyz7XBnrSngLEviabU+2YtiuOt\nPhTTfCP68guvBmhuLxgCOIPXmSBx2Uyp+3wR4Zr4Mt11FqM5MDova3eA/CH7\n/opWkG8eyBoTDAfIXyWWG5Cfw823un+9sxpoL7KbVG/nzwEzMAbaIhtK/RLt\nIVkP2Ap/QeFxhMeRi+AeHZbL3/0VA986vaEhzKeYN8M9RP39kSgjL93pRWB9\na1mvGKciRrrYUxvjwHttgHYBtaghG9dUwoYiNnI9KWnGQdh6CqvurqdZ7Drb\nzgSyE6VjP6J7rZ8ozeXb9JlFuw+V7cwoUYhDnJzIzmvRjmS1wtULKmh1d3fa\nrYsHfCfZ3CvWsGTmvKZLGjnBp48JMMdwnuGzkXvECoaIsqbDExTTizc4IBKQ\nJ9IL6a3nq+FHc73tU91cSToqZbqWna8GKAQj3kw3taebbPYh5Lzjtw7klXVf\nxy/k\r\n=bncp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bb1b60f60cf9b1a4184aa52e590bcb4003d3c09b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/rtl":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/shape":"11.0.0-canary.f2658381b.0","@material/theme":"11.0.0-canary.f2658381b.0","@material/button":"11.0.0-canary.f2658381b.0","@material/ripple":"11.0.0-canary.f2658381b.0","@material/typography":"11.0.0-canary.f2658381b.0","@material/feature-targeting":"11.0.0-canary.f2658381b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f2658381b.0_1613601969465_0.305178480743713","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/banner","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.97c4d4035.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97e0096bfa750517ec75b7646fa2300ff9d1f541","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.97c4d4035.0.tgz","fileCount":41,"integrity":"sha512-5pZCKoHNrGvhno2J9JhoajP2tvagnuzq1562iNQ6SxnPGMYCRtSl7Rwz3PH7chu0uKS6K6yv1IlQz0eBvlbJaw==","signatures":[{"sig":"MEUCIQCyfHUcu3QMsGQ+ygL7w9TdpMw822njNLvRRk4+qFqmpAIgR8kYd/+kIgrXTNQyVSilgRtqx+Y8uSbNJ5ed/JdMkzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdKmCRA9TVsSAnZWagAAi4EP/j303dAXp/kRBPYZPSFg\nPYz5laFs+Ap9Jm9zrXwK2cDvjzvN6Z95up7VC2VGIz3+9Rv2WQwYQ+qn3ETH\ny28p2ajnJ+2Lf+OTMhyCqpFn0yJZ39lglbn9lhLjbvgCzQfcqgU+OqNK8BUY\n9TLW/7H9fGhB265vdiFCBGpvjfiivx7lrkAAiZugkPff8UrLxFQWmGQdImE4\ntwT48xTDJKONdJHg5QXq/ZtykhXhhdw55FonfyPotcZuifnNGRGBySNoaSXw\n714OdJCLnEWD/mnmR7EgkPiKRvwf5q0Ww6tFFVWgVh/8lwIwjA3s7xxAsJjN\naeVQ0nfFIvJPCnW73iUM0MfyrmFaTHnyK0Vc2BNmPeyM8uazI4vjOTHRmfY9\n8A5JPXPIBL2rA5+4qJ3d8wjOwEHMbClL0p4fr01unh9AOE6uThpOjOMyyLyV\nWwxQ/v1y1oZpsbOAvyJQ4oJGrwpEOm5RuN0JlsGxnlRiE/h0FqBgnpXZXA4h\nWb8u3duAZLFrrw1XgN6jcej1fkcgQNKcFrO58zpYliLkSwPJedajgQvN8dh4\nJJ8Xjg18oFgPYohcl/BZERDKEdEGNdnPHs7Mu36dSxYtkcky7AWariXe8eYW\nDFmhLo3q6juZ2sEXmXiH3Sf3BKPhGn6sOvudPM6PckRQR3ad+zzPPz6kfv+F\n5iK0\r\n=vYIe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d9a223ae17277dc00b76dbbc4263232d38e50c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/rtl":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/shape":"11.0.0-canary.97c4d4035.0","@material/theme":"11.0.0-canary.97c4d4035.0","@material/button":"11.0.0-canary.97c4d4035.0","@material/ripple":"11.0.0-canary.97c4d4035.0","@material/typography":"11.0.0-canary.97c4d4035.0","@material/feature-targeting":"11.0.0-canary.97c4d4035.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.97c4d4035.0_1613615782221_0.37873814574108255","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/banner","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f5bb4648c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76c4c17aad369fec13c3f43c43466ae93be01a9c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f5bb4648c.0.tgz","fileCount":41,"integrity":"sha512-5jkjU55hv2aawLfrGrZoNoJJTOwVyLcPQF+3kz+tkBKI7qRwPnGE8FsX3foiL53QlUpl8t8pXfD5NthNo/t6Ew==","signatures":[{"sig":"MEYCIQC8Ahp+lNs4Vdu+WDdMeMGKaNwDFMkWXbI0ymjrIVPTuAIhAI3rmb/xGqeNWxtK/nJ0YGsm0yW7EtRg4lzC0yHjsOvu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpChCRA9TVsSAnZWagAARLoQAKDCYuqTAOoaOq4rbmlN\nR18xQdVu5vLqDVLtq447XWsrdtizpXdctzZpofXlP9r8AJ51ERAS+PDuPq6A\nt9hmZr7K3Kpo7YmhZQjlacl78zOmOmGTSe38vJcqUqCkPvE9KuL4nUwhWB7i\nJp9bYe9GSDbtYq6voqSUCy6jE9BCPfoj0g1T3SaaxM0FjDJY/IqOqQ8i8Lvp\nRNlBSinqRjRmeZVVbxYz5FHE3HFRc9S/CkfJsKtaM2fFRCVkSIza+iBCpT3y\nQ7uSrS6ureUSl1ltqTXX3VDcA+K/mgdLWKTvli9/owAjQraYz8gZRJEaJ1Cv\n0OSX2PmcTDaQtzMOZGVBpZY/Jy8DtfgOqkXTStN+d+6jLFSmEw+NnK4VMbT+\nrbuEeg6eqbf1whq8TKZGozYkDxfk18Fx1fPRLYBWbMxRCF/ANKXVezzpwus1\ncN3y+9G/9A4YE1zdXiNwof7QHVZR9YqAz/bkZrKSfqhKrqWQ9JZ5/31wO5nx\n22rA7+BVPpIxjDWN/3SxYUjyeexL+HTcV/Be/3g6oOEStIppg3gfOKVvW6gw\nbUxhztxiey+0YB2Lyn6V3o5shsnORGWUDS9g2IDcok9brO6pgzFDYZKO/alC\nq94Wf8gsqGCzJbC9a3k1t5re4O2RJfMhhGZHF3FW8elJHufQXNGGJRkDBm4z\n6Bbs\r\n=urQK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3abc3c2f94ce48fd3a6cc689419e03b8f7769ce0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/rtl":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/shape":"11.0.0-canary.f5bb4648c.0","@material/theme":"11.0.0-canary.f5bb4648c.0","@material/button":"11.0.0-canary.f5bb4648c.0","@material/ripple":"11.0.0-canary.f5bb4648c.0","@material/typography":"11.0.0-canary.f5bb4648c.0","@material/feature-targeting":"11.0.0-canary.f5bb4648c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f5bb4648c.0_1613664416958_0.514996144372863","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/banner","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.302c7a960.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e6f071c5914b3c996f96dc449936af42e126d40","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.302c7a960.0.tgz","fileCount":41,"integrity":"sha512-q3sIySR9EyhMEOW4fnWmiGJhPdjD/3pHyiQC48jtKHj+ioChIAywyWHBSKbjxcWVADFIgrkCPD2c1tXTukTYYg==","signatures":[{"sig":"MEUCIF3OKXwP0LbQ/eRgO5DCfokkfDtyMEX5kqZN9ALy9I/oAiEAmCYrvZUvWTJ6lEIm0QxctSKV4hiGzn92LJlUuMzVCxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrRrCRA9TVsSAnZWagAAKS8P/RNw1caorbUeSajempre\n54MVuyUTuObdCwxDx7JaDrdMnpIR80n9mW3m2lH6qnFZvBuAqpnJjAGRucio\na72XhTi3wVFDobQxb3W3xP3IYMuObi/V3kOd2VKcjZHKXeEY0TUqxjIlK62V\nUOIjX7BDo5FBWti/oJHsEU+yNCw02myoK2x0YR9H1o69aEDQaUtxIw+bFiUa\nefMyz9QRp8As5KhU/pVJHn2yeqZk35X70cCv0aBqDPBsMjg6ZJKot4Xv4YGh\nPluza/4uewCiO8W76NiosbRwI+zx4qQNRXjbi1UDWcJyC6xTX/fLnFVInnco\ntw2CKylTD5Ouap+9vV0za5oyaECYoICpx4KJAjzMgSWI/z1WjaeSNBqe1fny\naqjOylIDJQrxSuv4AfJNfG7Jw/x8FJadwxicpV3HyFkNwRa4sefkbuVT2wZ6\nV8C4SubLlQQuAG7zooG/ExTMijNlQYoym7+fW+uqJdruqysXzh3RfR7+2m+Z\n3dwnPEjgkfgWc2YGwO8vysQkjiPuUMXzxE9rjjjBhVZmUtGN/1TLVYXDo05B\niaWChP1eDAegJLl6XS3TsFy1lkJ/SwNIlGY1tJH6JPL3SoQLHLE0rJMVg9ky\nEuJUFQDkW2TNxY1/B+L/bhXOWkzyA7TXq4BohBAWzWcjdZR/6zOGM0lRajme\nbnvJ\r\n=rX93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b16c4cf1d0826970ff04a72b663f1838cf8c37d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/rtl":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/shape":"11.0.0-canary.302c7a960.0","@material/theme":"11.0.0-canary.302c7a960.0","@material/button":"11.0.0-canary.302c7a960.0","@material/ripple":"11.0.0-canary.302c7a960.0","@material/typography":"11.0.0-canary.302c7a960.0","@material/feature-targeting":"11.0.0-canary.302c7a960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.302c7a960.0_1613673578548_0.04770641054686675","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/banner","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.aa0aaf026.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64da3928e3c98cd25ca29f249fb69b8bff044fd6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.aa0aaf026.0.tgz","fileCount":41,"integrity":"sha512-gXLWhAutUJqEgxWWpiyk24se/d2EZ7alTXOsBvKez/QB8Ex2H+AxD3kbU5lifh60kkBw9fW87hjjvyvL9Kmypw==","signatures":[{"sig":"MEQCICfZNEajUs95O5gMi8bLGY6QcDDzyo5HoAHy/w85N0CSAiBvh3JnrwAqM2yCIkxLlyBVI4qZpj/xZCVRioC27muqAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":438954,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr8ACRA9TVsSAnZWagAAnecP/ieUnhvg1XGQD1o7DPVT\n6TA06dcaE/vZ3Gd5PLuU/4NQJM9ybZqZla2skGoUZv73kQIMG8OO7aSLomrG\n6oj+UG+L49ZrAL7Q3gXpNzA78O+cFypYhJBytynxGNvKod0v5U3dVT2/SfYQ\nZ+AFMS6xl2ARlxGp+FWO5HrdeZkR4up98g55in2OWkdsUCz/RhdVbs9efWEI\nBSKsoMOwfIIPT3wJdQrxhNudaM+ryZrdbAr2Ipbyzique8qn1f6TQYE23bBY\noRREuufE3dycPkU6iuWtZ2qpYmC8f88XNd4cvYOmj3S7JW5gWekEuDvFihMb\nz+bSAcRSKtHrbJPONUWvjvIyOD3uQN8KQDqd7oMZ0G1vYbTc2T9FipAwOvv3\njMs0z9T89rKE9jhulrOrkSX651sEhKkYG6W99owa8VCpgGCdRqq0SB05ZkDZ\nFOVZtCSjI1AnluFufNmkQGatoGUvQfpMp5U/n8sxpJTkmKrV+LTbZZ2qCTZ5\nt+QxrXZKPz3sxonOgmF8T1XDp9TTupq48tC2/gP77jbwCoOemRKICSFyRQXk\nyifr+853rfpiPvv1y6yzDy3yvWtTsnMYU/OUwDKQTERFXNHw9x74K6JKGtpz\n7a3ja211Ouds76prf2YLMK+RaTncqTQSqw/duiFKdK9jhtdQ2EdhTppff3Ev\nSkrT\r\n=gGvj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"de542de1d7c4c8f5f51199fe207ef527fc1265fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/rtl":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/shape":"11.0.0-canary.aa0aaf026.0","@material/theme":"11.0.0-canary.aa0aaf026.0","@material/button":"11.0.0-canary.aa0aaf026.0","@material/ripple":"11.0.0-canary.aa0aaf026.0","@material/typography":"11.0.0-canary.aa0aaf026.0","@material/feature-targeting":"11.0.0-canary.aa0aaf026.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.aa0aaf026.0_1613676288184_0.3727370047926979","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/banner","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.07ff0c452.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45e88a492c79072e85a2a1b7eddfc084cf304f0c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.07ff0c452.0.tgz","fileCount":41,"integrity":"sha512-N/NjzvFKu1B/0CA6NARmN6HJ9u7hbt/YmSYkChX9A4oggFyyNjN1dWTiTrwGa1DiN+exP8ugm3oWPlL0sStz0A==","signatures":[{"sig":"MEUCIDUSwwBzmJIoToSR7yP/OObpdGc9bOc03cKUuGHUax6BAiEAgpfebexEbjBLEH5wDfUn7EdyRSz6rSJC5yJVHqdT5hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442058,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsOICRA9TVsSAnZWagAAR00P/3b0FdJ5uHh2frmvhaTx\nvuDkLvQuoZtlMRzoxMH8DFww4klHdkKA4ivTFNnO75lx8Yn0eklSzlIjxsKR\nBS3RwrLnm1Sdyau9pH9rdvTuuBpzeSUU5Ni5hZsFPaMWZhXWGMbOSXFZdGCr\nhkx7OlcP3J0qfyc1NjqUhO3e6YsuLV0fvHsXElynE1BihukB5/SghRDCVSBR\ns+Wq6y6oN5R6acG/zZ/QzKyNw9r021k2R+BNqmvmDjWznpn5xEChevUiMZ0z\nbzYZtwsZFxGF6ojNbxHg+J0ua154/UR6xvA4ETaFFsE+vi9YgaoxyRoF7++l\nyk2azFqOEc0en9O1XSdD5rnEsqjPQIa+dVzzcGLxmncgQ5ZPJyyC9Z+Gi+lX\nQiAxwA1R6QpsQC8O4xHddNiXzXFo1KULZTOly07VYEdTKYuweWBfvvd9wa+/\nh3INWXNBIuNQW5QC0C3z9U0jbKhYp35032lVRjDnMESqfB57QKq53mQWO/do\nzD62epta5Yg/7anJThuZmb4nVN4rb4TDElcsd+y2pV2vwY2+H2gpdiph7jO0\nuVEJaKl0I04p7pQjEz3Rznbl3iAMQx6DUdFCKjnE29XpeVqzGbJ8cdWHFFYo\n/fW6pSmI25sc0fR2veE+tpsY8NjYFjbfkVfArI5u4sOnm2wGbGQFMLjQrpCl\nn/TF\r\n=Ci4o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"52e3f1cc8fd4568a48ba4314f982d5613f53ef5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/rtl":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/shape":"11.0.0-canary.07ff0c452.0","@material/theme":"11.0.0-canary.07ff0c452.0","@material/button":"11.0.0-canary.07ff0c452.0","@material/ripple":"11.0.0-canary.07ff0c452.0","@material/typography":"11.0.0-canary.07ff0c452.0","@material/feature-targeting":"11.0.0-canary.07ff0c452.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.07ff0c452.0_1613677448207_0.1857498793928214","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/banner","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.bed7ecd3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8de63050bf652b62d3f01682df7a7c660812990f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":41,"integrity":"sha512-xu465VoaU9ISwhn0pF1UJUw0tAda4xTLqW1AgckpTRHN/bpd7qgk3VZCZMhajnemCVFy1FzouYbJM+vR6vrLnw==","signatures":[{"sig":"MEUCIQCIepbyaviFV5IOEEIgSJ+hdIa5lOb0fZemF2uY1rTxRAIgYB0P6IAxya+Z6jxboYYa93/DKd22XQejfZAIxyvshfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgzCRA9TVsSAnZWagAAzBcQAJIrQjmRZ1+eN1frlGko\nJvkevJAru43VRzAaN7CsK4LyF+rs0igbbq93ClVbgWxE8GErVZHusl2BE2oP\n/5uxo8EJFO7CxcyGJcjhdLqFVje29ggNrlG7B6KbGSbBPuFti+H8ae4736mq\nF1PYTFxW3rQRG83IqcfaII123F/jMmsrQIoiy35CDJ7+S/mGIXL0osJX5W/C\nBOiXFcKiZ+LCQ98Os7moFMwAKPapxDCSLQwV19aPZl4ws22IPk370URpV0Lw\noaoRC8vsSjNZgHoJ3Rxtc69/2XK/NdHe63WiYg4pfkUwumiRaDUlQrfdct4r\n40Ko+phCPsN0KF6r2/UVIh5E3/VOogFJlu9ytWaInJsL8txxmQZh5RN2Fy8A\n78OQLZTkzpXkOOnnxszQ5m7sycfkzspr3vAJtWVSqt4ou7Q0CIYlY9iww8hv\nVXXKPLp6R6qV+q+dhdMwfTB7JfUKiesInZToqqyiO4xyc+uB9lbHh3pM69Q9\ndOZGiRK8MG9CmrISBuM/o5K5cbjTW+HmvU/gqfLH27m7TjmOiWA6IeortU2m\nOdG+sv3PjEQ0K/th6ScG1VmtaO6QMZryA2i6G4ODkUYHflqLTnk0xObgw/lw\nLLhw4qRV1YsJyUGGfB6MD81EMQOf/DgBwqxavgRaEk/MCYTg8kYo2WitiyQ8\nfbMa\r\n=E8CO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c23b9ab547a5ebb36a108742217a017fed1886a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/rtl":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/shape":"11.0.0-canary.bed7ecd3e.0","@material/theme":"11.0.0-canary.bed7ecd3e.0","@material/button":"11.0.0-canary.bed7ecd3e.0","@material/ripple":"11.0.0-canary.bed7ecd3e.0","@material/typography":"11.0.0-canary.bed7ecd3e.0","@material/feature-targeting":"11.0.0-canary.bed7ecd3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.bed7ecd3e.0_1613690930938_0.45796144653545556","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/banner","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.06dead2d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7971671f6abe26ed38c5a7d6ee2e6e4abb13d440","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.06dead2d6.0.tgz","fileCount":41,"integrity":"sha512-2bllUCsUveaQyphUOs/xTi1H4jZG0RcUndyRaadKoZYwaHDWDIkswV0bU0P5cA6w1WlzgPpOK19O9h2v9oVL8g==","signatures":[{"sig":"MEQCID8KcgTAKkkB03PPma08XHRWxROQxgMnZGK4Swwi/MlGAiBFqZTs5CwDtNf25J6V3EmoLKk/st2EJBHuPoJKFa8jww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwh7CRA9TVsSAnZWagAAAyUP/j98+RmGOyRBW/NKzCWJ\naV1B2LTjxDr4Ao097gmz90U8UnBlT7T6Lft0m9X6kusqecahC2uD/rFhI+vZ\nHLVFklwK76OD+8VkO6Ao94nvF40KTPz69yrm6NqGSMi+FtbM31X2Ay7fRSWX\nqCSWuZ2F9cW+DjxU6ME7AQKdY5VQ3u+80NomM+wxBETt0CbHEUbZS8v5iVWF\nUUjKTgdwy4fWIvlZrZ5JoWacABylqkafpT/zHPzTIrxxGoZlz8pOPGE8IzNT\n0fsyH2gqTl2usfZItzBcDrRFr3XvKzctrVuKHc7j5MDzc7hVtFSZUoMgAak9\nI7xmHaQ5BVdpBpHeU/yevGDDQprG+4mw+HVBeYFVyoPfb+somkytznC7BdOJ\nO8j/9rZ5Wj/iCUEuvWJmG1zWVRKk/ERjW1qVMoXm9SgRCLf0SLrUW/bHPV9g\nEJ42N1oikYHCu0YQELS+GteE3j+BrJt4AUuOClRD5Qi03yZLbCPuTpWq3KLX\nd6QhwF2pVUBC4x0+VgY66nhJLOPHSDd5qbKTQ95fpmdor8WJ+gHW64JN2mlp\nPsGhW8OLNxAfSjDHMr4sg3nxZCrsLp11XNWdXGa/ioP/R/ULxYZFwBLWuofe\n+9pdvghKNQSAXODsZxfrCk6pO0ZGsSwv9OmEzmFHGPZMZCmaxmY3d+zVLLQt\npVcL\r\n=VE25\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7458ca9f14be94c1a279bd594f262289d278bd39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/rtl":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/shape":"11.0.0-canary.06dead2d6.0","@material/theme":"11.0.0-canary.06dead2d6.0","@material/button":"11.0.0-canary.06dead2d6.0","@material/ripple":"11.0.0-canary.06dead2d6.0","@material/typography":"11.0.0-canary.06dead2d6.0","@material/feature-targeting":"11.0.0-canary.06dead2d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.06dead2d6.0_1613695099124_0.17199431539480758","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/banner","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.cddb03553.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"acaf5baf524e9b5eb631c218a938b4c8a54f138d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.cddb03553.0.tgz","fileCount":41,"integrity":"sha512-1Uocl+OCNBhnnKig4cbuTCfL1KX+PYGu6KelcpO6ZC3l+n2ZGDU4LzpciNH5kfwZxU2uRZulD6wqPG+znmzjyg==","signatures":[{"sig":"MEYCIQCbNGvKOybbEPhDR2Pordgn+YZdlY0+VbZs5QCJfp7ZxwIhANd9gj84aFnRNPk6+F/7Z+TsPFrXeQ12f16/YD4lacjl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy0QCRA9TVsSAnZWagAAgbgQAKTrObWEssgpa2QGcxuN\ngy6YUjbTyd6IAumfG3ADXGpTcZRBuUy4wUJLlfHEyuFLjyYiaTad3e3vXzCQ\nF7AAl1waKOi60Imx8w7OjLoLf52D5pu/a2FKdwW9E1mS6n0DkE3RhVJnmhS5\nKTf0aBqNr7N3Vv2i/cdKBbABVU73gWmvTtDsvC6lCDcOTNcebL/WvY+Kt+6g\nGLookK5RKK1mDZFGBWfXG0zKrLLjFcaIUikmfqUukIYkiI44qtBjk3te786R\nlZ5RbhtziYaPTUn3MOauu+OCR8T0wVqsOkUTnX0fR0mzuurF9TKEfsFTVFF0\n5WSL0d/lyiwLZ6IHO3iz6l4ohDnA6aBV8Die+oyp8+U5zG1RZB5hzZcWu63P\n3l/yhPjm3TJoUzswEQhu9yE7yUGfp44ldoIwVOby6Rn2n8J7CdqMKHNQozcQ\nlnSp/ExaThxrLtduTZXEYGsfJqomfhhPjCIGVMYXr8rbKzvcMaFbxjRLZSPw\nlr8gl6D7woBiw35CXwldMYyBg4AYTiwItxJM7rxjkNLlOSasW0uajcAu24wZ\neP0KrfgOQHPqYbsmzdrf8pkGFFrgHFvmV8MxOf2YHLIj/hiuSL5FRHttxGJK\nLJcieG6Vh5Pyss8lAUQ8Ui/nrUE3jk+LnPyEbjEYRovt2rub5uSY9QuKcG/y\nS3mc\r\n=OJO3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a8deff13e5978e42ae51f60c844f7ca0abf64b45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/rtl":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/shape":"11.0.0-canary.cddb03553.0","@material/theme":"11.0.0-canary.cddb03553.0","@material/button":"11.0.0-canary.cddb03553.0","@material/ripple":"11.0.0-canary.cddb03553.0","@material/typography":"11.0.0-canary.cddb03553.0","@material/feature-targeting":"11.0.0-canary.cddb03553.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.cddb03553.0_1613704463909_0.24244705018755397","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/banner","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.d6d8d0476.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84fe2c942eb2b5a59546fe1fc1b7ca80665d22f5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.d6d8d0476.0.tgz","fileCount":41,"integrity":"sha512-+bG672QsBa5cknTE4vlDdmjrEgFldfMUFfqp6mUkIzJxRUTLRVPOtVuR6gohJDFx/3DbrrXMH60PdMU82s+8vg==","signatures":[{"sig":"MEUCIC1uds9wPNa7yMX2WN16GgVcRR+ZdHoaOSC8d/bjstV1AiEAz6j/i+cLwwK5HqzLY06seyaxl/NLgJ4EC+YBoqYj5eM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL063CRA9TVsSAnZWagAARdgP/RtYrTeSKyQ15y1dYtWS\n88OggzsVEARE4++Sr8I3pnO49Ozjm+8FL8rwGabxXBj19ozI0c5EbL/qXLdO\nzKw3CCcvJOV1wDrTqRczG7u8MSrxQLI/MiBMSFAPl4GRQS7ZcW/zdk+GzFhd\nyTUy76CjWKu/Ar3dYIrDghDoJOGurGpY3ooTVKwa1u4VZA8m8qgBwdPryboE\nhBx+cfM8GCpFJn1m4c1o4BFDC//sHBmJ41/b7AN7bNlb1J90DHe0LAh4Veg9\nRRn72tTNQ8OQl9nVNtEtatZ+1eaqO1L2o2SmRQ13R/MPuor6Sj/8M+BlAAXz\nwUOPKfGy3KmNtV+gPT1mtz/ObBnncsW+F/2faFq4PHjTjmVrEXIGej6vUS2c\nG9jmxyMFAVOZQQGtsSzE9D2rannrr910Fnf1Wjx3EIMe+2GZpeYlA3jv3BCd\nMexWJlxoH8F3AGfI8xTIi5V0PC98cx5Btb+wiEFjW2co91Mwq4Zr+i04mZNV\nKvVvlv27I+BUbmx7zLek2joGh20hLuQzWOGV/EqHgiBu6PRw5udCA0b4877J\nCEG4GilL6V6KxoqXSTwXfE01ctxd6UnO0q6xOYX/hSv5/0b0prOGD0OmpLhB\nHTvn2jFKmOxcyuR7ZiaQJoA8e1i+JsiDRo45oqp3ocl8LosQwnllsQ4X/rqc\nr9ve\r\n=CKR0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"17aa6317e2c1a8109a8bae34e962d438f170f811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/rtl":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/shape":"11.0.0-canary.d6d8d0476.0","@material/theme":"11.0.0-canary.d6d8d0476.0","@material/button":"11.0.0-canary.d6d8d0476.0","@material/ripple":"11.0.0-canary.d6d8d0476.0","@material/typography":"11.0.0-canary.d6d8d0476.0","@material/feature-targeting":"11.0.0-canary.d6d8d0476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.d6d8d0476.0_1613713079275_0.751665114342899","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/banner","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0b4a4b2eb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6be62e26c1c36072b1ec3dfa9c13ff871e485f48","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":41,"integrity":"sha512-vsltrb/iADmMmcQHVOnrfM5Z/OLhNPkMK0P/Rp56Np3fSZTKtzevGj7pltKcIhZ3OIQa7u0iP+v9b5JdNv751A==","signatures":[{"sig":"MEYCIQCPM1JEeorwa0SIJuGC2g4ZnJfD0bbjvDXUhlfiK0583gIhAMNcew+Q5N4dU8fpbSmAc2CK8/spefCpzZXNVl0VQoJA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL92BCRA9TVsSAnZWagAA6w8QAIl6YzRMyUag/V34RUdw\nLmPbQ+/Juy6u7GIdk1Ngkb7pCpYqnrN4Z8cd9gEiU7jJGBdJniQEdT3JARXa\nRywJ1/oHo4y2EuFCGkT7rQL9qtTBOXKyeb2twMWMi8sfWnQ/I8Ta/wyrWRkT\np8mnm0pdoK7wh4q9gQ2rMg6O3D3tlfXFnrVF8itgtnZAjiNBQmmgJG1kjg6O\ngJCYh21ZMBV+/ocFe/kcIoYD0w7TmQBIoOAkOs/VDXr0+5kxOYbuOoMTl0ok\n0g7ip/3l0tFrY6NVXylZvK/tyZg2F35ztFdRPddI3q8Oq53nFRS72fYc2xME\nRkQkpNkBTY7b/LQL4vXOuJ60czK/66ngBOw+OWkV4J1e2E5qVYBuyRlzlX26\n57vJn3X3S5QjuV2oNfT45VSSSqVHi6R5Z6z8kqKImixG504Op8wxJngOkyxD\nCm2h6qL5ObDj9WqghOsWrKE8j93RZSFaD9x8zr8MrKhzVueWqKj1qAQcnc+H\n2VkU8YYzNemk4cq5QPXqwn8/n7n2s39lgZGiF+tNfl1bItI6aDDHJC52cJdX\nXgTrQgUD07rCMH2KZKYKDBRxY7cF8H472UBSe8oo4KTIEFKJu6GUPvktZdPN\nh0IDuKDohLte4Jw5mrMUc8iM1zgNpdDzwjMVhoc+c/M4trpS/CBhwby0gs61\nsiwr\r\n=hHgA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d96f438a60c2d44b9a3f9ec055d1dad78d316e6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/rtl":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/shape":"11.0.0-canary.0b4a4b2eb.0","@material/theme":"11.0.0-canary.0b4a4b2eb.0","@material/button":"11.0.0-canary.0b4a4b2eb.0","@material/ripple":"11.0.0-canary.0b4a4b2eb.0","@material/typography":"11.0.0-canary.0b4a4b2eb.0","@material/feature-targeting":"11.0.0-canary.0b4a4b2eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0b4a4b2eb.0_1613749632524_0.44961381735953054","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/banner","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.3201cae47.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6830a0c9dc8ae5131398c4edcdab7045897cdb9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.3201cae47.0.tgz","fileCount":41,"integrity":"sha512-ZIqpLrwzsXWkkXicaUBiRMzpPJm96WX3dPHz6bBi6kbIxKqCA/y7mK7E3rH+3BRL4nHu7VE80Xd9xIbWpAUCYg==","signatures":[{"sig":"MEUCIQDaN1O+VCP84wVZRFGPU2voVLkirdQyWbrh0q8znZWjlgIgY9bUACodQKMpdp5mVOiFgCiB4A4gNBlFXD8mIPICbgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMENnCRA9TVsSAnZWagAACpkQAIxGSgeOk5wH2dymWpHR\nu0wbyCjQdhexLcfVV211AI7el3sI/7ugQpNjlL39vlwRZrGG3opBqXc3Pwqp\nd2EYxIpaIu3n3L1Ji5YjmUF577Rlc20vGHJu0W+M7pSDrCfYw9SYxFQ9JVwF\n2gdautUcDXv+RAkxy+L4kTrR7zwAqjWuaJkqycNq6QkWvjXQQC+rMSe24BTp\nhEFGQIf55PLAEWPyK6V6y7je0saDPgFaZRuE06qRYCVpDvJrBAPANrf23kq3\n+7HD1U+lAj8NX3bLXkaCyKDOt6fyUDkJ1p9su8FFCUSy/1CBBh0+sArDToSC\n21sIPzszrbxrzx9Nj+WNEoIlUc5i8OfhjFpkM9QGQUu6H0dZsQSKtUbc4xUD\nNRJO2Og65oKW94P9iVH4Ybt9x37AjfxlAP2V0DC4+qe0HXgacKnrXG0GFqiP\nxb+/1SNhz1Z/eWKCcHhTo38389QQjyKWO6uf6i3a61H1DEqNAdr3RWocfptI\nIrsaSrcJJWQqOaxgSLI5ShqLJWAu4IrUlcYqhq5pl9TYd8UGVW7mNckrHYrY\nrgGwxNdc4L/Ojwd/SepUoCkpIRgGyN5tgOdAx3+AdxkHhA7+Az/sCO6DODE8\n2EKAlrUIXvtFkmwKMdyXYgArvmaa5SjbNNm2ozKfFTrlDgHZtIzVWOxPfjr1\nVybz\r\n=wMZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"274d3ca7227bee74ffff3d46ddf3ae266226bca7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/rtl":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/shape":"11.0.0-canary.3201cae47.0","@material/theme":"11.0.0-canary.3201cae47.0","@material/button":"11.0.0-canary.3201cae47.0","@material/ripple":"11.0.0-canary.3201cae47.0","@material/typography":"11.0.0-canary.3201cae47.0","@material/feature-targeting":"11.0.0-canary.3201cae47.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.3201cae47.0_1613775719009_0.24350352763071115","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/banner","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f1b1fd5d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"36c6ac64b95ed511578c777b2bfcd168d4de28f8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":41,"integrity":"sha512-qDc1tn/C9ceriWEclaUz3b+5wFPzgC9LztTmgirus5QWH3shwIuL4jPZFAjJeND+EGLb4kTrz7gnwxD8t58c6g==","signatures":[{"sig":"MEUCIAel+2WSc4tZV26CXlQxAMbEK++rve8ZoaAtHWt2xXGIAiEArOFOXZ+SkPtxrrTGrg88ldl10emUr9f/e4+8RQs2Ps8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAsbCRA9TVsSAnZWagAApRIP/2EB/MOWsJ6JMLne3aXs\nvkywHnBYzxFxipub19iUzo+X80IrzTXWMGVRQrLH6fS/oZ6XJOb52WVKJWMA\naaqYe+F1dgF9TkC4zUBCSLpWoxUW1pxqKLYWE0iQzX6rUuTnNI3uCcGJTsGK\nb35YZAgy2yAfChEUaEqunW0bPPV4Yrs0meat3f7R8la4cfenmasj3u16i4hm\n+zY21h3SqhknMwSrlBV6zWO5dhrwU6whpH7ogVMyS5bgRJeOGjaGC10OZfkB\niEIfWQcFbueKd/SaxXcv8SE0ySD1ItEK+1i9xDyor5Z+a0uHaMHPL4z8IUaC\nOxCxaGXKsvmOl6ZNw/fQExdpLnf5x8I1madoqeFJfXIgWLVnf4o1ZPPISOLa\no/rlRKXX4oEr9jHfPWu7q4xRqTnbDKhrweXkngJ/LymGtubVDGIM2ftW0HuQ\nzYla8RQhLXdHeKrfS95V+zMnFh5B6q6hT7ndNciTju8b/i2UXlyCD13SgOlR\nIy5Asc8As5eoz8ID5xcXPQhiShorcRBfYIC77WPVkY3Xgqx9NXu2jM5zpjIu\nZaeb+nhJzznz6m40+dvWwh6C0O8aUUwEwGP4hLWQW2Gk8K/e7A2FJmprY3cc\npWZs6Y9wAVo9vuu0/mSK1oqWCDhbtcTJ4GXkyvlZNfPccT6kKdZKgNMCsciw\ncQ98\r\n=7UEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b73a5cc3b15b450664de92ee70312cc1e8b17304","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/rtl":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/shape":"11.0.0-canary.f1b1fd5d3.0","@material/theme":"11.0.0-canary.f1b1fd5d3.0","@material/button":"11.0.0-canary.f1b1fd5d3.0","@material/ripple":"11.0.0-canary.f1b1fd5d3.0","@material/typography":"11.0.0-canary.f1b1fd5d3.0","@material/feature-targeting":"11.0.0-canary.f1b1fd5d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f1b1fd5d3.0_1614023450746_0.819234029276515","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/banner","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.7899e0fe0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c279ce4599148a7764a6ee3be5f9da715cc80af4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.7899e0fe0.0.tgz","fileCount":41,"integrity":"sha512-XGaiIW7WfumAdegnJ+vqFhjzPmE9zIbF2EnCRUmK3Xs4Tw+cs9MGmyl91GtV7lgIDJ7R2wp3bKMBsxmx80Atpg==","signatures":[{"sig":"MEQCIFL2Q47YiyZutEjw9/QBhOIVCPQWPmkj9EPnk0ho/uFZAiBrANnimgw3dQKhKTdJNBc2/IM/7GRvPiMm1RwI/cyaiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":442742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRsCRA9TVsSAnZWagAANTgP/jf/SUBr2VO9f0dCnkTi\nfh7nvuown6La9LfN929EhBK1F4BoQgIn4+fgKaRHadbdBItxqdMjfmWsInxf\nKL5hFQ35kNY8YMWeredhMHKv+OgeioL//chebCDkixMx7NwTHTsFVs8WNp9P\nEV6UnplE41I37WpLgvRfbhu94IXT1Biha9kCJAZaHAmAVZRksdOA19r6qGCD\n1/+QXagSIc+is9m+3BY7p1s2+ugvd2diHV0PiYphnIDvdG7JOrYT6bLHGwlA\n3kAbhlYJaKmi0S/TYY8xu+xGVqg2gJLau2vk0ph9mX6dUkx6ZsCzOydPy9cD\np4WTqe7t+n9VA995/++mzQ7S/CCh8s9b8pN/Oju2KKeZ92rGrcnjvGjkLZ8j\nDAqRNFwuU+qoQVRa8D1Za5oZQbglocy+KmmHAY//65E4EkNuIRNQP6H4S6SO\nmWsBDX4yb8X3a2OVWBnO/Bt5DnX0PUltnQ+kHQJDPHMcPFNuD2/hREK4+lGE\nIfx+w+R2BZih+kp+L+IwqDjLrfAOM9zn+vmb3vl048xwcpXLBtvFVr4Vh/tt\npmev8Ph1OjLeHO9cQh7CmFzJFe9bn+27wUQe4kcXRz3jgav2iicPMheVkpjw\n9w3S8X23Yk7mol9U7w3sEQbTIjOVzIsX1iBOhvp1jfKxE2P8piASYP4io57s\n3AF1\r\n=JBA5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"73b260d2233a31311cff76e4c10438913b91c2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/rtl":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/shape":"11.0.0-canary.7899e0fe0.0","@material/theme":"11.0.0-canary.7899e0fe0.0","@material/button":"11.0.0-canary.7899e0fe0.0","@material/ripple":"11.0.0-canary.7899e0fe0.0","@material/typography":"11.0.0-canary.7899e0fe0.0","@material/feature-targeting":"11.0.0-canary.7899e0fe0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.7899e0fe0.0_1614034027536_0.007951514592848374","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/banner","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f19c86d13.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2a69dcf71123501028711fe3e495a68024cbfd3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f19c86d13.0.tgz","fileCount":41,"integrity":"sha512-HjHHUjI42rtzUMrIMSQ85V/b+3lwnIWhy2QN+LSsrd4PAHXeZgomDKuwHlnwGwIClULqpDuVtt30tyZOE50Q+w==","signatures":[{"sig":"MEUCIQDTEYhyWkSttwZFTWNTZonBs6lsVAbh4CTkfFpLKtUpJgIgYqEtkzHd5sUaFxsxPqDMOnzQqyNbrhfsY4JKn3g+AGE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7rCRA9TVsSAnZWagAApKQP/36SaPckIBvJoO/104wN\n1AszRzFGT67qBealXKNOVNkxnC1Tz58U3IYvcAW6OaRc+Dnn6DddBjHO+yCx\nyYD/AucmVe8iDCJgjsI2NJTglg6brlNIHuy3cLOsdWzpQDPWc7tn8Wc6UdId\nwkTXsFETPxtPxs/1t/+wqk4Z54tNX4CG2OtTYvWBP69kjr6f8K6wYEylBWfp\naK87iAIOtdxSnUz7HQ2f+/bd+MU8x/OJD9tEoGe2QGVdcTi7iNHd0Kq+eGin\nfw86609VXqEARs8aGzqCVDPiEyIlL6APcRfjl097OjvVpZ7JYBVNzp0T2Muj\nuGhaRjpl9U/PNViwP1I+YXkrpDOQ+Wo8M2uFkLNe0X+hLLD0mdEDJJKJ2dHR\niw6ZCmL9V/A/fNmh91+jCD3CzqmBZazl9y0ZXibn+j9SkE41qH3RbPvnkKwy\n5/MVa+lbR+2t7kixJZdgsd4hz+ESF7JdR35yRetd0uLpRHRNLk2+5eerRm4o\ngkPQnvuycCl2/3cv1fp+54X2rv+R9VNGu36J1hymLtCFzvT48PdN87h0icqq\npRKV1NX/wnpmDZTbFHzXNNBeL7pEYl6pyujpssz46D/7Rb7lk0GNXv1Xlk1M\n4Sfly22odtAxJorvSWedTQN0/AoI+qqcmJcRS5v/JwdZTlcDjm/txm1NmIQZ\ntroP\r\n=BX/p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a4b2b851fa6f3895a9e915d4bdc5b6b6715a4260","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/rtl":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/shape":"11.0.0-canary.f19c86d13.0","@material/theme":"11.0.0-canary.f19c86d13.0","@material/button":"11.0.0-canary.f19c86d13.0","@material/ripple":"11.0.0-canary.f19c86d13.0","@material/typography":"11.0.0-canary.f19c86d13.0","@material/feature-targeting":"11.0.0-canary.f19c86d13.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f19c86d13.0_1614036715302_0.29552248461379715","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/banner","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.60e892d79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38d015f84efd75433c1a4446721c200bbb1d6625","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.60e892d79.0.tgz","fileCount":41,"integrity":"sha512-5jJS3u+8VObZOtIejEHAwuN4mj4De8T5QMn1egZIVLa72lWOaEDZ0ktt6iOeOVS2lBtpqVGssqQlOCHsKKL1jw==","signatures":[{"sig":"MEYCIQDqkhBsfp2XIv5lQ7S0aJNcyIpzGcirjmX1zAOri9LtzAIhAMxh+Loxrcks34/iAVs1eXRPejB9cmbgvpUaaJgXLkKk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFc0CRA9TVsSAnZWagAAXKUP/093OkPZXGG8yVsglWFG\nrkM9lpHsc/q2qAROt/zh6z5UvrjJrS82TeHUaxc+5KXQTF1h6/Jl+hA0yKPn\nkZzU8yISLj12UmprHkc59wB23Gz3sAzCQ3g7UI0Q/8dxYKP4up+0wSndAmC0\n22GuwYrRzC0kefS5Hx17o5Pb1Oo4THuwzH5ek17usaOvcZiVLwwd1NCeA4QS\n8nKBGQANeenjrKfHOHmhECXB83uTenzkvOlcU1xEp8WQ6S8ggA0tReGEzUG4\npCeP0jQiW9K7HE06JCwyfW0DHUoEsWia87KWVsJE/tuy4xlVZ7ivtXIbRcPh\njayxrg78Z1nFmG9pY7vVU35HcALBzufuIhOr785GxXtfct33oB1+9iA0UFkU\nqggWrobmF0LCu7lCnY4qbYJG0YDCZ8q5MOykoiPxSwDW8h6f0v8kv6PhAehQ\nOrvjlDZOBUIqeta0nqGgdmEFM7ERaVtUbBVdYK7jtaYhih29PV3HTzdqyNu2\nQVwgFoVHitw2ABBdczD5SFNv1lqnStAU9ugcp1PAVbQn9+i42nWiB0fXu8M4\nceZzJaY1FojG1Pekfo0g/3+tIce1S53OMDpFGYaiwxHDSLz/GPdgVICYTRss\nC7D2TJ6muh1MnGK7dffHRoeuKM/iao9lq2bANirPErnWkb8ktENFg1r6eoEo\nlFd+\r\n=Ad38\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c94f9f392484897a962a9b7101ddc6d70e5df67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/rtl":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/shape":"11.0.0-canary.60e892d79.0","@material/theme":"11.0.0-canary.60e892d79.0","@material/button":"11.0.0-canary.60e892d79.0","@material/ripple":"11.0.0-canary.60e892d79.0","@material/typography":"11.0.0-canary.60e892d79.0","@material/feature-targeting":"11.0.0-canary.60e892d79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.60e892d79.0_1614042931996_0.7785212213832235","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/banner","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.c96bfa495.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b93f0c0241c9f15c2c78aaeaea2ecee6941ded26","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.c96bfa495.0.tgz","fileCount":41,"integrity":"sha512-rl7YWRKU0ZYp0PqUe4XI34/gBL6Qz1pWAXOMN4xy04KuhHH7Bm5DoDsii/O/+CwTiTX4bse/y0YTUvKfLHQYLQ==","signatures":[{"sig":"MEQCIDh7IYQ+J0UZ+lYT6a3C298FFx6PWSumIK5zF7K76xeqAiAy+e4uPk/fIv8kuL1vn7Mczkd5RYjSxhHB2Vgv+3BG0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjJCRA9TVsSAnZWagAArpUP/j6pyAyKRyhVHyuAfI0c\n2cop18jeVKbTggUfxXPN/YUjPQb2JPTilhgPTTpPmko3EZpAnOa8lobgeoAI\nRmct2KtHT4zRnRoIh2Manvyzs9X6suLL1YBwYeD6R5xjCwoYDGU1EiJwSHFM\nH7BPib4m/mpMjxXiUSbItIbPjHkopa1w+M9PynaP/o3yuPzirCTfIKKJyt6k\nnIqPcz0ock3ygGBmlJWmbPbDfdWsXCn3gWLX72xoFjFAaA6a4VkYcq39kP7z\n+BeNJ6+OF2905ps9dWWXKSQDyupfpex+/lLbfk2uKCGIuYfrNb3dq18B5jXw\nMnfM/s6pcTJ5sV1PWG/K0Ya2Qx291TlzDM+901Y1eRQRcpKZbQK8TVQOnc3C\nNb/os32Zo8jD5QtpFgT3wdG6QDoigZKUflMnpWSjLvZHpsynjx1eDZowWZkV\nKFxtpMoDRYsMF5Cq08tRkzC5SD1s6FHeo40K6CAMZAvSCJV5LtJaHwLw68CC\nWrMVWWFI2MZyL9J0oDU1nHLUWwG/gP6R5NRxSm56jAyQfyl/aDGSuPEZbxpY\ngdo690TWyk1rtzWWv3LcYHypAy3MzhwZW9kQ9BshqAaNuPjq+Fsm9r9fOAzQ\nRDoY4GEdsOl+i3Jwu1YwgxqE2BWlOx+GZCDsN/0ahN/saDhwM9jnZI2JaCqS\nbzZv\r\n=EaPI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1fd35f98370bc606c6677b7045a8acf16c0ea7a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/rtl":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/shape":"11.0.0-canary.c96bfa495.0","@material/theme":"11.0.0-canary.c96bfa495.0","@material/button":"11.0.0-canary.c96bfa495.0","@material/ripple":"11.0.0-canary.c96bfa495.0","@material/typography":"11.0.0-canary.c96bfa495.0","@material/feature-targeting":"11.0.0-canary.c96bfa495.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.c96bfa495.0_1614108872982_0.22475861991129564","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/banner","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.fa9b59f67.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed0489c39c161a31d28f5c806acfe32580bc7b46","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.fa9b59f67.0.tgz","fileCount":41,"integrity":"sha512-0UAm1xJKcSodZ4FZ1MZme0xqls2fcBDUYOj5GkF4R3CerTzshISz0kbxQ0bhJReZLQCDWyZtJ/AgX3tTKQyWdg==","signatures":[{"sig":"MEQCIFcGx5Y5ZsnJjW/8UdosxUEz5B0NJd/sravlcwfaj/UwAiBpNpyw6RGp06CLYf2rxvG06Kl5cLetLz6luVv0RozYaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVkVCRA9TVsSAnZWagAAhAIQAI57dGMYFhXG+zDzMlhX\nZ/dGzFM1JVVP5pJ1jNA/1fNMEhPg+LTSeBx7b4H+PSfOui4t8STLICkgE/n7\nvjBMF4bSGk/0kspO+wFu5SWb7kd7E4jgdoch33EcONOb6KQ349VGK0RjiSxy\nwy1mn0SUfJjxVGb9jVsB5d0xZpv1gfkIdBWABDvF3q3iJgaE4FwaTHQjsh+l\n9S8NUm9Fj/0lVLVsYs4uGEz54LrrxRIcxlbJtPJGappQXGoTG3mSKRz6I+G4\n2gzkDLnMBfPKBqLWa2GniXL/cH9CeoQEqaebcO6yMbrrmNWaVNasncP+UYSc\nwB5uZPiXFBnbU6W3ObMlUh+cTQzEkVtXG+ntzw1n1mHKjRIRhaFWW0pTsMyG\nXfZ2N7AJ6JFLRXoJuTJXLgq2TOg/O8iJrYbQAFP2VUSLLGXE2pPqR+4M4Xfc\n6+8Qq8IJq43ELC4v7IZPSXG8jkE0NdK1QW9lrEJcK3mcnXxRnVmgyBMi/c0U\nZGd2UN4gO4o3HVuuQ03GnxTnWv0s8aBJmVm4JRUrUbVAu6CNMJYHwu4w7DlO\nzztbj4p4sgAAP+PbjOasCTuQBRzVLXrATUHHPBHUpE5X2Bazozs8X2EIk7HE\nEHAK7RzwlSMOgxEEB7ivvxHWKDD2rcqRYgV67WtEjiqxinArnNrlkx3Sgt1Z\nPvHh\r\n=yI1B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5fd97ca8b5906f3b3097bd333237976e3e93d192","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/rtl":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/shape":"11.0.0-canary.fa9b59f67.0","@material/theme":"11.0.0-canary.fa9b59f67.0","@material/button":"11.0.0-canary.fa9b59f67.0","@material/ripple":"11.0.0-canary.fa9b59f67.0","@material/typography":"11.0.0-canary.fa9b59f67.0","@material/feature-targeting":"11.0.0-canary.fa9b59f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.fa9b59f67.0_1614108949128_0.3209368301192306","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/banner","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.869e3497c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1596503878711e2f6223c44bf85d49417015e76a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.869e3497c.0.tgz","fileCount":41,"integrity":"sha512-kocOgi8nHOQ6UT4jxMEWsDpeJrCP4REdBBjxU0VSqXbFfyH/ouwEwdRvXdKb6XKyDwu0IZqBGr7s2SXhSPDq9w==","signatures":[{"sig":"MEQCIH86VrB5oRFL3SXi9vb4L3WVTL40LVFfySeDKbOisROaAiAqfjhJVtqeersCD8CQEUMhiiGM8ngA2zgoFE+0w/W+XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVk8CRA9TVsSAnZWagAACKEP/3f8INlLeZQiod+h9MHC\nhVHtr6aa/SQwl0mOf28S5BliMbRpRILjWF5KejIA9a0W6cgui5AMw6Ja/U8z\ni2oWF17TJ3Oz1i/3ssHr4OoNMv+IQQAoma+8TJsyT7ryPw7ICb6YKPLR/UON\nRdbSUgcdjAP9SoiWIjzH6/F6LwTtarTzRXiOoY2nQbH2qpXfedfP3xl/8FBq\nqUhf5Ecwv6zDJm3dOtusjRviAdPmA5F6xuJXaPkwC/bIG0kQ+Rq5baaJnzN3\nruVnKfoH8O8Wk/kWjRsZrJ0BtVe+YFPbo8ULngrw8rwC3S9guV8YDc+tIM+t\nJg+7x9Gxxfqy7UPtKhxkwlC+XtmOQE4OqtpggtqoWsuDGwrA9ycjzjvVC6Xk\nZ4a5N2EMZG7UEfx5zUTdslYMuW3p0rVXSXqGV/NW8/XerIogEjf2d0N92WjJ\nQjMYCdURgXoZdNEb80beFOb1YzWDMNTdcPipoC5kVNvcf+EELb/VAJ2eBIrt\nvbr47XPq0ucvvxH+PoupgBgNxcW1Ifi4ahJbvDmCAt4PVg294TO5LNiCUpN0\nHLYfbMrqSEuk65T9odcfB1CHw1TDTudg1/dX1A0UMy9oTJSWtWkSTiiS6TSR\nrhHt6NsPOrBdO086V71YuvzkXcD7f9s2F6AeBjtTv5U+ZGBg4DW4Lu6FaFjN\nv+H2\r\n=SvET\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2e1e116734dbd0e962ee4e11a9952ba9ee6684da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/rtl":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/shape":"11.0.0-canary.869e3497c.0","@material/theme":"11.0.0-canary.869e3497c.0","@material/button":"11.0.0-canary.869e3497c.0","@material/ripple":"11.0.0-canary.869e3497c.0","@material/typography":"11.0.0-canary.869e3497c.0","@material/feature-targeting":"11.0.0-canary.869e3497c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.869e3497c.0_1614108986843_0.8399021251299823","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/banner","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.8ecd7c9a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d105aa0369fb9bc23e2cda1c285b0bcd677c99b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":41,"integrity":"sha512-YhL3bXAV/jVwMCX2CHnUDSswF1VN7dwjWkyslwl0i9fK2z5dZfrS/GOrSbNVuI7CRc73Sh7Um5wKg95P1KSRFw==","signatures":[{"sig":"MEUCICdCfHMRb+QBVqohFy75TYBqP6FUIQ3i8lP1idCH3UCKAiEArjSCMHvXFVCQuVoZEpYqWEN3rgUZrpq3mc/1OlnYy5M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVzdCRA9TVsSAnZWagAAZvkP/3L8z79O9QGHp+Im2ROH\n/TAfsiLrwB1X2zMg8F0/c8xiYMBUFC+QgSoyMSYfsjP8CT/cpwuDQVmpNd0s\nurHDfGgdD1cBnUzGyGP2nQwq7qVc4dfmNfSNSvOn+eYiZUpb9VkE1GNxh3Wv\nfhR9I5ZlSRAU4rnhdEg6FMjvDfUiRUS2D56pleL9fBp30e02I3rlN1wypHHT\niOAzV3D/RjjmCG4EiG/tR9VCOnftsbM/vG4NlOB5ccvj2AP1hGP/jaey1SmZ\nDnC/AKh8fBbVmR2gX/uRFSLyliSf8HYS3eIfuveFSNB6O+aMvT/lncMlhvsz\n8n/Xg5x/YvPeLIopyRpMG1qyqoLqdGIE5BgtwoHRgnjhmBDVPd/RAsYm/Ihx\nHlDZ4rkxGtGJztDrAXr2rSBIgLVxI9jLKMwOWGLkQCP0Gg6xctRiF9GDy3EZ\nacXa/YyKhZBku42XUgTRLKFr+Eg5q20WE9cOyrrM2SP7+DmdpuGUCK5CmqG5\na2xEFNFYUbhRDfCyUkn/KT44MLA1ra5jktxaadxVESWwcEM0jJtoBZuybC/z\njZ2QmXFWoaTcdZuQW2aW4iyTQFovG5+n+LBuywmFfDc5QcUvoTALLPQJbd2H\nUs8bWphXNInNDOs+97L/Y5Es4Fc88fIvzrk71hDQsiqOPPjS6lnXb/KDoYob\nWB19\r\n=QFEG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ec70d22f543f79f769bc5b509c9dc06cb8114af1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/rtl":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/shape":"11.0.0-canary.8ecd7c9a9.0","@material/theme":"11.0.0-canary.8ecd7c9a9.0","@material/button":"11.0.0-canary.8ecd7c9a9.0","@material/ripple":"11.0.0-canary.8ecd7c9a9.0","@material/typography":"11.0.0-canary.8ecd7c9a9.0","@material/feature-targeting":"11.0.0-canary.8ecd7c9a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.8ecd7c9a9.0_1614109916596_0.10001968013887907","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/banner","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.9c85d505b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b4c88cda7a0790bd218e0028c1e58a4ce1232e1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.9c85d505b.0.tgz","fileCount":41,"integrity":"sha512-uikkrxELRTHIYsgON3xIAtCmUafg3w7VQF4OyTgJxeBMUrUXC4aHPJAaJ+xdp6oWcL2Z/qzhQdtkAu7Iu93mcw==","signatures":[{"sig":"MEUCIFn6pCuCqh+kyzewfJwQvUJmJdI83g38GnHLU82a3efRAiEAooQB5DoByOI3nFSooqbQxl5Fy6pGfclDVT6moroVh+w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":443720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX7ZCRA9TVsSAnZWagAAasgQAIjKuFVjTfLd55qtD+9x\nhY7RinHyQMq6wN21QKT8zTiqfZ5QXvxXv0/iSawmQIZrsUymKdZcM0Jia7q+\nPWpJiJZiMgOCadhiy7OSz2TTplYG+3E7RLv0AVkEdWVD6uH3IuOWEylqKAOk\nKoMSbTsf0zOl8VIU/JSW5wcafFbKRu3GhGXpDZvKxhJEbvcbAYTyeez0I/8J\nQnSyb9QLoizP1t39eJfUa3rX3SSmce4VhiKSH3iFiOnofIkPyCxAYlXQoRL9\nguOgOwkXUj/e+GbSmNseOxvsntoYBXz7itu+8wO/P6uEAmCK4AYUlOubvl/u\ns/BqYzDnhQKMJ0Rp1Hb1p2J6h833shAvnZRsr9iiayBiX4ixSfG382F51DWH\n/+KSH3gbq6h8IfwKTyJNdslEOFh/Rn25I8t/MQiTltd1yTMgg9JwibptHrHi\npiQWU6503vcXFvhF3AQ2Am0bjS46ylp7hoPjKzZo39CvY+yoZqxd6Fni4yoC\nq4mwajlpF4cy1cjvp5Y+7V1HMvpv6bOSJpDR+KGE+3S/e7WBk465jNxvO+38\n9kRfWvEdFosyKGSp1rMpVoKfp25Pk2vE6vWqjm6OY6pYqGNRoTL+CTs/BjYh\n99BAVihhVwZrRJaTWhvjVFiZ4UIgDN8t4i8wGqDdxyp7RMFUvRNLwI2fRy6X\ngvXb\r\n=VifU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"374562c85250daef48b37a0e27a506a7e81c56d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/rtl":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/shape":"11.0.0-canary.9c85d505b.0","@material/theme":"11.0.0-canary.9c85d505b.0","@material/button":"11.0.0-canary.9c85d505b.0","@material/ripple":"11.0.0-canary.9c85d505b.0","@material/typography":"11.0.0-canary.9c85d505b.0","@material/feature-targeting":"11.0.0-canary.9c85d505b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.9c85d505b.0_1614118617385_0.10689044370713052","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/banner","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.9f2e85fb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1becdc2149343ce2878befa892611d4f9438de70","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":41,"integrity":"sha512-LmdQfCv5C3FzAgMTGeE2ICxPJ3MY9OhZ2zr/F7frJ9wUINXtdMcstF4jCN53/YoG0dqz4a0GAIyhOR9v4G2Lhg==","signatures":[{"sig":"MEUCIQD0HImA1yo6DZkKHDwEQuisNRjstHEGR62g1gLoBTnN2AIgP6fuXzKezfRUtqGbxCkVAu/hwJmIrvVvG1viRGGBQ0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbCxCRA9TVsSAnZWagAAF6YP/RqgNv0a2sqdwqeBEYws\nhdKSyzX8hmuTpzBpCLasTAVG8io7nSJ3gehZ/sNSIBQcylP4w7Jscr02PyxJ\nkko8c2RAOsaw6Zgs/VM0Y7vhpN3XkXiQ+mVzbK1HverpI3Rf6ioIoAjt5JEW\n7dItftoegHTNiJ3H280zmIdyNJd9vfXSiDho3MLRWgdWbwQOZE8jgkk0XE7u\nnxGjstNBcmkqi8SDxAXS2TQi1QsXpX8jxAHSXjKMvt07Is6xVunTVywz30DK\ngE9g9F3PGMTeaNdmik0nQtgrWxP2yKOckIr6VqlHuzEKjWBVIHXMisFoOR+U\nyjyW11/xZdTOxATWczsE4ZEU81rC8tlVotXZ2922Uqas7xSRIIjo9PNgdjyk\n4RTMb1eIoDg4w0hPKDq0Ia/CQCkDscOR6xU3VioX+P52C0Wr7zWH9kqlII4g\nEngxCotiTzs0RCjfahZsiCH1DbwbQUsNqwb709U1O0mTZ8Y+PNMOsD4QSpqY\nSrLfj/7fUhCUG3SLV0Xmh2a1ti4exI7CCopF3gHPmMZoQTVvvaYyzv5c3Xlf\neucUU/SHO+rjeyWgeAeWtAeMCCPV8iuz1q4q1w4QYyU7p0v8XF9Pp8tEOCuW\nRUfm1lEGDDPF7p1RI5BkI5E58HO2n1Y6Rz9SuRKcSe3pAdVPcXPxQsd7ww4G\nDI6d\r\n=QFGE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4dfe4e49ca9339b2914b3dfd9e5c12642a0fd60e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/rtl":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/shape":"11.0.0-canary.9f2e85fb8.0","@material/theme":"11.0.0-canary.9f2e85fb8.0","@material/button":"11.0.0-canary.9f2e85fb8.0","@material/ripple":"11.0.0-canary.9f2e85fb8.0","@material/typography":"11.0.0-canary.9f2e85fb8.0","@material/feature-targeting":"11.0.0-canary.9f2e85fb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.9f2e85fb8.0_1614131376547_0.3127739327939012","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/banner","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.19c4f29ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de48ba0646837ab9b41995553730b2cfc6cb2d43","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.19c4f29ef.0.tgz","fileCount":41,"integrity":"sha512-3IicxF/sQfSkA6WbS+GgXUvbMXmM3upIuxEKUmR03Qd77iBgOQUmCrzqYBSRoR3TIWBJdck+Y0ruYrxYRqym2Q==","signatures":[{"sig":"MEYCIQDXzU7m2xQ8g0CJTZeBi4PAzhmhdh1y+ZuSmp1fYwiYZAIhAJXIvFtkDi6+x03TjaFGMMydtrRtWiqxZWo3cCZhnoas","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/lHCRA9TVsSAnZWagAA0c4P/jSxleu2+TMUvcOepZYU\njlbbbrqijlAY55f1SddE8JFqEkiPraqt65vqWVU8SWvcd+KHEu38gDA9iveq\n+k9oKZJy6MoUFgpgKYmT+9T896Opsfvocdm3//1chfPgpt5vgAsPouuFz4UU\nPpnTpy1u9CtnU03Kly76B2Fas+zeY0/phVS1UToY07XP4G6y9LdltHFxG3if\nbsNx/LDceHOkVlQKZXfohHmsvtXomcOZkzI5nBJDL6gWU1vXzducTMxyHNp8\ng8CCO4IrrhZ+0xTQULpGYVScLa1AO+A3YKOIZvMZWMkIfTSTxarP7R2n2bw4\n8Q6NaaULnDFH83fTJ8hRPkGwQBKxI6g6nfNqePJGpzpGeEaoWpXIXBRWrITy\nsY9NCZbCOPYQrnUHXCV4/p9FZrCQORWvY4Q9RA1E2xfYra9sETFuu0gZd8Y/\nSdmUgbAAYdbyrcFCUGTT/ZwvwodWLxUbIy4xCGYLJHTE+CdB5Xf7+W2XiOHK\nHKhqctEgoft2cVhw7uOgZ/DossjN1z2MNWRsteXtPKLGdf/AlrDROR/xFNZu\nYv1tO2le/PwpoSgk9kvrJEBDMxh/fT3pk59ybBLaqJKjxEQqcwHN73QRTQoI\nRQubh3AUUMwVqxrsy8//i6WSl7aeEwU7zqj8PeDsnT/GkKtne6pveH+bQ/DG\no1VN\r\n=3Sez\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cf61b54810b37e81ab57d447f7d050104a2f6f46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/rtl":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/shape":"11.0.0-canary.19c4f29ef.0","@material/theme":"11.0.0-canary.19c4f29ef.0","@material/button":"11.0.0-canary.19c4f29ef.0","@material/ripple":"11.0.0-canary.19c4f29ef.0","@material/typography":"11.0.0-canary.19c4f29ef.0","@material/feature-targeting":"11.0.0-canary.19c4f29ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.19c4f29ef.0_1614281031428_0.4300600397903349","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/banner","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.63df6e9bf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"330776b587234174ec66a18a30cb9cde44246648","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.63df6e9bf.0.tgz","fileCount":41,"integrity":"sha512-kr56LS3/GD05ulF5OldxDhm7XT9NvrQ2W2nYN6F0QZPSwbiZOu/J/iRGqNWRE17nHTdqTUzSmItaHWrVReTpew==","signatures":[{"sig":"MEUCIQDkRTkbPVfIryZi/xaHLA7dISKQZVYHNNQcZj/HMHRI7AIgLz3BQhUs8AIU4RMHtz+tsgosnAc7ljcFUtgNuT+NHGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/yxCRA9TVsSAnZWagAAMtMP/RMXVbACBgu2TDIfy4vU\nuMgGJ37hmKHScx/sMl3QOocmLtDAdUbXbisXhItRKbp+w4rKjem90gM7JDuO\nyiWCiCwtNBtDTe+sInyb/Ly4vBIuwTKymNFEt6+1wSd3ho+ZowJZs3UzZW4v\ne+Z56K7XaY2D8bk3A2n4m5hp0D0+yUVa8UJ8i0dlSnV4nXurYqdFMMORyyOp\nd73iSQvXtZ5oaApw+klZqqOOw6ksT4hCcJ6bEhhL3hM0fsvJqup4Gf/S4cy2\nwdrRljPg3TdpziALzrVbTuiGWZLnOalCZGjxMnGiVNGSWPpC8uMy0GQTdNSc\nPJc2P8K5cIUzCaR5olTYFcWJ5Ffyw/U8vzx9755f93OC2VMNxrBs4IWv0c6z\nX3fnJZGqkym/1WAsn6pSeKo6U0gTS5/WDJvbHT2DkkjzEsWOK1seRli2jWE3\nniSEPUwIY0H8L/v9FQnH/Oq4AwNjsEbtJz1FPm0yDMK2FbLu8OGLWpyh2c2Y\nQV82KqWAb4G4VfZijFqAz+R3qmosYZKpAAL6M/JtlnGHvKgQYzqR34HE+g6O\nOhPgyFtU4m3ZG0wG1gL397n6pStT1rXfLs4fGJUqsnwcu5uuElWnnSjCdH7n\n9C+FnuxN7bW4pFwmuxrFnqDWwsPK2llNMM8ish4NWA0hYXooRb/MgQhqJWq/\nSBu+\r\n=wdpy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6d11b414d4ea43b5c780988e2437ee30c9f1c0b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/rtl":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/shape":"11.0.0-canary.63df6e9bf.0","@material/theme":"11.0.0-canary.63df6e9bf.0","@material/button":"11.0.0-canary.63df6e9bf.0","@material/ripple":"11.0.0-canary.63df6e9bf.0","@material/typography":"11.0.0-canary.63df6e9bf.0","@material/feature-targeting":"11.0.0-canary.63df6e9bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.63df6e9bf.0_1614281904657_0.16810498045119138","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/banner","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.981ad970a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b09a059bfb97dc94bb650d7dc5694304ea779d8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.981ad970a.0.tgz","fileCount":41,"integrity":"sha512-8disct1HC3GU9ln2sKw8HTyVHXH9G/c00fujuToU2tEk7a6+JbKpPLLIAyBDazB3F++a4a5+AfrYns9Po3PiJw==","signatures":[{"sig":"MEUCIQCdxmbBG8Bqz2855uKkXr/nYU6zMQzvSEL8N3p1+0ROKAIgaQ2bnTi6ChzlhOG1QFjnDdri+4HmmLVBoZDXtB/ZiPw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODwyCRA9TVsSAnZWagAA4e4P/2Aawt/XHy3TeXvXYl/t\n2KE0rdU/4EQbJ3deBdRGuEYOevrvLjztuuvBH5ug29rjNs2B60TALZbs6Vor\nVX4Em5HlKnJ4QcF/tcLpSceLE0chU7DxEMA8/sJ7uoR7CO0935qI9LPh/Khl\nShSEapIIh8SfQQFZgIc4SNoI4bHrMuqUG2s8llkGpowoktsoL2rjjSQvDmF2\n9ilBUhhBdtznLverMGNuKq+GbDZ+sENf/ZGP4J5Ati76GCP15FEYjW2scDkz\npGzNGxjEn4b7o77hVZjcETWEy51JZu8l9DQeQ7S3hUQGdH9kfW5pSA0GSjmb\nIexAtbWyjwDosMBBcU5rDzJIb7usA8mEj7cLcsAXRgN6E0Dlydm+FKDy+Pf3\nH2nWmLbstO+TeVnkTMmcuaiTyXmjzrn1AVrZcNe9oJXoCshlrNS80KiIuTKF\naJkyjJBNWhKx2ifTOA/zLSof4nVIylw8rlkvrSuyD2lphnaQKaSiFptsb2lF\nN0TnQUSm5Lv6xDNXJ9OGJy9RoUz+Wa+CTL9jjNmVeP+zqIRRopJP1M6XXnvL\nTZdLNpxoD40NOF+LbxDRyNzyQ9WfkStgBuvTK7SKTGxccG0dveJcnbRvi3ci\nrxoCfd5prngw4WCTLVnppEeCjQY4dHRm0GxkPgAWgKblELVpVhRrkVXM+MgP\nWiJY\r\n=YYDI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0faf6e6b78f0c9b2c63f416ae85331d13aea198e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/rtl":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/shape":"11.0.0-canary.981ad970a.0","@material/theme":"11.0.0-canary.981ad970a.0","@material/button":"11.0.0-canary.981ad970a.0","@material/ripple":"11.0.0-canary.981ad970a.0","@material/typography":"11.0.0-canary.981ad970a.0","@material/feature-targeting":"11.0.0-canary.981ad970a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.981ad970a.0_1614298162294_0.10682529770976457","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/banner","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f9c9e39d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89ea937350c1e12f5b805a9d9ddd16515742f4b5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":41,"integrity":"sha512-XhHG4IK923Y9BhnVD+MFwHILGxVV6YK6eEFnvSUsFLtxbDQoFKnHhQEeCCfx8o4N/0M2yFzhc/WXdcAGjxa52g==","signatures":[{"sig":"MEUCIE34dbqmjbf8YPp87CBpYKUOeIu/REVw5ocmwNVhXMpzAiEAoLBR19lY+cyMOWASCzxcMwftx/Y3ipL0QCZO2na8zio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUCSCRA9TVsSAnZWagAAu/AP/AzbvwZN+V0UHdJxUeIJ\no+QCFHLKs3iYL0roNmTh14PgLpDl0fylfUtWaaqxHaH7AXpgzQ+ogVji5yPx\nXL3LaIpcPtAWriLlvz4pi0AGgkmSsec5eqapwTjcDETT+eFTYPhAP7kgw1+I\nu8NASFA/ZbLMznziwRLE6J7loswnSkdGcWN+3snEV8F73gf3LNnIKR4TuIpf\nJt5MScPa1G3B8Jywh9scbAq99OREl4YOaf1vQ5oJzJdRVKM0627tDBxDai3X\n5LAhF/1qFbv+nrJVZodFE/jRUg0WMmbBYrllGOjw2E2CvBJ2tIaddW8cqoR2\nBuqI+sbzP8DmgkVIpL25ZnpTsbxWj+WPHuRyeKNFqEpmSxMSL+2sQgLxmR4E\nL86TQyx4FJCD/llWQ42dmoGVvu58Ap8kZtJ+mkPbvr4x28Mk41/jfoMkRXdL\n8xTQZw7rLAdNjOCp+qtdk+4isVPliTNWYW+QaFbV4SyddohPoG0GbD28q4Q5\n0I+fK3bWMh5hbU4p/eQCEmJY43h0NT64H8uIlJAV5WAGUWQJybTZVxc6IxGp\n+/4osYJJgOqYK760POR3SppNurqzaBzDtCDTQP8GS2jIMlztPb8rnGSl29fo\nl/SHpL5tJDuI7R1hZv7fsFU1kJSY0N0JiZOuKHZCxrE1gLBri81JtK3Ou2r3\nTq6Z\r\n=7Vk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"81d489ae3f1defd63ee64de05a2a330040ae6406","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/rtl":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/shape":"11.0.0-canary.f9c9e39d6.0","@material/theme":"11.0.0-canary.f9c9e39d6.0","@material/button":"11.0.0-canary.f9c9e39d6.0","@material/ripple":"11.0.0-canary.f9c9e39d6.0","@material/typography":"11.0.0-canary.f9c9e39d6.0","@material/feature-targeting":"11.0.0-canary.f9c9e39d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f9c9e39d6.0_1614364818128_0.07718558294410549","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/banner","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.c97d7d881.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63217f5f59b6969c11f924c13d461f9314672786","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.c97d7d881.0.tgz","fileCount":41,"integrity":"sha512-pf0jyIQmtzRZQDn+v82lr0Npnx7t+S+gcupHppctbTey1/VZ5M8WMAxEwYgKKm+zXdiOv/9pm11eBFjVLs3C9g==","signatures":[{"sig":"MEYCIQDfnOa9SH+/6oFN5uwnYcTEPYhsqoam4I1B5PnkJph6BAIhAPv72pyNXXNkZkuf8CTQaLn0alUmGXEPccHt2LbJQWIP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVSKCRA9TVsSAnZWagAAYGgP/3eBfnKYM+2fWYFCB4a8\nT1PHnhD1gTgG/ASJGeE+TRBKkb2ALRj2xPZ0Jn70jqFKN6x683LkrVkWXuQ+\nod5sx6BzP14FvIfVYldhtBEAuTEAwayvEZtTtJqgeL3xoTXWD0HFqV9zQRy9\nJru9u09vrV16ur0d3QfNBouRCRyo4p0HQzjzBUqkWRA6I14qlDghhJgj6o/o\nQAlKkJfjsBOoKDC9phuo/yppWOhAOGSU7oW2zqCWNqZsl0L8VDpmS28yj+OU\n5kqUMWic0NhijrIhFRbAgLstRukUZjDupjnBcBWX8LQX1qgrMGNTfEyOf/39\ndAYe6ustq/8/ae6/cfY+mGP/XRR4oWSR4n7wIN5FfcbNyUFulqObwpXXnehQ\nTI50A2tiH6tJCAEdxm6kWxh2sMBXDQ7+WMXjsT0OO8PUlFmvVOVec1fROeDY\nGWbxkEEgX70dRbYkA3bxUzjPZ9qg195qrexP6P+ams3eHtk6N4XWvk7YTqPy\nyqIAoJBGZUJd4UGydxxt4vkJgqCs9tDh7tW2sY/YIFlGASgZgUM3FDcypvRP\ncyPzHQm8WoXM8f5WcyVPIhhpjoI6OO7gfu+lojsX7amXOEuy4KA1/65LFwGH\nQiXDTaSlmUWgeSgg5wl3lXXPmnWqwpV6egjxSSa20xOmPmI3Blop8GUGvLvd\nUoI/\r\n=fhdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"27a49055320511cea9f431f9c62d44a6490bb64a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/rtl":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/shape":"11.0.0-canary.c97d7d881.0","@material/theme":"11.0.0-canary.c97d7d881.0","@material/button":"11.0.0-canary.c97d7d881.0","@material/ripple":"11.0.0-canary.c97d7d881.0","@material/typography":"11.0.0-canary.c97d7d881.0","@material/feature-targeting":"11.0.0-canary.c97d7d881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.c97d7d881.0_1614632074168_0.6796313836965435","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/banner","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.bf670dad7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fdacc56fc73199814e005c163b5b7c245074cac","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.bf670dad7.0.tgz","fileCount":41,"integrity":"sha512-+5UlMqeEW+mVfP4SQzZ6++wI4aVUuN1ItJPNCrXe1ZvdtyZq/gv8XbZbaOsTAK1mHi4Nz9EhBF3gmkW4wEvpEg==","signatures":[{"sig":"MEUCIQCX007xwxjEgqpW4itxM5lX/2Bvimv1+OIVJueVVzZNqwIgIV1jFYWpFrH/6XM3Leu1TyTMOq3+MamoRAdoJ8g4Uf8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPta+CRA9TVsSAnZWagAAoIkQAImAjEa27KYDG0kP9WaY\nIJmmiThr7hMmLDNZnNllaSrsd5qVN2wDDp6yYae51P2Kk9b0m364evD3H/Oq\n0AWNDs/YKItpfjASPmwTM8nf+YsniQFGeJLouDAb0nlw+bwHTOhENpLlEn1x\nEo2TKVlTFZcKU5A/xGxM7sV/NdhDU4F8AUGCeY5WSiAeE9GwVSPDVsNazzKe\n1I60p3T7mr4Rl+Y+0r3N5Kv/C4eviX30NdWLXVNxCjnBxfRLL5iVMDgmqPSN\n4fYgeyimpoOg+9kFbru/E22XFaGfHPeuHr82De4VaE53FxTKE7QfC31dKrkO\nMsuTe06IvB2OTpS1MKU1ykKy/U87089Hjh7KIArwwedLUYpK11CV2htZrLY6\n6x3mjicq8wr5ih+DTtEO6jKx+W0kpOuF+fW6vKbGPR54BJ0Oi2G0HhD9picW\nRPmJXX2/MxTSjlCTiIqZBQeWRZRDWMIh4Iaqn7082E27vcox6fBjNkvdjxTK\nEis42xBEPEs1P+Di4hkVaETRSWcvXi2SEEn/cpECHDLQB3zq4asp4MlpXoTg\ni/cr0k+LC1SiVn7tTBXYRF/Cghbb0jC7n0zVfqVZd9raI5tcOCKgcYwBhiah\nYJp22RxRCLfbiwbZhCO60Ev/AKO8MWlcItO+rKBpKlJ1qFNA3mP6BC7znyxl\n31Dl\r\n=3Mm4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"61b03e5331bd5c886de5c4a57a4edc1b53878e47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/rtl":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/shape":"11.0.0-canary.bf670dad7.0","@material/theme":"11.0.0-canary.bf670dad7.0","@material/button":"11.0.0-canary.bf670dad7.0","@material/ripple":"11.0.0-canary.bf670dad7.0","@material/typography":"11.0.0-canary.bf670dad7.0","@material/feature-targeting":"11.0.0-canary.bf670dad7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.bf670dad7.0_1614730942321_0.9649158638769342","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/banner","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.c7d98fcde.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48e01969d2260714daa49a5fb177672495be6195","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.c7d98fcde.0.tgz","fileCount":41,"integrity":"sha512-cFhm0ki5pon7QlbRZnirxt+qDuEvoJBDX/IM+iFdnlZSn55mklD+Hx8J6yVBGp5g26MrzctdRAA6u2pzRUs3Iw==","signatures":[{"sig":"MEYCIQDowK5VjIOnJAPg35SqLxkC95oRvgUt2g9LepcdFi78VgIhAPevJomhXZdtUNotCGktpkrfPtB7JnTusgzxKoeBn1h/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/KWCRA9TVsSAnZWagAAHn0QAIGmtuMeAGSY/byKLYoR\nzS3s8KOgd1awt2qyWzPklYi7fXCH0GmehY296X+dPVD8k+x8FUc8ssRJ4eWY\nPYXwa1a/EDitKFV3s3f0xUH6oPsHE4A5U881wiB4Tsf5w0D3sbqdCp2EtoS+\no+3CqzK3JUiEcs98lPs2eZg5WRQAIZX0Clu2eyJH0PrZ7v21h3zdrOrJNk91\neAz1BGHz5fjAeJ2+F98Bo2zfeUrc62bVcR7Z6JRaUvZDrS4rhvptS4aOimAg\nkg/BpBkyXYN71esc+oIBlXAd743oSNwJK47pxQUqLEo5DWgxnsVRJoiPw7UN\n3MuzU+Csa1WK/h0PMu3GhHBCNjqIQpPdYRnXnNGT9YsRIqSdf3sJxNBrqE9j\nnupL4kZQ5+u89LqQEflWPHpg1+4Z9ND6plNnSnSD1q6WSd8EJ8Z2JoYXvqim\nbM476Cxp7d+1jQPsggzE2esqPVpZ43SptGQ/5MwKIcGIarlyIeRVD4I6J0WP\n674TWseVBtkumjAkWDTy9YuAuOfrm7RbIq06wC4lIF3u+5z/DOXkc4yabIdN\nfEKIiL30Y68a05KLHtoDbz92QuFQpkT1R2j7dflv6Bcs288klfJlScMXwexJ\nBCmHRYsD7qA2vRxM63rB6fufnsE2ILR2uQ3U3zQP8cGLbBFSwXjDBvPHv/vI\nKGi9\r\n=9eDs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c5c4c5b417df34d141edcb1fd743d83d7a2b49cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/rtl":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/shape":"11.0.0-canary.c7d98fcde.0","@material/theme":"11.0.0-canary.c7d98fcde.0","@material/button":"11.0.0-canary.c7d98fcde.0","@material/ripple":"11.0.0-canary.c7d98fcde.0","@material/typography":"11.0.0-canary.c7d98fcde.0","@material/feature-targeting":"11.0.0-canary.c7d98fcde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.c7d98fcde.0_1614803606466_0.905986303601555","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/banner","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.4fef8bc1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"145ecad204fd72601b94d1501e09d364b436a99d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":41,"integrity":"sha512-Lj4dQghBazECo6iIkWs6ha6/vBonzMlVFWwsVOBhM7fYaX72hrvlkZ6v8HsmrYkIWIU60+ts6OBl8wk18sl2JQ==","signatures":[{"sig":"MEUCIB+Xmu+VQHF+damhOhKSAkaqcXnhHloDii+H5CTIASSwAiEAgLjAb8We3bP3YjT0s98G/AgjzE/QF4wJvvDGZDDDhzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBrlCRA9TVsSAnZWagAA/vgQAKH0X27rwckNkJGt0xMs\nAvGg1wWAQebtYn++Le9baJ38Rhpx34pKFUIACzMV88jhalZABIfhKwgZBs0j\nnlIFu3E3huj1GayON70s/3Z7SPCw07/tYpJGBl8dmPwHlcg9emC0ChFeY/UL\nPP5nbDdF5PfyhRVRqiluzOahLhoETCEDFkjcF4BDEbFb+Vmh6og/OY0hixyc\nHrA99WpiyfSGaf0XmjhbrRtuH7S223ABdezAnnLLgEylP7OixthEtl2/ZcxS\nqAYQWkhhn6jXAjlf07Ckp1Z9DSzSIKHEo3uVTMan1cTFYRdENdhCYlBx+qZs\nlo90ukkOKaqYthn/Nw+bACNd/onYEcp4LwVyvTI0dm8SM7wJTCdu7oBhOUco\nijjldU5Z0Axo5mLDL1ZxnNiAfb8aiXbLIi0NqCtlxylM+MGk6ghAzBqbVSZT\n9DSyR99PWHN3t8AwzisIA8qpUw1cs6Poo93X41uJf9ow80cQmjcBqD/rIFYd\nFh0jKBCgGmT79cbaExypi1o13wbkrKGTYYnbt+CQ0Zb9PrtpGDZCBQB7t6d3\n0c8fJbsV3CcVpyqcEWdK3AqG6g3aINgtmgkTpr6rjHgEt33oh3EbmV9xCPkM\ncUHI/YSy+kTUNiGQr6UylKtVKdG/I9mEiuMwRzBtLLn9p+TL2F/CiSV/kOR4\nTqk8\r\n=4MQW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"933905005f9c16276caed5327bc6ca581afabb6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/rtl":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/shape":"11.0.0-canary.4fef8bc1e.0","@material/theme":"11.0.0-canary.4fef8bc1e.0","@material/button":"11.0.0-canary.4fef8bc1e.0","@material/ripple":"11.0.0-canary.4fef8bc1e.0","@material/typography":"11.0.0-canary.4fef8bc1e.0","@material/feature-targeting":"11.0.0-canary.4fef8bc1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.4fef8bc1e.0_1614813925218_0.4500786597302533","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/banner","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.afae3a3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"318e8da669ae355d22151ccdb8c48e8668cac8aa","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.afae3a3ec.0.tgz","fileCount":41,"integrity":"sha512-/CImjvRr5OyDtSneE8dO+/1Yxx/Amqw36fInWOmy4GcMB/vHf0dDV6jBwPel3MkKsShTY1ev3zGssiy3QxcUtQ==","signatures":[{"sig":"MEUCIA5mXj5hLMZIs954rly2mUrYBI/ARub7HwAX/L886ikYAiEAnDPyMi4Mo+SpoVycl1L0O/wlRr1hmeSux4W/5uC1ErE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450616,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB8bCRA9TVsSAnZWagAAHIQP/2Ct6ndDiLC2w7kaJW/v\nLNYLO14megdQAugIJbQf/37+Ryuy1zEGjEvgYshEYAixZYiq3XORYPLprVBl\nNujx4ns1hOdQzvxO5TZtdGzxj+Y5DEIZRJNp6+Zohv7XOp5sMI+207Lq3L9G\nS78gI/nuAo64XvaUN6f/MV2x35TvOzp00N9vdwSBvus5xZLA9mccVbLs62GZ\nClWMzo1FJddO4eKldJT36sAL/j+eDOqTknXXBoAOtpJbYX6JbsHdm8yIxI16\nqpnx6V3kMZRyD8+g8FHWm6iN+7bnTGClbRPqdPKjFz7psyMNj/y5ahFhrhEG\ndlqljKA6HjrUkmodBZukxMIS8N//OOxtZsPRi/Uz1BFSbJOPdI4RAmC+TAIu\ng0uBnR0iBUweJNpi+WaT+pB14bVvZjwzeXKmJLuM8vdU9mqgPI/WOETlpXyb\nl5MkjE9nnBKY+x7xkJIpfvzegUNat37XuceZ9yH6WCdi8SKssqxZZJZfSmrx\nkXbVKcfpPZXAI6ZiLgGu9s7mj9r/JZVDX1JGzzQH7UMRp+sBwPmY4cbHV9jQ\nAx/pGoamR0kcl25CkniU6oeD6KyG3n8iF67g+V+hrh+o4KsDEE53ByBGzgJm\n8uZ5AMGGsZbmWtrfFxXVZFhOPqOx3xf1tvEz/UoHuYHJU3izyQzlBBVVtjED\nqVRE\r\n=upyV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"054b07cc588568c82346f2cab8aa8948b77a80d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/rtl":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/shape":"11.0.0-canary.afae3a3ec.0","@material/theme":"11.0.0-canary.afae3a3ec.0","@material/button":"11.0.0-canary.afae3a3ec.0","@material/ripple":"11.0.0-canary.afae3a3ec.0","@material/typography":"11.0.0-canary.afae3a3ec.0","@material/feature-targeting":"11.0.0-canary.afae3a3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.afae3a3ec.0_1614815002906_0.2689801963903171","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/banner","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0a0b10f22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9750fccd594633b33d3f034d665320b30c6d4a30","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0a0b10f22.0.tgz","fileCount":41,"integrity":"sha512-80aYzvsQIkMLmcp7kJ6VFni/WrfcKol8LCUkFAnMYxYPuvO5MNPgMXQAd03V3wrCg5HEJRG1XHESvExseNuAEQ==","signatures":[{"sig":"MEUCIGjdx6K1RDWcg1KoqQaQDYteGKZ0ykXVs6dZq7xWvgJLAiEAqhoEu7QVzY496RX1uBoDanFqB1PDJRMOaEXsMDfgs5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCORCRA9TVsSAnZWagAAz8wQAKH5K8Bc4QAdBGjW6Hch\nJyldf2MnquDie1HIKGPe5M7vMSYhrBdUuZJWFiffI1VCGZkqflUsPQmeAJnx\nR7HYCzNkR2zxr4ZkEk235+3+qkdWEJs0tHJig42LssUz0eTaHOJ3g6HO7C+r\nKabjdfYJ1EUzh+Y3KpGlTcsb0iCyTJ8hDQLYGgXpWa21vlHvoe7vhrhOaLY9\nVZo5n0yUTM34HVCU1Lt+IGdEK7zx2FEqv6qN85BRuHR9GzIn3S0qBKl78Z8+\nL7WbkfMsXFrv5xi/kmXR17Tn9XGI3l0+EWGspDUkslnsoDps7XH7f5xcB+9M\n95TbJ9fXjcW6eeR7oVdkwEqjiZDNbaWk7EhfOquogBaP0eye4/9vnziEnOBw\nzJ1GP56xbKJ9AvO8ZVkVQTuMMhf0x1/rnsongs0E8m7+KSFnTRzD2XUz9YOq\nj+/cD40F9nr1MIMpocaqy+DXpYLq4fK/x525BqbsoyI4Ht+qA25PKfhGr97a\nZYwjmWJ+Ovl34kjRtDLanUykFRu+qBzl3tllMga+p/6vjBzRlt+fWU0rdI1h\nQdcuU8tYj2uaqLggUYP7e3fkOMNPC9iVHtttJJsJNprAJ7aSvsR78NCFVWMn\nSDZYAdWNBPbsXTuyz2hfgf6NA4uEwT6x7lsBqn73YSNTjcJD552j3RMkXQGM\nvhcQ\r\n=sTKg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string|null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5b560f4bc4c4b50a124c9432e81b3287bd348abe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/rtl":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/shape":"11.0.0-canary.0a0b10f22.0","@material/theme":"11.0.0-canary.0a0b10f22.0","@material/button":"11.0.0-canary.0a0b10f22.0","@material/ripple":"11.0.0-canary.0a0b10f22.0","@material/typography":"11.0.0-canary.0a0b10f22.0","@material/feature-targeting":"11.0.0-canary.0a0b10f22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0a0b10f22.0_1614816142663_0.1329571157190248","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/banner","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.6f678a91a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1acfc3428c1f6904f4cb36cfdb6608784e2525b1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.6f678a91a.0.tgz","fileCount":41,"integrity":"sha512-b5Z3N0ytXDzbbWUYP5fOvvLzZU0iOa7l3sh4Se3pmJRVe/2woYVE1zek9hrS4UgetY4n2Bj2ePvGLwg9XsQ6xA==","signatures":[{"sig":"MEYCIQDotwjHCjSIrcvYBVAegvhzlf36AylkhasCmZxfTfkJhAIhAKiCGzlC5+sYiSzOjIVdFbMBoFPnljPbI7y0NQs1puox","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSnRCRA9TVsSAnZWagAAcB0P/RmiWvYwshHz7W7Q62dV\nZAVg+8uJqIVNW8+pFrGf4Wj4jF0+MJfb1f9jzDh6mJZU3q9zPMkyQ5Wm6AoE\nkRdekchsNEwVrhbdPEkfyu6mcYwpSkyzQ912ZnnIBu2aATOZ6Q/fGwZpKfAi\noDc6ATp29+kBxsrId8xFAVA/MBxDV5JCu8gIr4K0Ittx8UAbLCKG7AHtJGSq\ntp/NwVEWnf6dSucDzqC1MBOJB/w5aKOMzjzcFIDqM1H3/OxIg23WaZ5TBzyJ\nceOyiiwzffbhXhHqkqn6bNCqGlT/Y6QVMaVgRVkNgxhKe4nTfDZB/BZls97l\nL2y7aLddTFGUjoDw7raTh9YWQieM6bWLaKfiFsVDKg0XwflP1P/tQOodqcI1\nCPPOspLWORgkFs0Ui3xBtQq7MICchQ7wt8sEDo8/JzOgjw3pjqytxDO2CmHy\n1ZSabqM8oU1epPE1yYWHHRTm9NPkmUeUus/sF9GW8VFgxeJ2wHmQ3UGnNXRA\n0Ks2AxTNpowH0RDrA0MkWWCIxcB7wxmutr7uO+xYhxL6541KVNB3sBV0DFDC\nV77qXCWUtYYUTdvabn310pmFLAol2UPio+P+UaNARc+a5JxLcvVmQps04+iL\nSLj7SqGLPkeXtSpk2DigHcCDAXHHD8C2Gklxb8e5ebuHj3zoo0tDWw/fnr+B\nnSNZ\r\n=LxaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"863e8a04081286602f8b0c9bf446655b9399e8c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/rtl":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/shape":"11.0.0-canary.6f678a91a.0","@material/theme":"11.0.0-canary.6f678a91a.0","@material/button":"11.0.0-canary.6f678a91a.0","@material/ripple":"11.0.0-canary.6f678a91a.0","@material/typography":"11.0.0-canary.6f678a91a.0","@material/feature-targeting":"11.0.0-canary.6f678a91a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.6f678a91a.0_1614883281276_0.5076178875612976","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/banner","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f5f1b613c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34c1819e960ee79dfbf9493cf84e3ff9867d254b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f5f1b613c.0.tgz","fileCount":41,"integrity":"sha512-kVEW9oaMD8MEAsPg15gjc1jrLT3m9jlnLwWSTIE/YKGDHuUFQyGKDzQCaU6mpypMl3qZxEQTeJTXQqzY1zrOjw==","signatures":[{"sig":"MEQCIAE7GgzYhPA9bBLDN6j+1pG/Eiv9qncs0jU+ibrTu6nIAiAe7lz5mQtt5+b+PTI3UksU3p9y0ijgqCaaPiXIg12Wqg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUgoCRA9TVsSAnZWagAAXBAP/27OL2KUUkMIhV+3yq2W\nsJsKHDyAiTGxltbaRlVCGLBwuPG+qnT/4vA+4nh7ySKTEemVvo67BENrxJTL\nl0Sz87/VYysVNdKyXUPDzolJ9P8XF4+b7/pGUactABljoZpDB0nJ35eSYWiI\nE4JR3pD+XUM8ScNGekD1czdZlB6xg53sG6DjrIAg7Gd74fvpgBBGsk0cb5p7\n0Vfs1HpsDlJrhAI6ozjvcNDct6GCJ59cH4z/BGvYj69ALAw0isbFDzNNfaQb\nAkx8ajuQza/oVLaVeCRhEVksgJC5np2D8x+GJlu02Y+Ln62SZT+z6aJuqzS8\nolUpruQs0wLGv/Y6Z3nrFYnGuYCjyDF3FtWVNI7p9Qix/BfMSQAkX21mag2U\nKPqadxE+Yyz9jILbAhSuxhQCXuwb2gF6zFKxdXtkWZX9CSBZYHf20p5csL6g\n1d1Fkam0JPy3PbC8FtHvsboIfK4SVp5HhNjPBv+ZtKLIc/hladCtOF3DrY2w\nCQTkl5mnMsJId4YnFafs1w52zpqxYx13mny233MtRVERwbHCy9u/clrsMHer\njO9SboM+YoZVbH0cX77t7hJ3zCCjhkZ6k7K1BCp1ElRe1AZEHh6c4QqyeBur\nWqiK/yUJvzbq9JMFp/bEps5LNRQsfQBjpKfolhbLlk/89oSsDEIyhIirlw7e\nwPUj\r\n=r/9i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"20e2000d9ec732c7cdd0b5c15381f0a55f778036","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/rtl":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/shape":"11.0.0-canary.f5f1b613c.0","@material/theme":"11.0.0-canary.f5f1b613c.0","@material/button":"11.0.0-canary.f5f1b613c.0","@material/ripple":"11.0.0-canary.f5f1b613c.0","@material/typography":"11.0.0-canary.f5f1b613c.0","@material/feature-targeting":"11.0.0-canary.f5f1b613c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f5f1b613c.0_1614891047856_0.5385632531268252","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/banner","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.606e767ef.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e963ce93d113f8c61cab7954e7b3db3b90c31e27","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.606e767ef.0.tgz","fileCount":41,"integrity":"sha512-RboSGBHPnHuXNFi1tqhSYSycc96Pf8T+jGNtdNeURIWm0tS5ZEX+DJFT6wueNZqAVblqllOKp6c8XPEK34LXQg==","signatures":[{"sig":"MEQCIBpgBm043tGOeTt8OS8KEwpiKFy3Dksz2Q6bkikbWEibAiBsq3Sufy4lVZ2EmSOuuOILN4uz4ZiLmUt3yMpyGCzexQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVVSCRA9TVsSAnZWagAA+0cP/0DcH2hc968CRjTxDu+s\nb6nVxUDEfG1VFL+TROyCsx5NckP1Ovu9IJQzXQP2bxMCXCx6dW1dqaNwtnL2\ntPg8KZBZKUkzdA+USk0xBl4Mbj1pLnmg8s1PrZrehjOWMWDzhYsjL/fSRdpS\ndfSk0Mm+XaKwbJNBUeUt27PwVa1SbzMus+XxWXRVsIbYsAaoFsHe6ZzjY6+d\nemwUbZa0ffVsUpxN/aIw9HJixdyedJy5Pburm0+EdJmyftN2vp1Yx91awm2V\nk4nl10pR6wYDY8QQXH+l624OmcV/pTJnPsQBXMCtcyAM/WzGUbrCauOTIhiG\nhrYooy1x6yssp4PkFzWHSqkSfsnWWPaIedhY0PfXWHme6Lzoo4inOK2jrX12\n13n1jrypHjuuv1oWN3JmYvFeHLK5JXIwGb8IR6ZIGvIVjEjAD/YAaoTOzwWQ\ntLSbwWyhdfad/935/ZxXOaPHY6VlhKbY7jC4Ia4vDilZyj4vuB9xSkuAkoMS\nw2kySsmCMXOFc+CKUpPDAJ94SBk64shVePgS3XPPe+77Yx1AJwxv8NsvyDJ7\nMrjhQY98F0JLJ1iicx/PaN9r/b68ucHkuaReAm2OfEWfvzySchMXCiZ4GgoY\nsoFW9PLf1nXfX+0fhI6cAUG5tCu1N+djATC75klPi4sPNMh2KlVLnwoKhsF+\nNuDu\r\n=cZGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"34c41b3553e1ca4ee49c0c36a1685f3f462d33ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/rtl":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/shape":"11.0.0-canary.606e767ef.0","@material/theme":"11.0.0-canary.606e767ef.0","@material/button":"11.0.0-canary.606e767ef.0","@material/ripple":"11.0.0-canary.606e767ef.0","@material/typography":"11.0.0-canary.606e767ef.0","@material/feature-targeting":"11.0.0-canary.606e767ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.606e767ef.0_1614894418112_0.708778896782976","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/banner","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f77a4dd1a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9945f60f3f762ce74e333bbd5a31c4b3493b36b7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":41,"integrity":"sha512-qAHx1vdXh0JcDPOkr2GYPjuLeEtfTmsEWv29TUo34+d1ezlB+++TE5vdiUFMUJS66rwbwwj9QzRJ2UBqtlC0Kg==","signatures":[{"sig":"MEUCICHT6agoO5Mp49AD+O+v3MaQMAEmKzcEyg/CXBOoyglIAiEA+m6N5/MxKOPCQKf6BrUHXLGaiNxqA9pA0iWZBDc48iA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwfmCRA9TVsSAnZWagAArQkQAJmeUJl2E8LpIRzKSGO9\n6C2uSYxwIq5euVVElEQ7BLaF5Jsc94+0sIYtiwDc1RqOogkeVQtffy6I1+96\nN26bdFcfm4u6JrGxLIfpC7cngmyAgaLWKVnlhqHG3Htorr6ZOaiLt5gLlB0Q\n9ATJlU2XVCoKIEhRKIzBnLs3s3cEZ4LnPSKbQEJ1ie+RRiOCcW/4q2o9qO9X\nX9pVOn7foYU+Atk3nmcqZXyn2eZB7dTWFeH64Hz9aScARpDkH/8Kf2mwHr38\nBUAh5f0rC3GSHvL4kWW+jRrOalfguCX72R7B1txVnJIz3o600hIEuuSNdzqh\n0BV4CNrOBiHOCM+uDjKNDaBvQT6GdlqzmVablndd96Txvprsdev8ceuEy8Bb\nQyUJh6IlT6YD7boUkuh1AMVF84Q94lTdOFNCVfdL7duzTxbbrOOd+j/TFu7Q\neFrKglslkLmgSVhuXH7v43s8/tQZ6kcczxhUwkfuEodECio3kJJZ6uvwMUv5\nI7am2/ea2omrhvOVLIJeLQeOUSOuFVvckRMWXv+hgexWE3LQ8fk5MTB34jqU\n99T5Bxtt5p2mVV5UNubAk+AZrzbJjhiXtbj9PwtWOZC9NLlPzwtTZVYCYUIv\nZ4Xzut5/1icPkMIaInudI2KaEp9SX9Cqp4FkqABsSlwEY8u+w2M9RnUyZmCp\n5KzN\r\n=adoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9a729bc3e368dfd8685190e8460ffef16eac8947","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/rtl":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/shape":"11.0.0-canary.f77a4dd1a.0","@material/theme":"11.0.0-canary.f77a4dd1a.0","@material/button":"11.0.0-canary.f77a4dd1a.0","@material/ripple":"11.0.0-canary.f77a4dd1a.0","@material/typography":"11.0.0-canary.f77a4dd1a.0","@material/feature-targeting":"11.0.0-canary.f77a4dd1a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f77a4dd1a.0_1615005670411_0.3756071982922644","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/banner","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.2d6ba2c23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49e1add735c97d21cc15b070f73b1c39780e01a8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":41,"integrity":"sha512-/R7iEAp/YGkWsnaFkKrY0IjEHV8jGfE4YBY1C4A6M22qwd3yQ/v1P/Hix+gQ4DXu0OU2K8PO5Gi9AzC9YNXvLQ==","signatures":[{"sig":"MEUCIQCIRz6sA4n14nmuS0Z0k9r0QPZ0PUuADqbFOGoy1hmqRAIgOeO7BPopaLdx4xUqMF4OvysUXml2p8Ouu80TmLtGLlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqkCCRA9TVsSAnZWagAAHjEP/RbkMn9ssPi7TjnsoF1a\nxsImzE/WR2wlAzjj7RVNVjshIhT+jlc8vuUWpbI7AkqBd0HxtBCn+vCz5lAe\nZgnYYzMQYc8uqS9AsF/Dal3oZcEvTqYD3KxHM4ndlZOzjoQIoOH90FmtWSJp\nzCHu/MsiaSbfoO7psAyFr/iN3o6eDttwHpGoVrs/sTjtE7qnVreCr6qcSxHC\nAuKFcrkvus8vZedp/kQ0qt0fSlsC9vOgm41LCa7G4V7s9ST9f66YCt4ger7g\no+SAS258+/grGdmfVtzX8Yiz4otBbgM0CZefF1AH76Wmhq3bB1pPP6Ge6cxM\n/uAWP0CjOEhWx1wry24+hvVi8gc1fM6h6KIX75uqJKZn3Bqyi4giH+SRCaIB\n7JA920LTx8kW8KyvHU1ze+27EfXrz/p6CoXnTsUPDjN51p05tdylrv0rzk71\nU8qqdFvICZmSXTf2TCEkurJUwWDb6PhktTz1tw4YxLAELZ08SD159vMqcp6k\n0ai0lSEYM/W2G7XckwrWaYx2pEbT/pOW7pAPNQ3iwdxN1wmEeVymq5VHRZn/\nWH2pKr3y/dKn90ttk/iRNWWMdNVEUFva6nAsu/8T3xSy206ISP+EVqrBOZDb\nPff3htOY9i4EG+DC86qoghAL5YddHYWP1NMJrg9AP0Vz7NZNGhE2lAzvMOCI\n4JIK\r\n=8LrJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a0b889753d981e10bf70b9bcaead70c1549cf865","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/rtl":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/shape":"11.0.0-canary.2d6ba2c23.0","@material/theme":"11.0.0-canary.2d6ba2c23.0","@material/button":"11.0.0-canary.2d6ba2c23.0","@material/ripple":"11.0.0-canary.2d6ba2c23.0","@material/typography":"11.0.0-canary.2d6ba2c23.0","@material/feature-targeting":"11.0.0-canary.2d6ba2c23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.2d6ba2c23.0_1615243521894_0.9466022951838904","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/banner","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.7522dcaca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7941fe92f2d5c17a090240efbfc02de9480584a7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.7522dcaca.0.tgz","fileCount":41,"integrity":"sha512-5Y4sxvsoC1dkkxTcRqSbTmeQdyu1qEBZ+6T58ICrAYrwBnL+yZojevnpE9iizW96wybNcqAig7K2DlKodobj/A==","signatures":[{"sig":"MEUCIQDu74jmhOjUCJhio7/0l4JaRa6/sfd2QP4kWw5YKn4CRAIgAx2ZbpvcNs5e3qualxfubOxfLs8ZvRsJlAw+jnKC8qY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsE9CRA9TVsSAnZWagAAW14P/3cxg0Drz2hbAloQDCXP\nQJjLRLF22czOZGEkP26iJ8yUgiX83wmCdS8hvI1H9AtwyAAXRKSIqqtvj8yY\nxDxHhbzr54V4p5p825rrc6Fzyd6NC0aI8epuca5lU3+EXAOXbbRZHBJHQZSU\n527PVh+9GlD8ANy793VFWd3tpZTKj83atcqNXPf47NxnOvjtPy0l2Ye63Si1\n7AtkP6SM1T9HLbb0ULiVTH/KYPVy+0b7uQKR4sDD+9lznzBwyfXEDwUpyB+L\nebIdfH1YdbeJYKPeGJystn9Zyq9zUdRn5d5ZiooFH3hkbUptDg4wDSie3SRI\nn0PpaqbzIA2c9qan5IsMu+Ossq7MpZcDykUXlBZ8P35B896R7kMMWwhl8Fhe\nwZDeCcYPau4uXi4KCV0RBCNxP58+KYKT5U9VQ6J5gwryE8yxMz4OV9oANECt\nrdDwjjSodkgmdnWCvDbIEcZgbRBFXlDZR/Y6be5sI4jnQvT8Z056pxrw1GI6\nkg3vhPGPE+RxuwesGxX5nd+fo2AsJwE1YmhkHFS11uivaRsW/JStIxecdOd4\nJ0g8Y+MXRvJMsD1Em6W7IBm/SjvTibY+9KcrmR0gY8pm/EbMZQCddLI5Lzoh\nZpnPlc0pbeT2p1jSoSm6X/WFE9oJ3w3ysCgApPmf9BixvDNWSBeYg0IaJn/f\n3b8X\r\n=ZL7I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6e73ae404aecb0602a5da37f40b650181ac48062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/rtl":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/shape":"11.0.0-canary.7522dcaca.0","@material/theme":"11.0.0-canary.7522dcaca.0","@material/button":"11.0.0-canary.7522dcaca.0","@material/ripple":"11.0.0-canary.7522dcaca.0","@material/typography":"11.0.0-canary.7522dcaca.0","@material/feature-targeting":"11.0.0-canary.7522dcaca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.7522dcaca.0_1615249724572_0.6773645106616399","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/banner","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.5c0ab7401.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1614dbcb6dd795df10a42d0f793848e36d815d86","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.5c0ab7401.0.tgz","fileCount":41,"integrity":"sha512-ZmqfFje8Sn6A+ljCmiKsjpcADdNtisc200q18WIUvq12jgl/DbcOGPLVmgBtQCDhk0v49BnI2fOZ5aouA7pEvg==","signatures":[{"sig":"MEYCIQCCGp2Tam8yN0a95oV/Bi3DcbkDKGDjxc4PLz005k5dDwIhALz7Rx/JqrahmLNZDECJp6aWu/+xltjp/NEfC2lvPdTI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/xzCRA9TVsSAnZWagAAIU8P/3EHOnkDOly/awNSl6Bg\nKNYe2FKJIY1g26IEDxf/Dn2h1epGR5Ie1xvGJaDsaR01VFxbO7cYu8KKuKqv\nNPzjoMWwWwpNFCIF9sIcu8Di5UrA7jlvUKSfuBb7V8+EJznMb867PwZAlLPi\n4XlEdxKM6d5O+LSzyE61cQqMcZXJNdhfLJu5XIjA9OvNXLdo5D4m5QDlOrFi\n6QomdIS1LNr969f6pP4o+in3YDPMJOqRmf4HYnRGmLtl8Lq6UEjQqXe0vMgG\n5jWOpCHCIDoKyaAq2bXi26q9m8Qa6yQSmF3yEqkZtgQkR29gjK+Wibp2WGsR\n1n6rLTCbel0hpClFTnBk0BeSPkMmLc6hllLV7Wbsd3YWHGnm0on2/zOqwXF0\nq22Wlpz5+/tmTCre6leEdD0iiVHf9P51GhhHzwgqjR7smlwZ/vGGwM0UiN96\nBJW8VdP1VnCy+bBsTleph0FNPP8l6u395hJ1dyToNx8cbi+7ikoOFLEVG1zx\nM7o8OSZmvzioFdVNGac7dBUM14OF9GVFQH6MYsg49L5rzYwO5n8jrX+ygtjg\n8sx3BACxhN4pVIPswK7G2PYam0mMF/gxr4j3jG3xSX9JHbP3V82iwJUoZns7\nFNzH9ZjY9yAGsBfwNMoPnfzLh52IMCPm74Gkzbf6vPSXwcUwC15Tk7eAqvXx\nncuL\r\n=iReZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"95ff5a1121ca15128776896b8e4759594ec51246","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/rtl":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/shape":"11.0.0-canary.5c0ab7401.0","@material/theme":"11.0.0-canary.5c0ab7401.0","@material/button":"11.0.0-canary.5c0ab7401.0","@material/ripple":"11.0.0-canary.5c0ab7401.0","@material/typography":"11.0.0-canary.5c0ab7401.0","@material/feature-targeting":"11.0.0-canary.5c0ab7401.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.5c0ab7401.0_1615330419478_0.13809870875678687","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/banner","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.59010b6dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b89640f17f47c30c1ac2f549b76ffa945a420c1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.59010b6dc.0.tgz","fileCount":41,"integrity":"sha512-hj846lYail2mW7nX3Sujm9A/QLQp9ioPEJxhuHYnPOrPX4Nv0U93huQvTg97LvfnsKZuFPceIGUK0XT/jmxmjg==","signatures":[{"sig":"MEQCIBPmNlNWSX+Q+1+xuLpbUMVRM4F7fhKTJ/7pq/yNxqPeAiBRM7gyGFCc3GzPbn6fiJKmt+0rdGqSZwlj9ROcGDAr3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPrBCRA9TVsSAnZWagAAq5wP/iTGjitMmLXwki4nD9bA\nY6Pk/qlyCDyeFAy+qqt6QiEk+bBFqFV3U2AdSxWu4JTqqPVB+TQIg2QrbUzW\nc3Lz2gDpUi3uudLNBJgS++Sv+SATgZVzUeXfpZ0P+nuYUppzSnL6RwVIRZSi\nD7FlseA5x2oBxdyJaBuwCXL1xJIPaKkW144Esv+ljPJDk8C0a7EFEIXiwX5t\n+BcCJyLaRNun7RdnhOEBhguec6M+17nsRz2fRa8Pcw8C5T5iGB1GbrkdFtaT\nSXt0NLo6WTPr99BElwIKb1RO0Pcp/5ra7JQTcLwugT6oh7e0k6EN5CvpTkAF\naTQoe52y5ZSETf/OjrTiy9R9c0yUmmVXX8rBlS0sb3DX29VZSnX2CiLqD9Yc\nAQ65HsTUZ9nZ5gC+i7QlbTazXC4OTjsvKAaqjadc06y0tr2oH/UfmXb79NlD\nQOY1+2cWTWI13tMqyryhYvhyYY3P3FoIZdvBc7gMgLMYo/fdP4zlx7hbYj+f\nHaFQfCFyY7qvMKAxaBtQ8zBIF+ZNuU6E7PbSSMIlEtgu+NvI+g9cYaEC+Kkg\nFOhLIYHQjklh0M7a2PkPZd4HUBe/ebM19T4Lf7td5hzuOndlijz4iAvtLIvH\nc9jyZ23HyqAiXjZ2D0YtGuA/5wZq0wQPBy1gZLW3SgXRyttj+qg4yx3kGDIU\nFwNA\r\n=X4tP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e697574285a5102f4c1e5002a85ae33a3bf2210b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/rtl":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/shape":"11.0.0-canary.59010b6dc.0","@material/theme":"11.0.0-canary.59010b6dc.0","@material/button":"11.0.0-canary.59010b6dc.0","@material/ripple":"11.0.0-canary.59010b6dc.0","@material/typography":"11.0.0-canary.59010b6dc.0","@material/feature-targeting":"11.0.0-canary.59010b6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.59010b6dc.0_1615395521319_0.22225880256885722","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/banner","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.9e52f5544.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b63a8bff5078fc78029029cd1b0f33387a2b9a7d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.9e52f5544.0.tgz","fileCount":41,"integrity":"sha512-+/hZ+o3hgckBCsHtsCG92t7hKI9UGvndKynJumM61o7HbtipYdfPl4nC/XMEI+OhcBl1BfglOPRKnQIPW13PEw==","signatures":[{"sig":"MEYCIQCLd0+OVQuk0q/msA/7yI74wNSHcJoKFNY0kbiccjhmtQIhAMdzEXGZO09qQljXGrKiwJODyVpiPVrjXDmqV0AXsnyg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVWbCRA9TVsSAnZWagAAhBoP/2X0T690Kiq2SjNODZyZ\nCfLa4thtwMg9x4Wnxdy+l6KMZeITf9eOt74mQ6fLbMGObS0BZ3ZhUWEROuz5\nnNYVs1WyJky8PZLZEFUi5Pk3hjrcEyPdPsJB0tHd5E+UPNwKxb3JbF3dwV9w\nALQtel2qhbmwOiiykXFGOAkts+HKKuhxBc16x1VCwrqOVgujz8Dq5XMTFskA\nlBvm8TuFcqbl+pNvlvhmp9mnMfMBXCfEMOyB1YTkjeZKW7SgiQ/yc3ku2P4q\nhT2eVfmprEwoc9n1/GXz7R0xRXWZZPMHPhvgCRJKms2o2bkd44aP/nkHPAiI\nm9/o9IKTZx6wpz8o3Cra+614dUYTxD4n0Vy7bwlshiIGssUdDGepZWR5p3MJ\nGvlM7n6qAPUqT0/Lh5PSDPnAEyigteDulM+K+Q1/ptYyopzbKGfvcn+F/JCM\nXyOr9/9OR0J9nqLaIaOCvIl2HUhTdo9USM2dbp78yskqrOh65VbUQ3lykfRH\nLthD7kfgWhG1RBB8hDaCZSQbaJBatTA0V3QO5DqgsAsmuxRIEhctiwR151GF\nDo5sAohNPXJk/DozHhqJiB1PSxFQpFhipkedHA9MKPJ9gYnn8vB/MOOJienh\nzsexUz3JQwB15ARzu8sXvq5abVBi9k9yIYBe7nNtSX4iNHORf6DD39mu7o37\nYHRO\r\n=Va1J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4763f125770ec8e3a6ea4d8f1f5f607371847e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/rtl":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/shape":"11.0.0-canary.9e52f5544.0","@material/theme":"11.0.0-canary.9e52f5544.0","@material/button":"11.0.0-canary.9e52f5544.0","@material/ripple":"11.0.0-canary.9e52f5544.0","@material/typography":"11.0.0-canary.9e52f5544.0","@material/feature-targeting":"11.0.0-canary.9e52f5544.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.9e52f5544.0_1615418778762_0.26914107765023276","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/banner","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.a678806f5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fca88cbdbdf7d3160c04ddb314c1b0a88e5bafd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.a678806f5.0.tgz","fileCount":41,"integrity":"sha512-QPmJ7EwuUAXPa0RPUqUv/mlIfYb7dzWLbPtcZV7zutoKFhJNhsoRmUZhgD6MmZ7mI9rwEaaI0JZk3N5vRouA1g==","signatures":[{"sig":"MEUCIQC1Cs/L+mA/L6MyeVzl3jm1pC1vhkeM1ruiIngMp5lcOwIgcKEUf9GhGthMxdzc8poZO4nXwxfcaAxdWI/GwQHMjgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXeJCRA9TVsSAnZWagAA/MMP/17ythae6v0B5/C1lPMK\nHNFyym4NQRdajOOktfA3qmPYTXb7sF/R7AmsqHnDZtHMobsFYbCBKC9Ter6N\n18pQW2CvcBO6mHc4uF4HbJCepVytSa8Xxje5wdlnMnmggcUgjFlFAXZ5kvvW\nTxb0Rz/FiM7BjQ4ZduRZSQMj5tcX1JB0HDS8cBZgVdmCw+VcxPBTxYvSeXhB\n9VYrBdmKJQsgQ1t412MtFDPgx46UpB5Kj65Cw777F0DlE45XRIWbla/N6wnQ\nZcbGkrqlFdIaJep6EkqKMqp6lRn4rYnIKlNRqZLd4tS4m6nH3h3l/kNtTIPz\n6TPsw3vlettD7x1VjVX6GEz/cZZVYGeK2S0L+J4LkPQORreLwdbB5tae9WgF\nPqLZt7Z8adlQ4MTu9rEzYaiUfiPN4vtYyCEPmTshlm78LPXs2xxJc8Q/mg6e\nyLivYD/ZpBlRfpcTh/DUCSBf/yd+BgwLgqAbA4M1U7Wg2NIWfS5JeG3MiBHK\nimhi6hZs43aRI6x4FDE6V9SVBcQFFl77WZK1fhRtG5oPkHuCUAF8TMY84LPb\nnj25zKt4QT4Ie6iaO2PdqDWtTOr4OXl7nu/B+yeOS8+IVxtUk+RkXk1imKur\n2DbuP7rZ6iIAF78GKxM8/zy3DyVcwDwX6/V6qWh/AFyiaVnrQVhHbI6mpdNT\n5vM1\r\n=JCkF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a724ed1e64d54989ee4c27c71935f90fd5614f3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/rtl":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/shape":"11.0.0-canary.a678806f5.0","@material/theme":"11.0.0-canary.a678806f5.0","@material/button":"11.0.0-canary.a678806f5.0","@material/ripple":"11.0.0-canary.a678806f5.0","@material/typography":"11.0.0-canary.a678806f5.0","@material/feature-targeting":"11.0.0-canary.a678806f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.a678806f5.0_1615427465464_0.20525991917421815","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/banner","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.b2d22df5b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"009ce4d61be9163aaa205fbbe49580350d3861ef","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.b2d22df5b.0.tgz","fileCount":41,"integrity":"sha512-c/73YNCS7lRZ1ZvTMsWOrgi6LftBCMaVkIwaVKY0+7ZXJNudIdJaTaIe18qMZ+F4Y7w980top7pZD4YTq1edkw==","signatures":[{"sig":"MEYCIQCCn/HC/4Z9fHCB70yD3P99RcPg1QiymkAgopHm8G4LnAIhANhl2lfgszQH/Nai99lkHQI/7iHkS0lJZrJm4reREPQR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk2RCRA9TVsSAnZWagAAI0sQAJLGtNP6vd2sxkWKUCkU\nylMnpKAmEyZJbhsgxX9R5GbdF/1eIRwvQgEanoehIpEMKX7VeJIUr6wWk5Lu\n+z55f+Na7jwxsLWFfdhhqxouhfjH7AtYVoAw/JVKYWtumEQOGLtRCKdgJ65q\n48Ps6EVsPoTjnAGgRU4eknRGUTDe16NY1H2Apfu7QT8KA7WRF7inaC+XDyP+\n6urvZiWwQkT0pmvmPxj9URSFewNUrwZSrYqaCstuASr7L2gA75F8kD2p+3QS\nB3S086xk1YPHOUD0EHnum3wjkce8dpXnMjC7q++1g2E+1VaejC93ROm3V+Rj\nz6DrUqvhiqkgHlAyE7Cn+fv3Y41Z+fvkz9A2qFK5v5XwI7jqqs9dPHXuB3uG\nNmMSc8ajDgQyWU18XBCnl71PVgso4ofMsqvR6Sw/W31l/4oW1xlwLABNE+pb\nIlk2kpOhtoE3yArFAqlQYUnfLe0WzvZDSDm+hIskSkLebcQfyA0wAwiwbWr1\nEg8LiFK0KNOVK86yC+RvDebkpBUFrJlpHmdxD3PWO2BToj1AXmB6TEOpx1bu\nhtQm3gJLlVIqUtWMecTfA9YtO2YokjQzjSkbYL3MUlOv7+/nD5bwQVVHzHsK\nSX3HoW+tj4KfijXk6FWRtT5vQy/jKnRcyhpSk6MYnPxPCuMZReO80zsQKaLM\niyei\r\n=1+tR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5c38fa8d841f5b293e55e4a22202bc6ea8220874","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/rtl":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/shape":"11.0.0-canary.b2d22df5b.0","@material/theme":"11.0.0-canary.b2d22df5b.0","@material/button":"11.0.0-canary.b2d22df5b.0","@material/ripple":"11.0.0-canary.b2d22df5b.0","@material/typography":"11.0.0-canary.b2d22df5b.0","@material/feature-targeting":"11.0.0-canary.b2d22df5b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.b2d22df5b.0_1615482256915_0.7941773809923276","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/banner","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.81911b707.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3c63a22ed051ae443b932145142d44ccd9c4d743","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.81911b707.0.tgz","fileCount":41,"integrity":"sha512-VcDGVTIAk1oy4jd/EjCvnmy8Hcio7fWuLJNLdTtYEqhmYHA6gZrLUnCrjn+UrJS+qRxN7LehME36gKwh+1ib7A==","signatures":[{"sig":"MEUCIDWX9MfxmNzUJj1VwWNmkXYB7Ir0ZxV5sETjZB+88d6MAiEA7R3wB5JPHgJH45uDD7e7jfy8ClbLMlw3YPIcbDyHkvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmBhCRA9TVsSAnZWagAAuM0P/2+hkh7TUk21jMwAqooL\nBSzrXSvcUlI6gZgJ+18SxUu79mtm9BgqWZOxfxX9mv/asEpHeviCMypYSV1+\ny8Pp6mPs6ihXU3j4HQIH2OLW6A13fpxG/5vXVEC+fKLAEaHvA8mv05lLqUbN\nUVy2ACRUr4sZrOY2IVkQCif0+SeUqrzQLA+dGZaa52Kv11y43wKS3LUsD5/+\nxQ/sb6mvUm7O5Ihua5ogFrCXTsE307pGHF9tCRHBPDxF7QoBdc89LujUUTRi\nLKR4bWsrb+u2htu/KQITHcvvUWOaPw3T/x6hCDtxWBcVrukoDh0KFztJmZJY\ndGfoAYNxPq6D9uzN+xkZZkeSevk2aaG2GAntatyNBNlpzB4S4ohZFy7xo3dx\n5P+pQPDcy259WUQr4hqOjxzgLRP0rxHE6xrXhQUYKZJjbqYjEcQOJCEGSIFF\n66hTXpZOlL4BfpwgidKmHwrIcKCDtwyYHYt/76RF1ffwUAQKjlRwvjn5eD02\nczSp+Z+N+FuFmpUtIC7EyQhUMYS9FNqgg5rro+8l2ugfUZZ8mqwfbm1JMj9d\nfJ3OhORantWkHcCwHLOf79QITTMj8/gUWGTi/4qCMupDHiJe90XqZlBhhK6G\nDXVxfI3mrg/LGJzEwnDD/VxMMMvqhb8NCcmNk/AYyXWtib87mjK119Dj8Ztg\nrIzY\r\n=4dhi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3c1bd5b1d6d6453c4f616633e1d16b1fe0812814","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/rtl":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/shape":"11.0.0-canary.81911b707.0","@material/theme":"11.0.0-canary.81911b707.0","@material/button":"11.0.0-canary.81911b707.0","@material/ripple":"11.0.0-canary.81911b707.0","@material/typography":"11.0.0-canary.81911b707.0","@material/feature-targeting":"11.0.0-canary.81911b707.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.81911b707.0_1615487072763_0.9896266849908573","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/banner","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.9eeb35c38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98dd80122212bad884d69ad137c9e1785a1b11de","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.9eeb35c38.0.tgz","fileCount":41,"integrity":"sha512-B0oyrb1Wm6rJ1WvR19kS+TcoCcGCc7fuE6rR/Mj4EX+B02iCuoY4YdFn3Mo83xcji1VhK8TPxqQja7/fHYA/sA==","signatures":[{"sig":"MEYCIQDWbXxC7OR8TtGBAXFHSdFe5aL8NA+AxsxMOAcQX/Z+4AIhAMJ/rcaewcTfMvsAqPYmPLME3TDf5dKTDGM90T8Y4iP+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnGcCRA9TVsSAnZWagAA5YcP/3VQc4Cj5UT/9DrJscy+\norINGnv3r0Of/Q05Q5PQzLZRzCNYOCDjn29HOuef/n1fZvSEZwt02U9IdEfM\n5gx3t0eY1HkeRVxTEjBrfSp0XWk51KNtPrp/914P6AuX1s1EbUOLexZaMRLG\n9faNWerSnXilHcN4+6PMHUfL2D6Yxa9xQCfJilsbHEm53vLGnKelM97nUyuG\nO+kaGXwYj+gCMtDxxSZigu0F0v3ovnxlirpCvlt7nSx+Of6IE8tKCp2fEM08\n0kiEH1mlL2iNeqPC/HXRpmjpONJqIfMhSd4Bilu+P7NgV9vTXrpow4bmU5mL\ngD18Vzqthh3PyVzxWdCsI5l7nADP8WGlCiEkGL43wABSM1krYRPNIWhR4cmb\nUt2bp5Hquy4VdhD/dJkbY2f1CLoW77gur1nTa4AjaalUveL6Yr0E4YP6r1Hq\nWxgwDyhTWAYcfEk/FY3QNs0j0GurXRxI7gZQucFYmcP7ljvqSKuVTSRRZi2x\nLkvPCv+ebzH423GEscS3+DmqTKVphxlNkNDtI4fnzMvC48twEcaKB4HnoPNx\nD4V0dONvwyrZMx3dxhX7a+UM4heWjVQ1KfGlOriEzxwqbNbdXVUnvc/dRWQ6\nZjfmo5tEsnI8+ATnQ90qwqg55dIdCFYOuX6NCXwuNLtpe6HblPguMaFzUIAb\nOW0m\r\n=ooMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"147a2a556e5155bedce0b0f267f64c26cf87d0bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/rtl":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/shape":"11.0.0-canary.9eeb35c38.0","@material/theme":"11.0.0-canary.9eeb35c38.0","@material/button":"11.0.0-canary.9eeb35c38.0","@material/ripple":"11.0.0-canary.9eeb35c38.0","@material/typography":"11.0.0-canary.9eeb35c38.0","@material/feature-targeting":"11.0.0-canary.9eeb35c38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.9eeb35c38.0_1615491483861_0.5410198412930609","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/banner","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.12be3e95a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"552696151069af56f126630a098026551e16b8b2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.12be3e95a.0.tgz","fileCount":41,"integrity":"sha512-H7a/wof7eonB4XTs9yzcOTxVQ+Q6NURBJIDMG6zWaRHBItXgL36ybBLZJhWd7V6fh5BgVAegLRlOMEu/xjveUg==","signatures":[{"sig":"MEYCIQDc0gICWGNGyoicZ88jBT8RZ8GUpVxqPWig6VrQhSM5gAIhAIF3bYd92guD5NxYxUZipvCvysTQS66MDTjJ4sHGCB8m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSndiCRA9TVsSAnZWagAAMg8QAIxNTm3s9EPyVDLBIxgX\naJqSX0xib8XO1ymQf5bb1AF8yWba4FwDVFpMym6TLZpSkwfwb7qLvmzF3Hze\nRduWzKwZYnCcvwEjUBLEqi24qdrPjkaLOiuTv4jEDiIaIs90U7Jigiog+RDs\nId7Yn3LqH3HzSHAxC8ToL1EbJAMKZl9lA3S/jPFKKIZ/pnQFgG0VC20n60ci\nfgXx08+GQOdhfRSO5g4zqQy67lKdekZFp2FpaQVwOf5kFdbAG9AyR2juISSo\nwmBMARaZnuut5X7A0bWCLWJZ7vw+PFyAHIC9Sq+URqZUYg1jUqF45cZ32fcm\nKPR7jmcNKRbp3Suq8YvrHI2L7uyxwgBBudL4u8v4njPWgofeLzVmMHTKlZKX\npuiFM3UqEY+vx+33yLfWwIyaFrofiXCzoGzmghpJGpOomqzu3e929OcRAPys\nyECHCMDQEdzU4sIrZY8PY9eULX1wvay3VCWb3bOcDayiQc8WD+7tYKviFMRb\nK2SPmG5JkZEB0UpkapIJ+1/k+UdG4AvwNh4bW3KJXbI61d73y62wRIxH3sFO\nT2SmDIsq8fKa5ysbEIeeFUFLBIak03ba7p6yrPK4y0Ye+Nrv3GGvK0pR9aCl\ncVaehqPazo91xeZK2lIbTpz+jxYBnTcxC7bsWUWXX/y9z2zkbs8K4MWU9t1z\nlJSw\r\n=tKSv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"883077446617b632d698e09818dc9d5903a7586e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/rtl":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/shape":"11.0.0-canary.12be3e95a.0","@material/theme":"11.0.0-canary.12be3e95a.0","@material/button":"11.0.0-canary.12be3e95a.0","@material/ripple":"11.0.0-canary.12be3e95a.0","@material/typography":"11.0.0-canary.12be3e95a.0","@material/feature-targeting":"11.0.0-canary.12be3e95a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.12be3e95a.0_1615492961715_0.11794187683769386","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/banner","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.e683bdf4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56b9fc000a469cbeb028acb45be9346a3e2a8839","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.e683bdf4a.0.tgz","fileCount":41,"integrity":"sha512-e4wrkFBVwK6AuHuFAH2lgdYDhUc2Muq17vDf00zecvjpU1TlLIcz6+AZ+RCKfFVdHLB2hB9JvSYpJ2H91xVniQ==","signatures":[{"sig":"MEUCIFC5sU9lBy+m09R70SJyjX1tte1tzvmT++Ks0jsZcIygAiEA/Rk5Yd3B4teYinSkh80BxEwUwbCCU1cqOvYxhs2ovm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnkpCRA9TVsSAnZWagAAwccP/23YgS+dIokBTt0TT6FS\nlld8gCJgiy8SnZH/4TiKMuMwmIGV2SZgJ4ZuYda0H7J7TTev6KfJGrohfT9X\nMO1iItL11AnIQB3xeI8wnsslRuzu/qecvRJtNl5OUUoatY6WM4jNebK8OptF\nA9zXQZubwr7Aj/98gISWnk8xDGu5ZlWAxMzapRKKLrOduRSLp1Atow1uHzzF\n0+dCiQ4jfn5Saw1m6gTpf1PO6mBjQCAxuHbXHP2EHvkU/g7pVBvcw826D9uo\nVpvnVQDEhSQu40Ga8sErwsZDjbLhGMpBntQPR1IofJ89kxpMBHn/G6hmaLo8\n5T9Sxr+XdGQ8/SwvZDEEaZC/Hnh3V8OyTEu2cRLE9HUTFURnlNQt+hhUGEjl\nOnwcuDAFBk6wL9xp/9vp80abS9+Cx9KzWjLAsHUTuLpPlIPGTA34AhWiyXCT\n3LQukyh53Tw03DAg+ZAr0Aea9LXufKspfzf5OMHN0Hd2cH1clH3InuyPhYXN\nmPvjKYm5526hPAqdIwRPriLzJ/gTDQp+Q/wXJiYp2ukqng7ECui/SM95s47+\ncFRdAEhPuMoM7w8uAbllR00kmWA8pp0oUVuCvxltPxPt7P7chN5QwDUC9ZCb\nHOgXROTsAy93GAhMMvhqUNJ+4t2FjmQ4Cb+pm5keAJZ3R0RoI6H19+JL9WJa\nn5aW\r\n=0cJ6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0323fd7f39f825f8717fba8542628d111777ae35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/rtl":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/shape":"11.0.0-canary.e683bdf4a.0","@material/theme":"11.0.0-canary.e683bdf4a.0","@material/button":"11.0.0-canary.e683bdf4a.0","@material/ripple":"11.0.0-canary.e683bdf4a.0","@material/typography":"11.0.0-canary.e683bdf4a.0","@material/feature-targeting":"11.0.0-canary.e683bdf4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.e683bdf4a.0_1615493416666_0.0875030712327336","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/banner","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.a07b6d486.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e3c17f975d2ecae7b51670f7a50a72f4dd2814f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.a07b6d486.0.tgz","fileCount":41,"integrity":"sha512-OTkRqp5aX30lE5g/UVw9CEgN8Bh4GBvOiPhI0rMHMkw7eRW7gq3FiWO3/LegnS25q2lGfvIaW8NTbXAsKZhoDg==","signatures":[{"sig":"MEQCIBW+MXInOTWYsOZ0T8zZ+7akHmSq0ZVxn5Wbxyd8s2nnAiAVP4CDGIejBanOB3yGnyIq8YyDjs71YiOqYjgSbqyXFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn7bCRA9TVsSAnZWagAA9gIP/0YqRdc+59N/YRuDB8Ub\nYSVUBt5EPK4yjkSY7mDBeYTxPn6alV3xzuUAmgzhVpgaHD5UOmGuD7w05/SW\nfZiNRd9kM3THqonhcZGvPYgD4+UneeIfK3vAViQI+AkEqWe9wFq78KvK+1SE\nEL1oevX49S84/4JIE3hskmRWEkd+PQ2CNLPcoVWKMLa7YWfmvUpLbNJxoqQN\nVtXcg5v5h8aPxNpaJ1omCHYA8MSYqONLDZXYjyj0fOoBTtuSIbzpfFGEuNHu\nZAcG2Hc6rzG9hwRrfW0fm3P4ZBW1WFr+mVvejXXgtoEX8TkDc/zpBgpGDZ4Q\nOQVUtNALygE77zDLSK07D3PH/l0Utd/XEPXYd+MJilO8wc/zLJ/b0iJckY8Y\nCdJYfp4+NNIO+NoFHpoovfxUQoLG4ftbBclnZ6rjZ/+/wL3yPbxn4mNmvVWE\nqEHfHIP8i/20KC57jY4b87NGGsy8OiveEHCpzfDls5I4q71SGzT8lYKwm2fE\n89YRWjV4rannSR2ufSqxQ315TLAT+jKq1nhXbem+Oz80MhqygMP+gjYy34Cg\niNW3BHGni2rUOwS6E7ZAbEVXNx+znh37QRY2gmPmI5GlnqOiP+nIomKbckI7\nN0+cX9sIyqigc6tsw4BZi52C95C4g85+xSspAKnKqHWocb9w7Tpm5VWA4MeM\nT+TR\r\n=XbR8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"425bbecac77849f8786f0a32de18a168e1874c9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/rtl":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/shape":"11.0.0-canary.a07b6d486.0","@material/theme":"11.0.0-canary.a07b6d486.0","@material/button":"11.0.0-canary.a07b6d486.0","@material/ripple":"11.0.0-canary.a07b6d486.0","@material/typography":"11.0.0-canary.a07b6d486.0","@material/feature-targeting":"11.0.0-canary.a07b6d486.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.a07b6d486.0_1615494874961_0.5139693504711058","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/banner","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.1e0653477.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf3163da4af5c6ec527490146ce309725f54ab73","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.1e0653477.0.tgz","fileCount":41,"integrity":"sha512-wWS3JL+bmtIBrtbUdFAT0mqbV8Gu14KCVflskWdcWqge4oeZJO/NLWzlDbXbdZkMMDtRFt6GRkQLyhf7NKBm2Q==","signatures":[{"sig":"MEUCIBIR6HUriJ0MEvvh+Aw+3Fg1Xk8NFYeDefMnn6NnOqPeAiEAwZtAKSBLc0pmxmm+HutyPFnPqePhOzb4xHDLE7nltPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoCKCRA9TVsSAnZWagAAuk0P/2OhaW2Hr9O76jBMIpvu\n1GAuqMmUbJVRJLSMAdHOkkx2uYxtdutZYwPdiYeC9jiRcNKR3ptJT+u1/FS+\nCFeukMZ9mCWG+X+R7B/omr6Am1etWKyg6ZbpoTp7SZY7W+rzhfJFLIx/hdUE\n49adb7UT08F/ay/AunkPDxxVcuvPYP7h6Doupz0BTPJnJAKowJSbBEhQmlFp\nDGQzYEJJK0mlyqpOAQyUa9KG63ZHu+FxzY4J8wWfwegKS5Bqs2Z7WNKoU+gD\nzcpk3TX6q1ONkS8kC6AQN8nOjlVKH7geAJoZk1VA6zd/DzJOATBX6mWf9468\ndqUqd+lWDpYDfl1SVSDervXOGeFVydGptz/o+oM9hzfv8aBWe7SvgyqvZeWd\nhJlfFtdRO1HmI94cFGU7l5s6ci3ZCTqLxJehlZP86f/vWpop15N2Uu7j1V+T\nQLPbmowpkBFY1DO/d4swdM3rnicyNezDiEnqGhEskVmNGsqk8fh1F330FWpc\nS7kYbbjay3kMoZuOqRZTbjZIzKgxpf2xd2HctH3/twSCLaQNu+kJXTR0rG1o\n9SypIo1QGtiv0gC7FLzuQ+MPoILovrq8ZLxaDm6oOgeqboP81AApaSueFw2G\nudvkvtI7Q7YB+IwqZeIEaGgPJs8o8+Qw86jzdMagFO+3kboYnl2PHCLPu6eY\nXKZB\r\n=3FB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6130e0fb82d7c39da4ae1e02df8f0851da419fba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/rtl":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/shape":"11.0.0-canary.1e0653477.0","@material/theme":"11.0.0-canary.1e0653477.0","@material/button":"11.0.0-canary.1e0653477.0","@material/ripple":"11.0.0-canary.1e0653477.0","@material/typography":"11.0.0-canary.1e0653477.0","@material/feature-targeting":"11.0.0-canary.1e0653477.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.1e0653477.0_1615495306163_0.6553233964702141","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/banner","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.148e8cfcc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f8b47fad7ecf4e7361f35493601e53320c29dad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.148e8cfcc.0.tgz","fileCount":41,"integrity":"sha512-FvTU1vpB5iJBbgUcR+g1544/B9gMUgCs4i6Hit7WZlio82nRyYuQVl9JDHlBUnF4KQfseSX7aAUjgx8jRIqbpg==","signatures":[{"sig":"MEYCIQD5P/PbO7Up+pRMvMUY3DzJdXyDxkXy/R7sMevdIb0aWgIhAOj1PQBrvGKiRvPHtDIPuOUqQ9k3SUh17zSwN3vVzeu2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp2MCRA9TVsSAnZWagAAnKUP/1364CpANevax597RlWJ\n9PkNRirBSqdK3FwYXBG8W6c7Scfi3ES52cP8jhweRX5XoWzcAO9GSQZLkrmh\nFuSGaaT4zbohDvGo63QO2HavjYuCHP2oweuAT41pFkBWUcYoMbsBILU26535\nbT3CQs7LlOsgbETagyayr0cF+bzhNAJNAmbtxURFpiNS7aKMyMhXLTbC3ttZ\nl8ajMdo+z5bogMveGKwNEr9TiOrGTgL/W8VOOnQNFr17BxQyZTuZ6CnTRmMq\nd5W7Aqx4hhqB8JgsuypWK6Jumt2Ybfz4kpkeyEwRfDo6wqkrSIgBoeNKit6D\nuJwXNrIVSyroWUiyuEtcpJnRd86UHUFRSsaZcHyC+2FUSsV2/pOADTSCSn0/\n1iB4GZwMH/yd31GQMtZhOdpWZiHvkd0etKziYY3LwNd08MSl8AoUxMVj1T09\n64PrfGpLxWr/hVayAMaGrJJMkvxt0iQctjxcmEWIUTgCUmeanUIfTbSKrXBx\n/6RnVrMt/5I0FYZUbweKPuHIK394RhrO51Bc0QlOumlcPjQIdCzjrRE1waOz\nJkHyhcYEeb10bt9W9D/cT00FKo16lh+nNecLtRhVzfFMW6BmhCndmMGNNSJT\nrBqaE9lVDEAzNwqNHPGYU70rnmkIaqyk5bFURJX1TBdOZLsToZnNWigB9BX4\n7U4C\r\n=K3kG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2e686ac2d72b7a249bc4deb8b09742bba99ce581","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/rtl":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/shape":"11.0.0-canary.148e8cfcc.0","@material/theme":"11.0.0-canary.148e8cfcc.0","@material/button":"11.0.0-canary.148e8cfcc.0","@material/ripple":"11.0.0-canary.148e8cfcc.0","@material/typography":"11.0.0-canary.148e8cfcc.0","@material/feature-targeting":"11.0.0-canary.148e8cfcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.148e8cfcc.0_1615502731140_0.4771011107626302","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/banner","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.73a227194.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2078b648e4931a426e9d508c41124cd65dc49ce","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.73a227194.0.tgz","fileCount":41,"integrity":"sha512-ABHwsoKHzPkyt9nLQtx6hTRzgen/xm5T5HCs8BVYyjjf3bXl9EuSGzGmb2HMWdV//75HgLynGJb9Uaw4OJg4bw==","signatures":[{"sig":"MEYCIQCoTtXpVIIM5hY7QXc28AkYLVHzS4HJoJcrnON0jfhTmgIhALDynDuvNYWe+B4y/arr6ZB2bj8uvd1t/OzViv8v8ziy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrTyCRA9TVsSAnZWagAATpkP/3g4Hh+DrQRd4lcdZkjL\n0QbGBaOIj9gZj4lMhSp8ivYXPUtisG1aFLmBMokVWBCaPIlb6Sl2f8rm9+N3\n1hQ3l+ZufGvXHZxl62CgrUVxLHQupS9U6K28LgyJ43sX8BE/hg099q97mX4S\nAJoHv0sgYUHJtc6qRkskRFKO+SAJ9+xNhO0TYU+/oBK9bGJ4UgaYmWtLvihf\n7N8qkk/CF0xKohCIh1wEMcs7qo8TT14se+PN0uyre8eOHaJKDAGoN+Afch4D\nvxyp1z9XqvgWM3V6Brvr2XJ/KI3hejXI3EDSuolCGCxN/ZA4CA818SJOnbWP\n4V3VSjL8zx2TMH1j69/6E00NZbPrdD/qfgJxUhYBASw06dM1tcL6g1BYdcz8\nJrmboASHXizeomhuBoGrCoFTscXMBVU3IgEd9l3X296EiDJUXhzpMztNmBIx\nJfZlwOov/NXle4ph7+4qNs/aD3mN8DrDKjb/4xFucEQE8X8iKiJW72H6kiwC\nWzILKLn6Ao62hPYA5sRYsLA1CukVZ+YTs26+ZtEeWLf/ZDt2UVQyxntNWvZR\ncFWX5BTmlcZ52V04uSkhjYm8hOt7pAyogkKCjtHZ6pDcruvLnaCGm1EXlEDt\ndwOUm9fweUfdJZUlcylYnOh9PfjidEQHxps/1bh8JmjBMunpGCGbPHs/AVAt\n0yr+\r\n=4jBa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3bb5344393057d23abf5414ff61402a5091ac74b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/rtl":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/shape":"11.0.0-canary.73a227194.0","@material/theme":"11.0.0-canary.73a227194.0","@material/button":"11.0.0-canary.73a227194.0","@material/ripple":"11.0.0-canary.73a227194.0","@material/typography":"11.0.0-canary.73a227194.0","@material/feature-targeting":"11.0.0-canary.73a227194.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.73a227194.0_1615508722126_0.8769944947265649","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/banner","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f8579b7ea.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16acc79ac324bde02bde22c807ab18ad7cd6a162","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f8579b7ea.0.tgz","fileCount":41,"integrity":"sha512-ZNVsZYaedQFsyUx2OrcDkkhP2RyQdwUNMX1mAey2IoADyj5AYOH6SKNO419z85DhxtWSR6jW6ZK/lFrd2v3UdQ==","signatures":[{"sig":"MEQCIFtBoYOC1m9Gkd9plkO1GEZfb1PDnjhySOHIHuDLnohZAiBJMAL1/UXnNDJwoaNZVd+KmN7VakwMef4jxCecdhQTqw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB2lCRA9TVsSAnZWagAAVwYP/AjALcxxLJ6Wg7ZFRKvg\nU+6qWwmodA386t6rVDG+JveucjcFVoWCmc9yRR1+v3eHxgE9J1p9KN3LrYjW\nnd0+zmVnalUY7OtiVvkTxxAE7D5i3w8aIDKtqsfDUFMOsrmMzQp1qTu7VE5n\ntBbTGHi5Hv/pFoRh1YfqkPjxF5ygyuKT1SyJ99bYPB3FdbV8ILjmN33Wjwzo\nXwNaQOe6VfHLbV9AudMo3u5bRikDeXid0ZedSqGXFNn/f5Ombz3d9QRXyZCy\nVq3jd/psLIdnVOF/DONJvUgcgCWn2//H1pMbmTduaGklIDD95N+pzje+EfHS\nCK8072b2z/K4bvlNRpi7rETT4cqGrL4+IrbKWhh/ILY0ciFm70njBB5Pub9h\nP0wQQCQESbOEi4efOw1trxjrrwCeocSGmRyslQZTfTCrdDhgtdeMZOKO6AJB\nTIkI+6DBqjErhyi/OvilJ1O7W5bAWxyShvozHokZhSMnT78zfuQI68e6/Uar\nPi6XbRcFgfaAptzotWYH1FPJfIS6sVPklRbCJHTjJpIO9K+F1haGH56pM9xl\nhxT8m2ZeAPwUthSbumfbE75TP3Z5C2RFcmmzgwXD0txDE6JXop/tI/hXr6u3\nzr0RD8DcsqS4e2y8BKcWgPg1EyJVK0G7Uph2U/FqTs1ephWi19Gpv4/8HUSg\n0u9M\r\n=2Ens\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8b1a0816c0d3a68a851c5e6a199c4a9ff75cce07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/rtl":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/shape":"11.0.0-canary.f8579b7ea.0","@material/theme":"11.0.0-canary.f8579b7ea.0","@material/button":"11.0.0-canary.f8579b7ea.0","@material/ripple":"11.0.0-canary.f8579b7ea.0","@material/typography":"11.0.0-canary.f8579b7ea.0","@material/feature-targeting":"11.0.0-canary.f8579b7ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f8579b7ea.0_1615601060480_0.2939736754673101","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/banner","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.d2a39d300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c25bfca8c7979010339a72edf742259a56de0421","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.d2a39d300.0.tgz","fileCount":41,"integrity":"sha512-xREzMJ1QnKW/k/U6bKBqB5W87qFk+Y8PvbqWdjY6sdcVBfP17rq61iHWltG8VELnMfIzISc18Uk6UvfLpR4URw==","signatures":[{"sig":"MEQCIFG9/4Np0j/bU7ZRoanNMCnHsfqAlIP9hkMnQdlm88xnAiByLcsTUWjQ807SzXQShVpTrLE9d9YG87aYtZZTehG/3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1/CRA9TVsSAnZWagAAbJ8P/26SvOjpPUkTa2pNurUl\nviy54Na+o58oFeQFyvVNtT5zA9rFp8Je5DqIZJKimvyIz9pYuJ3LRngF4zX4\n0v85wgs24X97Oc4b57tCXxCN5PzWVHQZW1kSjpMlaFaBNp13FdyJ+04GJL2q\na5aSh3iu+Tz1FVG7Ms0tGD59oOC13WMxyLKV79bHkFXrDungQL5tSNs/jY/j\nb/Wx7hGLg35KvvnpryutE7fQEApimizQO/98NhZ+sxPuw8+P/N1u0Topv7yk\nhm1D2vOnHFUJJ8tcrc8Z4BZwi72gUmHMW5ho4nPnGUnUs+Kr5yaXGSeog55E\ngEfulcDBfJM4K80uXDxOpqGXxCg7TTVnpNqyrF6fNv2ZxiUGjrvw07j7PHEA\nFtc15qa+R4MZIZh5iIZJoDC4vCTUzXT9e0QLkElUAV3dVzcfCMrB1qQmlZsN\nxspRcMkT6xJojUFHPkrufATYsom2VdfVaUaNCBkZQtHviEUwOTQWJ4lAgwjS\nr+DCaoqJELDhm+bWrpECAuhnOccY0gajUNbg4ofEqFYOHabEFzVLlbuI6h7O\nChK7wmLushadYRblEsieMHpiXYTTq3BdHLmhjQUzVaogWn6OuogsUdUYWveT\nxXvOfIACBJ7wyE6PcqvI9TXOiZCBzViiKMLkd297x+lMufyRJ+8aQrwFANdi\nh+vO\r\n=06YZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4e928ba6e35dc70b34314c7509f647a6fbc4be00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/rtl":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/shape":"11.0.0-canary.d2a39d300.0","@material/theme":"11.0.0-canary.d2a39d300.0","@material/button":"11.0.0-canary.d2a39d300.0","@material/ripple":"11.0.0-canary.d2a39d300.0","@material/typography":"11.0.0-canary.d2a39d300.0","@material/feature-targeting":"11.0.0-canary.d2a39d300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.d2a39d300.0_1615854975270_0.7362479478324138","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/banner","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.7cf67823e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c41c9d1f283dfa6dabc03a625bb1962cd214fa0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.7cf67823e.0.tgz","fileCount":41,"integrity":"sha512-nfNzU/LczU3XrzUNfiLrUcmutPCPQdX1oW7togRpe1d2OOEJ6smP8EfGRqKFjZgXAKjD+tlAgVnZxuT+IwTwrQ==","signatures":[{"sig":"MEYCIQCj9oS1XJUHpxoLliXnqGNC31KYMzqsjFBMCxEAQxsZ3AIhAO+qBToaitTTod34xBI4MeqACJ0qud+dfO9I7xsnpvBU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPchCRA9TVsSAnZWagAA3bwQAIFyV1+ET29Jmm8slhHM\ndXFLhofgu7LnHH5rJOdO2+QnyW9e7EG5HtqCXLVUgGIHYeE/tszpfJ0xgid+\n7RcCpTlHeGyfJGFV3nkheQ5j83dSbSBDJ4uTnzwwjwWUILLhaIntY3490NDg\ntAjAyqoBuOllcfmTj+WJDlDxStZFvcxtQhEq6GfOnhSUT0ddZyzCwCKo3HG6\nLM3aXcZAEq/chk5f+kGQLPhR9VUbG74bm6sOHpuDCLCkmiR54pcWjRTNvGU/\nbHcRTtabO6ScZm1BE7yrSXmVVBWlxr2Imqy9QP0UYDjZ1K4c15hBtD/w4m3m\nWQptwXx4QH9Uu/Yu0yvhNews92JFTLX8xQLFBmltP/4LhVdZ7sBaFWvSaVPA\nTAuDhEcueYMf5TqpYsORE8szxt7RG30w4JPXFKnaiJl19UrMbeN+YId6Aiwd\n7Sdgh7BOy8/oqYGH7H9Pvn40xoNl248ZWdTCjvuaBnVsNnLND+MaufO2l6nc\n7Uy9jYp4jLEuguoaSOOaq12JGGfAog4gfmamWV5SxzP/6qZzIfiVcB6160Hm\ny/5gviDGxhcrAKKRXEMJWtYIA8E3Ryf9t+WcXMUTnL+VMYo2nxMz1I+gjts+\n1qGP82fcXoYglHjbQ19A+dDjZheMmnluJ7Kj+PpqYWHUjPcOuYwrd5yfJGdz\nkt0Q\r\n=2JY7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"afabf42a48ec8775fa133ab10e023c1b5d2ab802","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/rtl":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/shape":"11.0.0-canary.7cf67823e.0","@material/theme":"11.0.0-canary.7cf67823e.0","@material/button":"11.0.0-canary.7cf67823e.0","@material/ripple":"11.0.0-canary.7cf67823e.0","@material/typography":"11.0.0-canary.7cf67823e.0","@material/feature-targeting":"11.0.0-canary.7cf67823e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.7cf67823e.0_1615918881157_0.27106642222662813","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/banner","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.67d780c79.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d47ea4634e75fe7704aec7278b4f9522e5f2215","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.67d780c79.0.tgz","fileCount":41,"integrity":"sha512-9jJVCdTm2g/dMU0rvmv/n8YMF7o2l/shdHTQji72O+R55z3KTVcjdrQ+UeS5nq/trPZG5qpqbo1SUfEjre7YWg==","signatures":[{"sig":"MEUCIQCu9VjGSr8uEOgKYYy4BNnCDk9JDQhIScqA5WKt/NDfMAIgHy1J/J2D591HOK9n9QpflnUB2iXdV90rMxP8gpQWuY4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQuyCRA9TVsSAnZWagAA2vcQAIHsy8iwlDblE6Dt7fkK\nTirJavDo4J+5fRO5ht/1hBIeFtf/9zAG3cxJ0bNgLNWvxDZhkC36TX4y2Y5x\nziMnIUukuC6zucQLecpRU81eRGTvwzkLe8Fi59iW18sNbjd5JFPWARFFvCAL\nOQDbuEPBHtghmB8rJThTarVY4eGplIKuyhcD9v64dTnKRQ7QlnICEh09WOVY\nTrovQVHkNPfzFuJBKtT2RURkoiBufiNYfzIMjU9/JshR9anGVBK6B8QnanK+\nWOtjXX5rw6IedHuyg7MAIAHlCZmGEuAtO3BSzF39ov7PvX155hASLqt/xiAV\nd8P+9ax1barjtFUgONzvHrfaOMbopGbj0jF/RfmaN+GF5OamfBHSkrU6TejW\nLTHfojdNkRvf96YzAMnw8NxnKUrc6LbznRXUVnv9Slijg0k4trrjlG1mVP+p\nzuD1WjI7meiYRvIpPR+V8DRxiW2J+8JzQUkAv8rPI19oEJsUCbiVUAXWQmu7\ncMqVi9zsv+unUB2GIRgVmUi9ra90XrOu5fDrlHjiAb000/ihSp9OuQfSslCI\nP17Pigy2g2h2pHJml4nJEdnmSRWwtzUGEcxJDqDbEHthXmvLBEsm3XsJzhTg\ndLMRnz7iKA+fIQgCaDqtBx2zDH+5gLkuxHZsfRYzerqc0AzNt3ecVilA+uFt\n76CY\r\n=cpiC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"05a76ad8cd6b15550e685799fb6b9b5643d7e0e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/rtl":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/shape":"11.0.0-canary.67d780c79.0","@material/theme":"11.0.0-canary.67d780c79.0","@material/button":"11.0.0-canary.67d780c79.0","@material/ripple":"11.0.0-canary.67d780c79.0","@material/typography":"11.0.0-canary.67d780c79.0","@material/feature-targeting":"11.0.0-canary.67d780c79.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.67d780c79.0_1615924145950_0.3018387993578151","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/banner","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0f358ddae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c004b1104f3698d8aad650f03d4dff32c09924b4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0f358ddae.0.tgz","fileCount":41,"integrity":"sha512-aI3pHVB/wfRUy1xKWGGVhxo8+USYVkSL5lXJhgQW73evsR/VIVJNFdV2wsU//kXQGtM7KVr7czzUkKaAR6o+sg==","signatures":[{"sig":"MEYCIQDoKYkRj8WGU+DLJn6CJhOnkGBobcvTVc1QFe53/CrpnAIhAPXpXq16P/y+fU46TCPQPqMU/XqOUo6pk0JkpG2gAGB1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS2UCRA9TVsSAnZWagAA1zoP/A8ro3kpt2kG3mqFPCMt\ncLinzWxQPYnC7nWxu2JJo9lhVQgl5UKZbXe7IYSceraALK330ROeTNUPNxXL\npYoJ46jpkyCSkM2U38489eGMcf02pTGHnS6PO17RZRJXriTF5BBAcGSJs7o7\nO1teBpNwHhSryo7tXSxWWOmosqMhKvSgmFQzcxr75+0az/PednZtLnQ0VFnn\nrU62j/CxGNmGbuoH70aYveHJZaeEM1fdxpkJHCwEs/NWOOge9cnmNvojnQXc\nJrPi0UbL7Hw9qMB68gy26Iis+DTJimksBWu8jfe+ZIAgFYefvwXt9b8gEmHg\n/DIYo+n4vgXvD1klRvTt1mNUvvQgGhP97/k4OWjIneM0brKLFT/BALFC0TXV\nvNvUhL4Me26GQO3UToWCKTVmecTkFOrh2Awzx87+JE9uEQulbJGD+OqOUwvU\nxuooUoBy8pCTzFwje8G4G72Wniqay7wkFihCzvJXPVo4F3daVoH4KFdmf2Wb\neAj8UlZQF/U4Wm527zhaEyIYXxg9bMSY6sugxwi+pKx/GlMWtbmZsTdx+QXv\nH4DscKIvPA5jd0ecbdrFSHtoI/znz1iJobwkDv/+E0Wzn9laRNm54MHovWt0\n8H5TWuqkckxlnokWMlzWAdfCG5fi/MoRLr8vW6Qdr1XQvCq6f2xWjnu0PdRB\nWvc3\r\n=HuvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6acdc7677f01b6502d0b491a9816d6600ea9cbd7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/rtl":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/shape":"11.0.0-canary.0f358ddae.0","@material/theme":"11.0.0-canary.0f358ddae.0","@material/button":"11.0.0-canary.0f358ddae.0","@material/ripple":"11.0.0-canary.0f358ddae.0","@material/typography":"11.0.0-canary.0f358ddae.0","@material/feature-targeting":"11.0.0-canary.0f358ddae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0f358ddae.0_1615932819456_0.5492461640951227","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/banner","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.67eb0df80.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f4e7b62bdf73eff1dbb8679d7f337ce3597bc71","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.67eb0df80.0.tgz","fileCount":41,"integrity":"sha512-S20eNoyPRfu6YoV7Zpj2CjP31lLrhreUSsdPwKZcDnQcqS19HNe23RqQUePoPCgrkr0Q3XF7gyX0ai6SGJCYhA==","signatures":[{"sig":"MEUCIQDkKpoPZVlCUb0LJnZrQEp/CMqYHgUa6+mAOZrYhQLUYQIgNi2An4XMToLYBxPvFjibtzqoixzNlKcF+sV0fjnAVJs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTP0CRA9TVsSAnZWagAA2YcP/3r5HC0KKRcxVdUqBg95\nVDSYFjIfKfq2eyTBQSkU7T8X8NUOSCtrATKJKv5qJJ6qu2uv37roJ99urtdo\nd7DsCgk+jinfFQ/hdXLfmixeAiaNjiKL+KSFOqUoRMzGOpJNrQ3KuIMv5sEV\nGHFf3qnQBzskmpPlo3rOYNItsAPn588JlF2V9ZX4Y3C08TUXzMEdKjevDqOj\nx474+MB5dENSM00h/pWKl971sH2m1rxvXOL0dAzu7kd4fb7UmpWdZV0a3NrH\nCvsXoSImYQV2z3kU7whM0S2/xo0I8/+xTclsiHmkzADjqRmTEQNR0v9VEkKP\nJfl5ZBaaYG5n8Nrgmq07R0L15hQzu8wbzC4Fg5DRK2Qn4ASMlLK+4w5UBLVy\npVSgF6A1+CDxG7OG05c7pmr7U2eSekzUR5p1qWGW3UYEj9hta6tNnRDTBPv3\nslFp3Wdlde9pYdncbDBXNHLWmcTwnsQET9sSDkEhnQyijNIu+XkUjthqsW4Q\ngpM80ZG5XG48PEaCJX0KBK+px8vnb6mI422glV59so/+s5H5zwdQEWt1nDUJ\naC00a+3Aw5Yi1ZyErN7yU+mvxJZM1imfUZQi8hDyDjUxV5Pqs8zE7gedXLTw\nd/eEzvNeWYr4ILDCrsSObx78x4gXAqeAOmt2Oqpvszw4wsN/xSe4uQIGhUnO\nK2GS\r\n=rhpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5f5e9d259d95bf3abf565622edf7345e62993020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/rtl":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/shape":"11.0.0-canary.67eb0df80.0","@material/theme":"11.0.0-canary.67eb0df80.0","@material/button":"11.0.0-canary.67eb0df80.0","@material/ripple":"11.0.0-canary.67eb0df80.0","@material/typography":"11.0.0-canary.67eb0df80.0","@material/feature-targeting":"11.0.0-canary.67eb0df80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.67eb0df80.0_1615934451896_0.8533142482781935","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/banner","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.941ca3b3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96a39f6f7d18ef3e6310613cf9d8dbfa06d92776","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.941ca3b3c.0.tgz","fileCount":41,"integrity":"sha512-Zax/96yV2sMr+KkZ1vmMBN8jsxKEtSz5KkiCSFQwhi9oWkhpoqcmeWINtvZKSED2crdwZ+pmMwypi6opKpTJNg==","signatures":[{"sig":"MEUCIH5NQfbUDp4QJvp4bIFREL39yyixhh8HXFVD+ywjYVT8AiEAwxDnFZOxrkIqCibKi0e+1IXq3sxDRQ3Q5eiHXrINcUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTRbCRA9TVsSAnZWagAAcJkQAIfJPq49RJ6ttw0DBV3+\n+jlZPCyh1ILW4b4kzF0l/1Z7arclfAL9M7ElDIGyuCqz3eUjoX44WZ5+vsC+\nVMCZxL/2m24J3KvICwKGs+M/z2Oxrdvtv0OhfoVDYIDnjNGbBMRZ2yVWuyZ/\nQBUU84+oT3GW1az847bOrzMfcwTXd5GyF2XefMonrbhKzy6vZZMAY/0nM1y+\nhdI71AWhA7TSRrsN9ilgyFsah8N42mV3MHZhJl/T5/mOEmcqkZlOQR5ufZMi\n6qQTPIJ+GZhtw8iEyROKhV9KeQgEb+4MXiLv5869Wepnz2j0hEmQqFMmurXW\ngyanjFSXhaRLwk8qhvhM1mKnEfVJKmcJm3Aud5kcDC1GO1DHVcjNDoVdkA/c\nwJbvegMx0juIXLAEYcIaOJGY4a5jnB4r8IfmOGewRqOGuF7DO0/gJ4LKzXCx\n3+Gmywf/hdnrxpsVVWXRXa7KwFZR5I1kZUBJfXQ8TEVxeM7+mXlXVjjGrE92\nU+PeauKZU+3fNrS+1beZ+X+5zk22mZmzlOtsnqbQrdyHV9JlBrge6cMX/ztE\nQAtTzvH+sOd1dyhefoK0yrAMD5r5qp4JmU9OAobnMCqz6tE0gfU3IgmTl9qC\nclNNy1NLoHAwPvUKaL6m7eSI1Elb2J9/OXNquclP2dc0NTsttAFcs2gPdxv7\nz6qE\r\n=SQ9z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"27181e4c2c90af170c9149616613beb6599ff94a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/rtl":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/shape":"11.0.0-canary.941ca3b3c.0","@material/theme":"11.0.0-canary.941ca3b3c.0","@material/button":"11.0.0-canary.941ca3b3c.0","@material/ripple":"11.0.0-canary.941ca3b3c.0","@material/typography":"11.0.0-canary.941ca3b3c.0","@material/feature-targeting":"11.0.0-canary.941ca3b3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.941ca3b3c.0_1615934555098_0.29116291023939245","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/banner","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.3344d12ad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2893a0b2cca2350dd0d317f7d0fad74ce20d16f4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.3344d12ad.0.tgz","fileCount":41,"integrity":"sha512-OSnCIfvF4ewHNcjmTV87elraOCtxzIq3ei313RZBnZChEQ0HFyHwIKigTBFVewDas/+Us8VWHkgvXzP1Pdluqg==","signatures":[{"sig":"MEQCIDwqDCbXVx3ivLPoaN8/gbF+1zqm05C4/1cY5zf3HKB6AiA70+C5L6c9k8p9yUwpSquUvsW6NWKvAaPqYV7PvrhNhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdPQCRA9TVsSAnZWagAAhx4P/jSW2Yt7EeY6O2EBIfD6\n2RI4s4+7atmLOdma410LV3wobEuhEKOGHySo9gQbjusDSFsPH77D5VIAoH5v\nzFWvceXagNm3TrKnQuCiXnhYwPZWIsZIZRp6iHhyaSwTjL2iOJWIlE35TUag\nlStkurZf2Ryt0T5nwrBFqGoG5HU9UJXWvltzGT8QdABrrora1VQituYi+TBd\nsZnicAziHrPT2hpJK5sshpxTNPOcOJOJPIfBML4EucyBDCpzaYe8Y3vmbzn6\nmCAfdNsRJQfNCESciXnpvOtdQ+tQNpJhC/B6ED8RIlf+TbXafEa/tM9pkgd1\nuW4DJTPLuHzRQZuvfVEXoP2UQJkNwd6Aq30roVtU8S2y50y5VniB4vQuSYFG\n/nQZOi7JMsJ4P+WmUm0+eTaGb/nl6N7TBj8KXLf3shlsuhELXsuCCCP7IUYW\n+9/7KsDFRHgbMHGn24iBSWb5lsct92Re3ThStrQNOVeSJVNtQKZIZS494Lah\nTMuawmkB8jFUfsvSZ9Z6GI5kOlqErvyNlJc8Zzoq/9N03Ihh0Y9xTt7Gzr7w\nr/KstSXCoi3n8Ybrgq7pi1ogMlOx7je0N7df39uor2QEJeZ4CopnAV4XBwWD\nyFdvI1cJ8ZJ9ZnDg8Wm4ozl+7wUMZOfVOpTM2rzQkmNjmJJNgtpZZOumaI6U\nHJeI\r\n=YqdE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fc17c547b4aa66b6412c0b0b56b75978332702cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/rtl":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/shape":"11.0.0-canary.3344d12ad.0","@material/theme":"11.0.0-canary.3344d12ad.0","@material/button":"11.0.0-canary.3344d12ad.0","@material/ripple":"11.0.0-canary.3344d12ad.0","@material/typography":"11.0.0-canary.3344d12ad.0","@material/feature-targeting":"11.0.0-canary.3344d12ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.3344d12ad.0_1615975375923_0.03901946546986479","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/banner","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.6072ed604.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"155ff0533014405bf9a02c2bb68e5db8b84c238e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.6072ed604.0.tgz","fileCount":41,"integrity":"sha512-7C2b320UOEWebxFTQ9Fj25qBJ+d19lTF2+LHu5+IRrbQN0ecfjeMEOwMhu16hapTeRXGGjyNohdRTAfDdcgnuQ==","signatures":[{"sig":"MEUCIQCIfvhsjAw9ytUDn0vJIWmVKUsXWaCqWFd9FSLLSi4qeAIgPCJ3/1DT4gezpY5xJ0+ZMJffgWe05/Sk7iGsNBPnwaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUooWCRA9TVsSAnZWagAALA8QAJpBgj7p5bDLOAQAQr/+\nZ+2NNWmdyaPFpBYaoScdjvz/mAs5pjRfZ2iGFXK1WilkU6PGcRCEYBdI1I5q\nxCy6SNcHMv536tOQGBXSf+yV+DOV3QND1OKxcY9v3AZkYfJxgG1hQsM5CQ+y\ngdeQIogDhTcV4tT3R5Qy+eZU5VFTavqS97SS32/6nWD6HJahpb7rHvmMktcJ\nS4emtNsvsFYOIkWdA1sy3MYLXHuMYRQ+2NvfMAsasV7rRZJCVH+Mk3CbJlZO\n/JzRtaz+x+piQ6JZg4kVuZIJ4BpGCp0qaum49Aq1atMZHLJfZw82CQDXqeLG\nEHgMpwCyBnetPCIiwVU9pmTQhqYzCMBIaOEX3d0H2bHF25jaMyVQ5GqQKm4S\n/QQIqjtIHmq+cJQEoUgh1VnYDNf04tUlL9oMvCTuKuBT2SRFxE4J8pae8xmj\nRNsjwhheShACtWnq4BQp/F5BAAtm2wahj5lvwLGfy6Rdy/MwD4O3cEsGpExp\nskxPO024j7QidhyhHEci5ZpBU0dFSFsnLxDaRhZANeJDzzvZMESlPVxgQwgY\nLycLoawRu2xwi+4gCCmEQLrUtzzAxA3n+z8RY1mMXxtIMpcFwMGesxwpRFdb\nHO8bt0Q+OOkkYGQPJn2gM/2lyytTNKKGJ2FYsI2gEZzaxqnZL6Rmslya26I/\nziPT\r\n=fvR1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"219b085de7ee97c7b75e5f25dc757e7b5240916b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/rtl":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/shape":"11.0.0-canary.6072ed604.0","@material/theme":"11.0.0-canary.6072ed604.0","@material/button":"11.0.0-canary.6072ed604.0","@material/ripple":"11.0.0-canary.6072ed604.0","@material/typography":"11.0.0-canary.6072ed604.0","@material/feature-targeting":"11.0.0-canary.6072ed604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.6072ed604.0_1616022037972_0.08455521183278214","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/banner","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.d3a6862af.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"450987f471645b8d0c6be0be34225a6aaecd1fae","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.d3a6862af.0.tgz","fileCount":41,"integrity":"sha512-Hd+hZ9lJjwro274OW1TUQAsYgGV4VuTbhlUNbCEknvCDWhpGrdDZ6hIqqpLgryeoWKXzwe6fdW93h/OjKxpXLw==","signatures":[{"sig":"MEQCIBIJBKg1KtA4wEJ39rd3IDz9kmuHPmtkNI9zf54OcbvkAiB8V8WKjVewl6JWxQBciXAHI8lUP9cGhfAhXtcgEXVKVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU34BCRA9TVsSAnZWagAAFR8P/0FGVk2MUyQi4sFNMvhv\ng+QtO4Yt36d2jrHZARAi1m/uWChUMqkZaUrTZ6NkCr4QpOAX1C5L48d4OTi+\ncxegqx0v6OH/ri2ukXFcpRNjdCGF3dsZFl4rU1nWPjjG9mwWPPL2tvSlj8/o\nIg0s15B77tZttUHxmo3L+S56IfpaMWwQlHq1ZhiXDxyvUaI6UTLSMkDncJu+\nOm8hqvCN5TwPqczKy5upyBNsbWeOjmKp8oFYYLpLZ46QVx+snZ3VOCpjx+n0\naxt6IxlKJV6oMap9e8m2WwTrFYbp4e1gFalqjlQSR+7OHvt5n6vPn9YsJXNP\ncOAaAJUhF02V1TifKYctwVIbi0Z/jLR+vkQUsNVBdvvGaLbJ0QDtcGncnKc3\nX3im76TavupVG9+vEzVsvKPkPgVwuRqbYAZJkTVblbe+asqs6kAVXsN9v0O+\nMcTo5ggvaRD1EfbuXlGSgPEv+o4S9nw9+RrrBkC85LFYMTusHWklScH9zdde\nG/rWYn3kGb+FfnK5GvHobrA1WLtSFQ1K4l9mnVUEVhX8CvjRAgejnAVJoYIn\n+PJV5MiUUmKFuNy2VP/PmgyNw3gbDrA+1/sll9VaTOP3QkzroqsI+iTKCdOv\nf3sigw8As6+HkXD1VYWFc0gKjMxxYGWej1canK5CFIg3Hl3FsKes2LJ4Ab5/\n3Ukp\r\n=tX7b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ab10f53a050cbeb103a3ee070a9134ff428deae0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/rtl":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/shape":"11.0.0-canary.d3a6862af.0","@material/theme":"11.0.0-canary.d3a6862af.0","@material/button":"11.0.0-canary.d3a6862af.0","@material/ripple":"11.0.0-canary.d3a6862af.0","@material/typography":"11.0.0-canary.d3a6862af.0","@material/feature-targeting":"11.0.0-canary.d3a6862af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.d3a6862af.0_1616084481324_0.41890917339420874","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/banner","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.40dd242d5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6136d4758af97ac37d98e65c2c7e67db5e370c0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.40dd242d5.0.tgz","fileCount":41,"integrity":"sha512-Dws1wMXPIZe6IIUoE3b/2q0mt7ox+L9aAshxT85Fl1Kxt3O1IEK499uMTiaPdkxySkk3jxxVJv7PmKeD2caO7A==","signatures":[{"sig":"MEYCIQDXnYHQdQ46hnnPxPuZrEuE4WFVedlK09dSJxJODp+M4wIhAOSMbxkN5dRu8/X234V7WB2lxTR5Dc4c6U0E8WrDPURB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8OoCRA9TVsSAnZWagAAWwEQAJkowS/tqG+RLruJ5lJJ\npNTBS4b+72xlCWkwEttb7Jqketq69vef5INgjdoFGmuB/kzGL+DQQ0jiJ/qA\nBxfqY5E35nBWyn1L6yPjPS9e3CrO1mXV/WiXevhlFQY6CE36e8dU/Z5Taxwy\n6MIw9oBOSS13jdK1rgnLdMthyEJrbPGU1O/jlkWJeRLRvaQOiB1011/oZpWh\nokVZZAOfMnaR6AffkqT6f1u1QAJEe87ndClCCpRzORPmR2cLbAdBqUmzGHBw\npJjRR1ROJtHDEDOaBQ+E9+bLFscTeIFqEo/Dw8JyEJblldjKTkPPoEZ3ezrZ\nusUwuHZPYXfue9S4RuWjmhUcdKPvrB4UZb2wedH+PobIZqy2CFaTn7Pkfy2J\nmfMctKMploFH672Od+nurFMAZZitYBF2SBnWVKf3F5t9nuHb5uZ7Y8IDK0N6\nENMD3gw96E3KQ6FOPfqRbvjagln0Iq/6x9X6grDAH3+7d6eBH3mVY+662a7p\n8nyI6lMMyBdpK5rY3dk4p7XfniNkZ9Pzw47cHab+xYEDoSbdT4+h7KRnxuMB\nvBH4gMK7tC6uNka+SaB87Og9uYwn7J4n/tOGPKyRyxgP4BTBArHuhcEr//+F\ncnvfACrAvURmnF4nAu69kkI8y4P7hC986OJ/8LXAT8Y5I6cELrk0stL2ew16\nRN40\r\n=vAm0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"07de383ae306cbdee42be69fa0a06884d97ec259","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/rtl":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/shape":"11.0.0-canary.40dd242d5.0","@material/theme":"11.0.0-canary.40dd242d5.0","@material/button":"11.0.0-canary.40dd242d5.0","@material/ripple":"11.0.0-canary.40dd242d5.0","@material/typography":"11.0.0-canary.40dd242d5.0","@material/feature-targeting":"11.0.0-canary.40dd242d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.40dd242d5.0_1616102312143_0.2182893571289919","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/banner","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.ec8f8465f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e3d06e15b66886034459161a990cb043873bfbe0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.ec8f8465f.0.tgz","fileCount":41,"integrity":"sha512-wJBklT+Hd/UMG88dmQl/nMjiO1kHDOX4KwsoQnhpKsfyIWBpiDH3FXkqMX/wlq+gtxwTNU/tCfrCh06ISjAi6w==","signatures":[{"sig":"MEQCIFS+u8vdWuGRtfkxfqM55FEPXop52UJjzyhjc8ZBQ8BRAiAB3mZVTvleGE9PhW3PvPm5/YaNcD4/Y2f519ZKbHsaKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nxCRA9TVsSAnZWagAAvyoP/iyYr8yyZOCHuODO7YOb\n5jwb6FdVLojDBYPzrfz8/9GDf4wSDnAgsxGBi2+WQvFWQa1f/EJFL/9v1LyJ\n41alPS2mFh3VjVX4W2WVRTCEXLDo0iMTClqUJE4IurwlHBWXxkbI41Y0y9Yv\noYWMi7fonRbBgUBBjgvQ/pT0jGZm0dXRENdFIRZEVvHk405JwiSz1WT9G0+o\nta+2qTqsBjEdmcrr+4BAf6OU6+61zLvRCramyO8aV49p60FGhfYYGvqTX7bL\nYHpKVzeLXyfr2Zlvehgw9HuqxN0LDb1Ap6UfSo2P73JDnkvBHwEYFiKCknmF\nPucmvrO3ZIX6l6ljWcW/6f/WcagIQTxgSYCA3XDClIKEEJyGMln9q5FlXfG4\nwPOUdlMwsJPv329tPaDxcL80b88eOVIJlAMsGmn7nziBJOIbKIesnrOlGdZL\nReFIS/lxWYQiJGfyxJWz+WPI/8EDzdIJM6oSRJhbV4+jtpVYY8/O2NtugaA5\ncPiNJrTjaqNaQMxyn/V50NGGW13aYLOa+G4OJSN5WKjjp4Y5wzB7kb+VB2aK\n7NRSmIA6y3/PHw6nfJTlAwa69ZorTsmYkZWQvOhSGIHljUsKLBtKZ9JcOCox\nAO4Lf95k+ztTCRQear5wptpGjkDf4U3fmGvRGcgmSl6VwOLM1PbCIdLaVOIz\nHvcG\r\n=uT+J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"896f8e45effbe3c44209b4542bcd3d10a7f8421b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/rtl":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/shape":"11.0.0-canary.ec8f8465f.0","@material/theme":"11.0.0-canary.ec8f8465f.0","@material/button":"11.0.0-canary.ec8f8465f.0","@material/ripple":"11.0.0-canary.ec8f8465f.0","@material/typography":"11.0.0-canary.ec8f8465f.0","@material/feature-targeting":"11.0.0-canary.ec8f8465f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.ec8f8465f.0_1616103921452_0.17770196980721842","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/banner","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.da38969ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"75d7733099d7c132f66b94b85883792722577736","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.da38969ec.0.tgz","fileCount":41,"integrity":"sha512-g2etKrwoktbjL1mbTfbA1BqXpTflQotS1v0dOGwNjUAn9EX5GuSqvynpX5lwIdgvp1ldbKccjkpXrPCBtOwl0Q==","signatures":[{"sig":"MEYCIQDrZlz73/OmIJC0x9QvvhAEBNMpviR1N2tG8sjT+CxdQQIhAKqZpGWiwK8SMPqo4MCOYGRt77AjjZLII2YJFw4xasme","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9HdCRA9TVsSAnZWagAAx8AP/RMsJLoAAA47S7df5rjE\ng+lx8waIeb3Z+IhRKYrp3CDkJCHITXrFaYPvGJdCRfYxNEegTXkYlD7segG2\nVdzrX6oFGNhKQLThFfXW9dwAEWYxkFIYyxiGKxdb3xp+eGPwX+hRfQJ8YtmH\nGx4LoKetbRcFVGi1vSgfhDv+tRHiZH7uMtEBATCXLEwvj3ZNt0Y+1CpfMthF\nutfh5S7L9k5RKWQL0WqShCgaY3M26YYthRz3YNKVI4R4XF6nWrrtGqOtVmlD\nuVlvIfUewzsegXrfx5Bmv2N9W9j1LJwmhaAy7F4NHt0TXw/eYsE/+lMcAKvK\n96tJdD7sm75KEhH2rJNOVcuzMe0ussA3jcA0qK82Ec4rXFjnNUiWDSRDnfk0\nG3M5qy1WoElWGuovgFwpM+18IZggjoQ0kx0v+2g59jarkXkxt1GyjP1AniZ0\nTKZNRYTfzR3uJa0q2arIrMoWSWxV9JuiQhq0Z7W+vYBiNdK7KNwOfFiEteH3\nJdIpY6Mt2vimAtJ/lPgr/LanpnB2feNQTMn0TpwN01sOFUCjPLN7f3Ku8rLY\n+WaZP50vnAhA8E4S98/tkRYa7tbuAeN0i+//dGT72SwLNXKYUP/Hnq/8wDUv\nsBqlJgH8AbhTGQdj+xAURIeoOktx2ZJy7DbNp3musWoq/TbuGmbwK4jaGc/+\notZr\r\n=DYno\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b43d112facdf74c62e02576a918d522587133fa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/rtl":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/shape":"11.0.0-canary.da38969ec.0","@material/theme":"11.0.0-canary.da38969ec.0","@material/button":"11.0.0-canary.da38969ec.0","@material/ripple":"11.0.0-canary.da38969ec.0","@material/typography":"11.0.0-canary.da38969ec.0","@material/feature-targeting":"11.0.0-canary.da38969ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.da38969ec.0_1616105949238_0.002861673241900453","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/banner","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f5246264d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a45f2df45c30a6d961066940e86394d1e68f0d9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f5246264d.0.tgz","fileCount":41,"integrity":"sha512-2TfLV8ief1v/VSXx9iHa6925hZzoFtW1hTW0aJtQ/hBAkQOqmqTd1/T6MC5lGk1foNYnWtfJnx8ErfCgANDqLQ==","signatures":[{"sig":"MEQCIC7RUPfRSkoOzcWTBuJ+wJAgDxT37tmegPc7pldswDENAiBU/VGF1GkvwV6LTUNt5cZ5pYfJWwoPfyIh+sw1uRMvnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/LTCRA9TVsSAnZWagAABRgP/RyVT7wIm8L2BjOXhA/u\nIKRvg+4cx3K9suUhQnFcOeV0B1t1IDfYuhIuLNYfHFoCulK8LeUYF7vZ/auY\njFT9fD8Hf0+VitsJvDSLOQRJxUaiRgKaldmi/lNmbdpvczILlTz8K+lJU6Ko\nRM/Hsjg3lMrjeu/1OvTDTQzf+G8Aku44ts7N6BJwBLvQZd56yVHcPEOWS/6e\n/u1DQun+KmZkmLTX0MPLrcrkVgi90WX2f6g090bQC0rdXxJnKbcmVgCo1Yct\nilSiZOHEbfB4jy3Kzn5rmTbGnrYrMjcEN/YQkaXOmQIhoZEJ0puc1g5Vb+gC\nW6Jxq9MjbbTjg5RIpcU2MI+p/JIJFenZvrf8EMQR9+Ibp3nPnXNAoXJy3/f1\nWbKg5DFif/fBzYTCGt9wTtDChthRy1I9j7ZiDdrk0sEs+YTk58t/TIApMqNW\np4dGeHjZ65fy+hnABwd10LkX/LYcNfwC6DkhxwEX6v2sR/JiK7ZhxmHujv+k\n46nvZQSZ0Nd9JJ7UgPeP5lri+/S41nzNzZUSqWyoOGQx/WfaTERB6GZY3aT4\n4cpMxJF9HcbJLjFt4Ih6623eI0I+Mz4UfUyMdJb56cpxoxs0w5jTQ3ExpQqg\nHleIRE1VzRIQtMiepjMoxRAhLzBbvOYHcPCdzqkdnt+9/AsD2RZP7d4JTWDi\nuo6r\r\n=Q8RN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e5bc1717405750210bb9d7e3572f0cd36c9bc0cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/rtl":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/shape":"11.0.0-canary.f5246264d.0","@material/theme":"11.0.0-canary.f5246264d.0","@material/button":"11.0.0-canary.f5246264d.0","@material/ripple":"11.0.0-canary.f5246264d.0","@material/typography":"11.0.0-canary.f5246264d.0","@material/feature-targeting":"11.0.0-canary.f5246264d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f5246264d.0_1616114387384_0.3585522273427877","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/banner","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.03d34bbad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e260f04b993f1f3deeee1b20d74638b82d24e4b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.03d34bbad.0.tgz","fileCount":41,"integrity":"sha512-fl8e3105NeloAK5TMbIifouqmNpVroFjopANk0K1WJ1U49hOrOa5WtxXBviGZsucxh7B4PIidfAWMk+d7QOFAQ==","signatures":[{"sig":"MEQCIHS7q+D3CC89FhOyaYdFZfJCFCxS1HuRTcMvIHN2W1YbAiBwSFdNCPU40ibVvDgrq+Tp60z2HFN7bgwtMAPoLhctkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/XWCRA9TVsSAnZWagAA7QoP/jSMe0fxolA1CliwT8wH\n0lccMWV1i6qAennCTVSU16iTVbyPp4vS5Pl1n1JCEQ5SrHSQV0yoU7oCi8Ky\nmjVk7VQ4zRRThrrAzuhhSmhAu3PS6dxH5jo476YyRMIuqmVxD/6z+sBd34eb\nNxiFrpBmv0aIQqQyAqFPRW6uvTWI+Hhum38MoLyXsSidEMSaAU+vIlJHVrP1\ny444gCPZHEWpVmTW44x8FZW0+CCM+GwQFRv1K95B/qJNlqSpsHBFy1sPEPK9\npa0rUfMvwLmZGz49P7IQQ9mugWdLNSVQ4Bd+VlzCHRaB5ZUoAg1UO8yiaoXK\nVPldvVLOO3Lz4lrJanR3orb3AbjmfoPz5b5kS/bP7bQcVO9TthGBt87Y5TTe\nuyWOfWtKNLgD1Dg2qDGkfM+X9AaF81KMwk3vb3EP+tGZR3nSzSoUNVCFOPgs\nOhZbUzEINpSOwtxNX1K0vMsW5axPxMAMcmP2H+jj8a2Z+ITCDjqJEQyx0AOs\nOZgkXb/YQST4mB/Cn6fPgZCGd6DRtxK3gibVQGCMEfKV/43q3VBX0Vdb/q8Z\nfIgibf6JiBbw3zbKALcKdOwl0w4ptIT+3n2gkd9MFlgmHP948q7lptCFF6gw\niGfqYLlCxtRmVlMU6kUFfWZm7Cz7OttjmGyg3+AEOzKHtM5RzMrFpcV6o9aZ\nxF69\r\n=D/xS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"650c89999524e7131f5808d28c8ea2fa15db0c86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/rtl":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/shape":"11.0.0-canary.03d34bbad.0","@material/theme":"11.0.0-canary.03d34bbad.0","@material/button":"11.0.0-canary.03d34bbad.0","@material/ripple":"11.0.0-canary.03d34bbad.0","@material/typography":"11.0.0-canary.03d34bbad.0","@material/feature-targeting":"11.0.0-canary.03d34bbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.03d34bbad.0_1616115157624_0.5128615574838562","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/banner","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.cbc57c600.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"baa889464ae21737d318313e85e575f1b441ebf1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.cbc57c600.0.tgz","fileCount":41,"integrity":"sha512-Ac6uHLfnKgue9TOnK73LyKRIV9c3jSw1PPoYutD5QS6UdtSRDoL43P5qYVkoxyJbY0TNSO1Jvat3Tu0zYJQP+Q==","signatures":[{"sig":"MEUCIQCinJegFkBcj0Dt36QMb6uVtDaSuUhRyS0+ux0fRAhlxwIgOR08+KMUjIyz4vloE9CMP5w+IFZUaMylMb6+RLY51CQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/fDCRA9TVsSAnZWagAA30IP/1QvGgpcoJYl0Ax3Nui7\nRIQd20hft24kDJcsP0RsDV5Ptz+mLAhCRgun9AuKns/qDm/mdSdaSACldlpW\nqgo7ZLoUA/AZZ1XXbbI6lmyWqxQCVhOTdGiCqM5OT4JH0YVy83cdQfpQzzpF\nisrjtJDNibH/0R2rnRfRRGo9quZdGAK7YU3D5QLub1DMaYIHVDTzj6NMd/5W\nu0t8diisn7V2f36g/oJWC6ju+PLBDO3S1BZu5EARMmEVn/pjmWevAhVI1ACP\n20lHs0YEhuxFI6ha0mtDhojA1oXjHw2l8Ql8A1le2+Y7u+Ax0GkM3oeTwUEO\nRkqywhev9zOQR+AVZHJGMEVED725oz9D3B3UJQmIJwODh///32cgOgyjHt28\nRYZoD36D+W+mvqWsOWr/eZsHSYcQ8VM4Um7O9hazimxJU7Jmjb/uhJKwuOq4\nTzp90FsoSbhJ6kFfYv+yfSnXw0F1RwDbm0NFRATPmSaS3//Zrq4ib4P4pGhw\nO+SNfZjLIYYbCjVi/8xNV98FMs0cfPXVKdMNarVD5AjVj8aUC/wXN70/wRwh\nVTAAKnsXD0L3mVopI51Er6GnZw8fx5z5ldNht3PzywNJnwg8w5OQ53fJc9Rq\n34o8NTmtwt2MYS24JC8CHINxs27+CFdEYqLwryxhNR0pxHmn7/VTqa292z1X\nNcxf\r\n=ZeNI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c16ee9654e2ac3913ee3140dbc31e34bbc443c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/rtl":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/shape":"11.0.0-canary.cbc57c600.0","@material/theme":"11.0.0-canary.cbc57c600.0","@material/button":"11.0.0-canary.cbc57c600.0","@material/ripple":"11.0.0-canary.cbc57c600.0","@material/typography":"11.0.0-canary.cbc57c600.0","@material/feature-targeting":"11.0.0-canary.cbc57c600.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.cbc57c600.0_1616115651141_0.30566278174703054","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/banner","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.d6c5bcf37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"861834ed27eb84837a1ad6a8ee83598ab80ba0d1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":41,"integrity":"sha512-omjTzecc7GHHfst5g40O2zU9kr1vATYpY3mVDTtKIUgj81LFxOArO6EqmHRw7//m2IHB1D0PlOZ4UxAVR52jbA==","signatures":[{"sig":"MEYCIQCnKDWmFUi86e0ljdZblR+el+Bv6L+FudXRASqxTQ5kPQIhAMt3JEAnpq/3E9/JBsF/6oI9At8vl3eseaXlq9zblKiy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/rRCRA9TVsSAnZWagAAFmcP/AuIXl6oOklKTcn6t22G\nxgpwNGlmilpVzc5ai9E8XFg2CiHl88wLOj4/sVtfmbPYxbPEzwCjy6ELXwN7\nlfV+v0Big1PyDm7JsdVex4+UJe9F0nfgbRlvi/urvsqf48n1SKhKb+6XOHqO\nNs8qvOS43gBOxwyVa4cAyscbPO0g+u33g+0O+JGHOngXC3/lEGXSNJLdkadC\nXfl9EHI9JrFmCWv1XHIOHgl90jiahM/m6QfuQWGqqQ+IxiZ7mufSKGURArb3\npOzwMopdNrtfNdkwQ2iOPoFE4kybVZ5jTFvhf+AuZYPMUGrEEAWFttDrLLyE\nZZ2HthDF4LmAz42CLLEISn45zXxAHNmgd8ssdLAgmJZ2bNPpaQaoyh3k2/To\nFjHJC2H5IKfTAVZ0bMM1Ngp/6/eEY7SDStcBmqJ3SKRIcukjc9wYBrG0SsEm\nwZjx6gJhNL258xY7S4tfwMW8eGA+R8gDLQ0wd5PkTXXse3i1TUKVZXact6Nf\nvttiPfJgwJwziWSQFf7PJUkh/2upGq8TxORyvmm/mAb8qy7XEGUwW4XhLkYv\nZdb/FnHu3/iYgwzObMPQbK5HJ7NNe5jLn6U8LiuJQfLlE5MZo1H+1XVioDSe\nznaN2pLprmQ0ZWizYjbEMU7j5WQjVPNIzmwAcAJz5tCcRvCU7nqcSvlMYAFp\nlzKb\r\n=G+5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7ed31c18c565964157fdadec7c7876ba58c6dfff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/rtl":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/shape":"11.0.0-canary.d6c5bcf37.0","@material/theme":"11.0.0-canary.d6c5bcf37.0","@material/button":"11.0.0-canary.d6c5bcf37.0","@material/ripple":"11.0.0-canary.d6c5bcf37.0","@material/typography":"11.0.0-canary.d6c5bcf37.0","@material/feature-targeting":"11.0.0-canary.d6c5bcf37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.d6c5bcf37.0_1616116433331_0.5424832832719511","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/banner","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.fefc668d7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c1da291c224975978ff2d00a94bb39ac96849ba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.fefc668d7.0.tgz","fileCount":41,"integrity":"sha512-DWPKEI85LBmZFNQt7o76pezgrNZQywosKtuFs97WmjFFupqMs5N19usuYJ6ZT2/j7yZbRmrdj4xOpUbpt0WCgQ==","signatures":[{"sig":"MEUCIQCwXo9nKDP/K6c0eFbVK4PGo6tVS6To1w2ldJ+O8bvIxQIgJsLzFUBxDvErqgf8mKvwx/JZhBV9Wcoul+JBF6E2H+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU//NCRA9TVsSAnZWagAAfTIQAKC/mmYKJ+DCJfrmh5Oa\nL2i+8HPGSByu8zGQArQ8eAhLbiUdTJ39iWX1SWnygQqDwYbi2fi8OqzkiwsH\niphf3NgTISpHiVXcOGSjxYKHqIg2ic9fMT7nHvPNZ2wu+2nbo0Fvw2gVFvLZ\neoXeyUmTSTh3/5FnfSLo22c/IijoHBd+35HQCv8un3e0BCyA49zhPg1aq2er\njfTHkKGT/x/fPQk2Qt1AAp/Iic2VUVcODfzG6QUUjTCAUqRTbCocs4d3FAso\ngehvkrWWbUgxrd6Fq/9+bpyRCrlrw59zT9VsaoPpmej6kudHberWTyiGJdn4\nlK4liIZpIYR4lXgg/EJw+1wHafVq98Im0ozuNg9A0XE5Xja8a6Rj7uV/SFHf\nYCvLuA/YnxLPtiuPotiV8GM2I73xJ859s5KENUItWDZDC6OyODXC+dr7QWUn\nEiWn9uKsOKyzaulaseqDdZ4lQ2AnPDZAfYq1GhK/kwQWuVtZcvd59M7IIah7\nkD+wrdk6mOSHhe02y1C53TMSdO+gtu/rfIzb/0C+Rh3U36J2exF3UY6Gj+Dc\n0wky01Qv7WDh2LzIJYH9e7SstALheulbj/kgcSWh4XP8aMpXm3IgA9B3J9o/\nxJMwzOtNizmaB00tonXAhz0OvK6ebZQwlcqu3iCJ6dkQWWV0FpN4WyobSlnQ\npcul\r\n=S7j6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7c976c590b16e8f3a000dcf5cf2b4daf6269aa21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/rtl":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/shape":"11.0.0-canary.fefc668d7.0","@material/theme":"11.0.0-canary.fefc668d7.0","@material/button":"11.0.0-canary.fefc668d7.0","@material/ripple":"11.0.0-canary.fefc668d7.0","@material/typography":"11.0.0-canary.fefc668d7.0","@material/feature-targeting":"11.0.0-canary.fefc668d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.fefc668d7.0_1616117709213_0.6975075573513441","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/banner","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.faa7d3226.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dc1c1b23e5f479b980202426356c3a482948a34","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.faa7d3226.0.tgz","fileCount":41,"integrity":"sha512-/s6CG1DxE7/cPo3CRjlHX4EaOP4OI4mItumyKySx5zKnh/1XCOcMNncSIUJwQyaCVdjuPtX8rALuk0qV2v78cw==","signatures":[{"sig":"MEYCIQCOPJ4eycLCC2qPfW8u/AtOF/M3skyB9v0rlR+9c8W1zQIhAPVQdLuGc1a/7W1GLoj6/Ti0Yt3yNu7aVbAYOPilOQ9m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOM1CRA9TVsSAnZWagAA8DIQAIRvKq75TUtDciiQEnDK\nU/erutsHE5KUg24Q5eaCN2PN/7cW5HCH/8rKaTP5UlnrV7iDIZkDTx/9m0WM\nM00sulAJI2ldPPk23IFWV55ZB8WacVEJA57XZ7fuod2sfDAaO/1HTOhmwmJh\njORLaBYIvSHIkRC2NtJ1qOdUFloawpbY+rw4ASeKscyqarXhSSRCfVKUf5Uk\nBJBxL7cD8KxbUXtoMgzJsO8DYLe4xRHAHO1+pSS5AeelzL927VDVDJzqoa0w\ni2B7hg6THhGnjuIhnd5Goa4QFAWxwfuSNWLJuLtVrGC/G4uOTJi71bxDGvq1\n2hAbFFdDmE14aK2rD2AWpo6icemTSvkasXYpiOgtBm3adX4+P2PylQXLtYQg\n/Ax3qImYuMzzDGT0/SXQJwIRTaEFot/fSDWYP8iCeW/ZjLhwg6G/9JJbwXru\n9Cwykv/VfminD5UAF+XBo1TcZzlfCEAkZWh6Hq4Uo9wDLnAjf2g3dmcD0c9k\nVlOzm1dipJeh6VTG5EbriKsSmxZwxyS3v2Ad2fl7CrQXILM63M/QLwDaka3E\nFIhKwm2BZwmfSkL6FIGiFJ/7eJtUZq2Ql8djssclI3ZzDoFcv0IXArh+qniI\nJ0IWZp3f9fQoPm9Hzdyp/ozbzNeXRY9D+QUz23eKzHI3jnqqgwaCgmrsI69h\nL/lX\r\n=AnNV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c6038c8b2af85b70f2434939a69416e1593d5a36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/rtl":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/shape":"11.0.0-canary.faa7d3226.0","@material/theme":"11.0.0-canary.faa7d3226.0","@material/button":"11.0.0-canary.faa7d3226.0","@material/ripple":"11.0.0-canary.faa7d3226.0","@material/typography":"11.0.0-canary.faa7d3226.0","@material/feature-targeting":"11.0.0-canary.faa7d3226.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.faa7d3226.0_1616175924613_0.2135886967078935","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/banner","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.c60449bc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b999abb28b26080d26b78cf89e3a392e4eff3ce7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.c60449bc8.0.tgz","fileCount":41,"integrity":"sha512-lKNGEvJHLw8IjaDRLeL9X36S2t1WbzqkEG7oTAmFKZVDKSxmHe/vtSYpezmbKyifWzTjMkEiWjFN0t2Kl3eU5A==","signatures":[{"sig":"MEUCIQCQ6fQL9cDbLMQUtUNmLlBAsYmXGDgnaNVgcxXmhHQ+IgIgLs7rbVPgZQIo7B3najO9FDPdjGP746C8zAPmFBU8LSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOgaCRA9TVsSAnZWagAALOQP/2rNYzEtwgWjf9Neem9v\nt3pQVKirOVlWXIJCkPM/k6nB5WjKVT9IIP4klq1aTjK3r/yeejFHxvMe99tz\nBmJ2o6Vn6FVFedc6KDBjMJAIyVv4Hyqs1SCwvZnJaA2prRIsC2MReg4pF5rv\n0HFdgHbZG+UaE2IkII+qYZer+/KfLxSaaKtVwYlXMxmh3PlNSB9oJL1yyi44\ntMCRh91H03JcQeBpyghUwKIfYSRz2lBcT24rSRRmEZ/AUBo0RGhA06tGlk/C\nbbAP4nS8+xr94RzlQT1jg0LwkegCmXYb4uk7+D51jdkIcH7G5Z3FAM9Wlg5k\nR2jtUnMFgmbxakM6VdmiUMAVuKzQuIlWkX37e2rCTWGyLTunQOTuwt8UgZWt\n3sZHFvyKm9EAHzQK7/tBYcgJkSVmenzrwOjNIvxvM8+Np8iTf0D6z6hAyOms\nJaxJ/85gA0oY7Mrei23gWnw0FZ4w9zQmp/gjhtKrtdFVEEGmumwN6u4CaG4z\n5kK62EwGbUcCgDdmUWilegYNmXOD5mVfqcsiqzqRTOqyML80WVWbZdZrEaoa\nqACOBZapYG5WK9ms8oizG2Y/dLEirew3fx7X15oFW1Yzpc+IELGKfaFo4EgH\nSFAI7tdVPYTYskV/oACXaFpHY0oszGXIZsgJBaRp95OC5vJZCzwGMVVJKxNF\nZ8GB\r\n=XqVE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"874083f8b4dbf457158a7eaf9924ce1143ef6fa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/rtl":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/shape":"11.0.0-canary.c60449bc8.0","@material/theme":"11.0.0-canary.c60449bc8.0","@material/button":"11.0.0-canary.c60449bc8.0","@material/ripple":"11.0.0-canary.c60449bc8.0","@material/typography":"11.0.0-canary.c60449bc8.0","@material/feature-targeting":"11.0.0-canary.c60449bc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.c60449bc8.0_1616177178097_0.6319787836432771","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/banner","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.5f0fc444a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7330ada3d8c853383fbd7166e967609e0a529169","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.5f0fc444a.0.tgz","fileCount":41,"integrity":"sha512-mTr/9xFOF7wQyhtjW0OefnZWcjpfe9iM9fo28J2c2Jhv938VzHQn4XxXhDYOGwDMRP41ETY6DWSg/1p+0h373g==","signatures":[{"sig":"MEQCIH8n3tcJO3CiBzDe6rKft464qDktV1R9G3qxE92E9fVqAiB9YXF+jljdcC38bVkD1oxJJTQ8mUKGh6KPmZBHmzJOgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+8CRA9TVsSAnZWagAAjRkP/0CdnakklFCnbSiB/8oM\noyCINhg2spFgktYBUy0HILC16mC4ut7QOobRIqPj+ioKlfZDdWZ54QKRz7zM\nEe4n4Nrzts/fwJUA9HoF2Hx+fDjeWR6nn2hR9EDLgd/7hJBmWhCEx4kmRpcl\n5iFrL1pn0lEQwR1DmnugXiofa/9VjeybvHWdep+eLABYxUiUrKC9SE6tRsSJ\nHL134I8omM9dOK3SN7J3ivh/4FQ5xrWVDLDf+SfUNUE8xPKohn2TKpc+vVkJ\n/SYZLZd9crbTK0eCyLiV3odz5kj6E4nK98S1xbvZsNqht12VJm9knzbqmJpI\nrVE+PMIpEII42M921m7ndcCWwJ6f+E28SeBTWmsk35KnqQAOjZeyzJPUlmKB\ntdN31g5gb65O80AhZpfpbiWBQA5b/40I/gooOtYdQsBF7NBTcURSpe2bsR7s\nBuT3sMjZtzUfpKxCMwrNFV+rsWvfvpIxBOAp9uQ94D8oOuqbs32YO2t8V7WQ\nzwcvZZ8nEEomeLkQkKJ6xFQ0dQtB+J0I66ZkV5Cmsb7fSpG9B6orj87jPa7w\nbRo/4svYvKBnUKB0XqazUCAl/oo5sX6hUymWgbbUAsocw8pzgaHUvFH/dags\n1Zkbarjs87aPumjtGaZ8guGs43b/70HL8XCPMTn6M+znXgojpfO0p7Ju7azC\n68PD\r\n=xvch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"122f31622300f5877c850a516d74f7c692d0718e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/rtl":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/shape":"11.0.0-canary.5f0fc444a.0","@material/theme":"11.0.0-canary.5f0fc444a.0","@material/button":"11.0.0-canary.5f0fc444a.0","@material/ripple":"11.0.0-canary.5f0fc444a.0","@material/typography":"11.0.0-canary.5f0fc444a.0","@material/feature-targeting":"11.0.0-canary.5f0fc444a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.5f0fc444a.0_1616179132031_0.3060045164453633","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/banner","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.4567a750d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1c58c4fc779a428adf763fb9bdab6ff825606895","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.4567a750d.0.tgz","fileCount":41,"integrity":"sha512-qxiLjh/gbO4FbJ9dijC6M8+7oCafLZorjjkSmzcFdAKTiG+pAiqDtWTUPgaONPs3GIB64sROAlR1eb/fWRWDGA==","signatures":[{"sig":"MEUCICzTbs2GTDHgUfo/odXWyRcTRJb3xkXQjPC5zqfzcG8IAiEAiJADy6cYn++pr+deI1UZoRPaiaPCbAkFA4paitYCu6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVlBCRA9TVsSAnZWagAAS9MP/RPU9X8nGciiAUfn5h3w\ngbUVqVTwpreDwXdAnLZQNS7rYOjg5EIMH/zaQzthQyKN0+PMIVmcz9Tmhh8H\nBHKcj9D/A25/kzrobT/vQ0GN1g3nw4Klp9cLvCnDwQYnuiCS0t9o1+iiH6gi\nX0sC0bhvB+xQnXhlpJhvJ2SoDUi+atfOWtEkeQRLbXvqgiprZY8PWda+RHnX\nj6OnEP1enMk6Plv90Qh5H0LD+WcHMZ+FZZ2hLrFp2qhNYwo94BzdPMq90Mvo\naf48yhdN9VQk8FQcYZXp7fYbH99wLKvLpL0eLVcP0ZArFWQmBh9BA96Wy7TD\n7U3Svn6WdmHtaSzB+fM/Z/DE+XUDSe6wD0GCFiwxkqJVW/BgIs5ZxtJcxWM5\nL0rCm0D9Cz5MVR81J/vx2QCym69SSwdGOb/BNiFrL3t5zXEcy1aZrl68IMpm\nMwDFwQ4xpoOwYX46QNWn/g6CKFaO8bLSVSYIdllKvnU8ZY4J7n5NJRdtkhk3\nnQxJc4BHYZ0RBfdhrHcQOrRUwc3N3sa7ssxbkrTXBwx/HXsDvDIeGvBi07Rv\nFQatl1ZjYLzIdmf07DiO/w2uxYDOyXTdVdyyv+bqWfAgQ0zEJB/LuRmONPYa\n4FrQO/OqxrOxOcfF1fu8tbIcNFidKPHWWZgTl291F0JzdB+dbqtRBcUW+tTT\njGC5\r\n=GNYb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e165b3e1af02e963deb71d6f39a7df6962710c30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/rtl":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/shape":"11.0.0-canary.4567a750d.0","@material/theme":"11.0.0-canary.4567a750d.0","@material/button":"11.0.0-canary.4567a750d.0","@material/ripple":"11.0.0-canary.4567a750d.0","@material/typography":"11.0.0-canary.4567a750d.0","@material/feature-targeting":"11.0.0-canary.4567a750d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.4567a750d.0_1616206145123_0.16960671636941727","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/banner","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0cde52f5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"905ba40b2905ba16d088c7982a12c9684f117d2e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0cde52f5a.0.tgz","fileCount":41,"integrity":"sha512-w/IczpWgW+i/e31jNvk/pLIYFwvYariMm3v5nQdk1c6hXgY6QM1Tbzqio0A3MTAD8ur/0vqvlKM8HZY2D/DyWg==","signatures":[{"sig":"MEUCIQCU/INUjmBkVmJwsf24PIl36i4QmYClvJwKaoPGNHzKGAIgZKsGHFDStYRn6hPXiojL2At8vnpsF+/C8L4BDXqDEoA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTB1CRA9TVsSAnZWagAAW7IQAIZFX3CBVEzYdyORf4Mw\nCTvYCrVqvWP3BxeMCdA/7pKsM3Tawy8N3X7i6wvpH17h5nkB2062ustVWMuO\nhn5dvXkjf0WoWjQnILEufbFhiDWJ3nFO/dM3hsuiQKFr1poMiz4vU5LgBJ5B\nlgOlAxumPgk+Bw+XzU08eTveP1hXrGGGuWYUeNx4KP2rhMnOVxyW4J+WUcDn\nYKiKBcT0sK2DJhL50AoZ/h21dBlmkvAd1j9mrbcOs0eQi1a8i6NB7D3pnYsj\nbFjpLt/UvXVLi9JdKg8SCnCXOFWhnEWqyTBIrJ94A3+PWhYpFuhg6GrqVoFF\npsn2xjJ5lmszYvgBPGyirUpuOM/SC/Rj3PaR6xI4r9EO1rl40Yfy2DdXMNMO\nfCz1mwEYjuYqYIYVI/spH64oXmqQ1WitFVF0UHWEPxRW6wwaT5Omnj1dzVL3\n6Rr/ODkrEtcCHhgno7t4hv47/Da1K9q7VsWzxzCWDtBeWSQLE5lY5/lYtti7\nuGhm19t+2bsLw35nUTr3IjoHanI71zJuyQN7wH8GrugeZd+tsHHrYlqtUYzE\n3usqS9eFsoMwf+6XBCIGj+nZDTYXF3U2xr8eT1ZbX2idnCz3XHRmB+aPML4F\ngcM2UM77LsyFl8mk9+FQzJiPcAyKsBoPiQ3RvPOkhxZk+VJAVBs4mCLsaj2X\nLOWQ\r\n=ssHB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6f6719c5270f569fd2ab44620e89ccd53a31f98c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/rtl":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/shape":"11.0.0-canary.0cde52f5a.0","@material/theme":"11.0.0-canary.0cde52f5a.0","@material/button":"11.0.0-canary.0cde52f5a.0","@material/ripple":"11.0.0-canary.0cde52f5a.0","@material/typography":"11.0.0-canary.0cde52f5a.0","@material/feature-targeting":"11.0.0-canary.0cde52f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0cde52f5a.0_1616457844927_0.0610898356632652","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/banner","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.48f4b67fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b95678899120bb6f387d32a674397aa93dc5921d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.48f4b67fb.0.tgz","fileCount":41,"integrity":"sha512-aPVUCoJpXzJ6L2xbGKxBRMSlnbtgqBV+ZAUODj+bJBGjd41J7c7N6zsmC8iAn4VN5nOF/PxIB+L+ehMADl4nMQ==","signatures":[{"sig":"MEYCIQCjO5McTeC80KMYBZsFxodTonEiSUi8kLeVzc2c24v+dQIhAO83P05IaXDh5/z6zycfKtXGsRHg5A+Pp+GdY8dZAsj7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWke2CRA9TVsSAnZWagAASagP/2BDTJGozaBbvSxRyp8J\nUmoliOnRA+SKlDLYWg787WKNNPoG2oqemf6rzISPW0MfJ+F/1HRvJAe7seUZ\n1B37vKH5mnoM2DIvecAwFWtt8/3ACwRC84hKnaJ0alUfSesJ7Pfllk8qcKQP\n+acciSOeAo0JXCdKYMrZcP/QGp9+/T2x+yatRTZP+XymvuVUTXOPdBx8E4Ry\nb/r+JI1Bobwhv49v6f5wHTlOhdlg/ZvghchmdK7mDcmR1PqIaNPL1ZtpPtk0\nI//9iyO5jZqdFpwh4PpWvDNGyRp7DLoBI//FbRBiqlBpDsukOAHTEx6ye920\nkmgBukuT8MH359XROe1ER1/eud0BO5TbkW26xi2fwYepfD9x3SBi1RD97exI\n43nMLBSBn1mAc1gVmZ/67F8sJo1OscNpVq9ntzVLxRU2TZ8ct8gfESaVfhBW\n4POhU6Ktrl9b2efLssFPUbLJS4b1Vkk82F3i1RO911t/SbI7qPvruYlHMA+j\nL41j9KlC5gu+e1MSftbypYf2mQl8AF0sZ/t4zrueyILTiznqCBTjyEyY9Co+\nzebJlgl4wR7WPg7DxobMZ5/sp11HCrj/p6f9NuTTZWcfPJzDZpCdCBWn/RDo\nlevjo/dGAwGGxJJlDXX3WWpeVSUcHoi1alKP8CKeHZy7RuPb7I6MGQfVStbM\n3LOz\r\n=AKJM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f83669b240feaba73206d330f10c80a9aa31c1f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/rtl":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/shape":"11.0.0-canary.48f4b67fb.0","@material/theme":"11.0.0-canary.48f4b67fb.0","@material/button":"11.0.0-canary.48f4b67fb.0","@material/ripple":"11.0.0-canary.48f4b67fb.0","@material/typography":"11.0.0-canary.48f4b67fb.0","@material/feature-targeting":"11.0.0-canary.48f4b67fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.48f4b67fb.0_1616529334466_0.8150657369332954","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/banner","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0b8cff734.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd4876bafe0d13e7cfca3e9d12ebbcfed56d7e2f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0b8cff734.0.tgz","fileCount":41,"integrity":"sha512-P+RWeyguuN7+L8xBbir/TYwFMj7e9fuuwXqnHU4yoOvK/Zm1v1k85A8nAkAxrb2f/EtZgrYWNkAfccHnBD4txg==","signatures":[{"sig":"MEQCIEa5az0L/dYhRi6B06tbn/erSZc47etFpurKFuCIx0WLAiAh8vp1QMbjtmI1wc18xj44d7Yt74lFFF6L0Fd06TryKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkocCRA9TVsSAnZWagAAWqwP+gLaUl7H1sw21qcJRcTU\nZxVpBA5EujBjTYt7t8jZSMz8QfKhRJRVz4zJLGvApfL4iK/iA27X28Ihtx/A\nxlTRw6Hu0YioifkJ9C+7IwAhi9ki/pnnKEZq6QbVUaASGkXpZrBxozBqvkcD\nDBj9msZb87rHHRYBWlJTf9qVzHe47MkPlZN6NXQEjwlFP8Rsrm/LFbCsyo9r\nR2DGPvPdjVvUrW3pqgLkGzeTNJtI/6Am9qKBxgAhD2Hw0g8QL6cDduypT2+N\nCTGhWxcDTVWwA69DYMr11qq7e65dDWnf3+fLNC/llBlK8WLoC0miWs9Kjs0a\nIztbG7UIm5PVER0Cz9hiol18/SEbiaRzr1iZrqIjLr8p+YfM8SWT+Gsx5uC5\nBgXVuJplciv25rulx2sTNWf7x8N3PZloSTsUTGnd6GNdNOL+AWqXbk6JVZF+\nK7le2cOawcwOFqKzu1DWJSx+1+q8U9xYXNPh3RjggdQQVc0Q3DYWJQUNOt/K\ntbMOYzkWf1XsZ48VYMDqrRHWLFNkdQm3rYdPQ/Gwd3lZttG0D1zdRiIMg69R\n5ibtnPaOe6dQPDkGT3A75xs90oAf2J6KVJ7JZQ5MHhns9nRwGKcNwpq2Bol/\nSlhkuRilrYxF1S0iuj8yJdvLWKa5/h4sI+zVcHOHzXXWkHZFYl2cHLrwZEkZ\nbBON\r\n=GXoS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0371cb1671557f9e1d8a3bee3ffce11bdea058d8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/rtl":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/shape":"11.0.0-canary.0b8cff734.0","@material/theme":"11.0.0-canary.0b8cff734.0","@material/button":"11.0.0-canary.0b8cff734.0","@material/ripple":"11.0.0-canary.0b8cff734.0","@material/typography":"11.0.0-canary.0b8cff734.0","@material/feature-targeting":"11.0.0-canary.0b8cff734.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0b8cff734.0_1616529948044_0.7860177615484976","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/banner","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.8943b991f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06bfd4eba3ab93dc5786cd8384805afe00620ca9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.8943b991f.0.tgz","fileCount":41,"integrity":"sha512-/zTaYtfVoUImZyHLnxtuSwzhKZTBwY32WlxmtXqyKiW8NXD47Iv/iXJjIOLC1D1zPKNKK6yGkMKg3PsBvxhipQ==","signatures":[{"sig":"MEQCIBgCWUI2mqykQ9oanjP2ftWrg/HDUCqA3Nl/o0L8SVsJAiBr2Jwd7fnbLX48XUJIPc0qh+YFKO5ovInOeK0Q1MbGuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/6CRA9TVsSAnZWagAAHYwP/3ykjV3Ki6rn0ZioUpnU\nNL+fRYkdyIJcxvd2B5/O49aPrZ7+i1v95wF6DzGy+pVt/DbEZcAsaXF58mPy\nyQzKVIm1mFBYVuXIT+XuBQAV9Wxinz2Q8LwvqUthAqNctpHYIWcuQzh/CsBd\nmu2pwqxsKsDhzwwVrJji8KoRScyei8oK00GEw7now+rZv2Mei5FOS0P1ozDt\nTlqImY49aYXT6CEDTQ/Jg5S2AsZ+t//z48MP9tBFxz5LXfBRp5km1msVFv2f\nmMXyMW8qzVHNx8Pj8I40bmeGNpZtZFe/+Jpheq4lR5le989buIPgyRe+bJo0\nVv4lGf7t4M44CYSGLLmKOv5rEZ9yY2eCOXF0YHt5kPumoOVuX6XQ/PsDSTCS\nWUd7iS8b1eM9S5npFWAEHKN659xbOixTvXG/sHBWVEPGiLiQcl7+wcfqgiYG\nojYLoZ8UD6a5jlFby3FM4pO5feigDUipVsFr7BrM2XXgsmpyCwIJV1u1WP7q\nyHSFbY6WAizrIu0XFrwZ7dF+CdItCzpRR0SBlE660VJyTDAQkTcNKSzEeZK7\nm5N+ajP/LLC2fjVNYXy4sZ0z1YNAuhmzyOX9BH3aTyclX9qmB86NOn3CtQCq\nuG0o4ItP2/tHY6EoCsbise9G8wm2mAfvFNnrniD39FLh7SQdgBvb+xZ0vZrc\nlyzo\r\n=bAaI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"85cb2528143c5117974441e499367a5fc252b745","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/rtl":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/shape":"11.0.0-canary.8943b991f.0","@material/theme":"11.0.0-canary.8943b991f.0","@material/button":"11.0.0-canary.8943b991f.0","@material/ripple":"11.0.0-canary.8943b991f.0","@material/typography":"11.0.0-canary.8943b991f.0","@material/feature-targeting":"11.0.0-canary.8943b991f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.8943b991f.0_1616531450137_0.17363991152389247","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/banner","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.3955d8d3d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47f4045915da34079ec2bcb10755a800a8ba65df","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.3955d8d3d.0.tgz","fileCount":41,"integrity":"sha512-becx81UxeGsiVbx5pNs/3zv41lgcDW3G+FtAnOSA37KsAl67OceyBoNAj8DBGsENPvtjcDezIhhPqIhyzNccbQ==","signatures":[{"sig":"MEUCIQDmtjexHEQStb7bknN4RC7pxmQSTuxvsYV3rON6pkFeGQIgJRHiBkwB4pXLQ5bGiYxD+qGDxGvOU+tKcCKJAwqdzYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5BbCRA9TVsSAnZWagAA1wYP/A8R2Ji8Or1CEKzajKlI\nmg8y5Oqqi+6cPqRZULkI0kGsMeqVzD+DdDk8eyNBuEF7AQVOgZi+/9Ew4po1\ndRSIp+wk/gsSkn/m3HRkaTbuNK8DLUnDCFvfgrNfDH6CqpFlu1sxrsA65Rqr\ncozCQIrNZZo1GPUaRxK9W54wSKKw5M56xsgbLVoREQfo2ghZoa1snltNgzwo\n2p6KbxU/a8vzGw4y3qju81eys9liPT4vtT5MAcg2Xw6AvPXD0Vl0zqxflg2k\n8xBNBebDCNSj4d/dtNXupNczTjWK6EcccsKKnwX7wNMX/a87EiSXj7NV5mTW\nrp6uL9ksWrhUE7k+aqNi0k3//dZbhHXTsBH9tElcefHbPMIrlTc4x16esIcI\nVEseFPBZtPlenW8tAfisP0F7dwAnnrzN8S5Lm76zNigegzvkGN3P2N0CYFqJ\nlIVKv1dgTI0rWbC5xHboKvsAS+bn/4BlmbzDdRRHWTNBLbktnCB1ruybLj8r\nUxqNox5gQs/ngjucrG54/27G23Iecp2/H8fSUq0aWYlTXZAKOADd4NpMqP3m\nJHXyqvyFqHhqol1A+SYjj4+ZrXOev8d+fewVBiTGE8Z7Ecu2vygv01nF+vj9\n+5UFdCBeU+AG6evt59ldHz5eEbD+4ZdzL8No0Pn/TclpcY9wXFLaLCby3bKf\nDfny\r\n=2unq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2679d736975b17823079a52aad1e329d8c2a3b71","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/rtl":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/shape":"11.0.0-canary.3955d8d3d.0","@material/theme":"11.0.0-canary.3955d8d3d.0","@material/button":"11.0.0-canary.3955d8d3d.0","@material/ripple":"11.0.0-canary.3955d8d3d.0","@material/typography":"11.0.0-canary.3955d8d3d.0","@material/feature-targeting":"11.0.0-canary.3955d8d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.3955d8d3d.0_1616613467546_0.2426807873693151","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/banner","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.23ea2d85e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3bb3a662ec76f8bc5b7332f403c73fcf2ad0d90b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.23ea2d85e.0.tgz","fileCount":41,"integrity":"sha512-n/RSyhgpr1Cd4DXmOI3K4lEvZH0XV14TN5df5v9HJNRQBrAwPhx9c/HQH6eVSRqE0/k0Cfk6Sr85saVw9rzOdA==","signatures":[{"sig":"MEQCIQD3hU3V1zF5+HZIkKw44q4MuVz6V8ZuRtbpSt9nsub7bwIfPsChbz61yT8Jk3Zb9F4UHuwlWQVK0EdyoOve/3Zj3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMmHCRA9TVsSAnZWagAAlYUP/2xDluhgEA8+kq+hA6c6\nLYIBaYDTBZ/x4GTaR8TKkn9+A0q/t8vEZHkEHcxdpZ55SnqF0t8Sb0URIzXK\n6BijVYhs/+ErWSpGgYYykvYNbzFOdImPfheAK7yf+k+o5If+BlvBSPC4xYXW\n+IxKZZwXswPaDTKpNMo3+dkoFI1a8D2+0MhMJjT4HRsVbAixRl+A3Hgpb1MM\nYuks1vKGgRtLrmFNjn+vcMX46SltPzgjLwA2GWPnJEkQWCLs5HQjv9/EVKQX\n3oNmrsHxf3eeF9QJde2E2EaOszdFdRljDepPb2fDfSmz8ksAt1UDBORfhc3A\n5uzBay0MQvqu17DEswqqcOyVIdBYpLiFCw8ev+WH25qnDNfM1Lbyg/F2al9y\nP8zvSbAxbBoqUJNkHFqjqxixdxh0T7Gaa0ZzMAWXcg5Np7UjVQA3lKgLGkhz\npcZs29+UCLu4Q6L0WGQTfpYyyS0wxwTxp5AMnKZ8+71gImRlnbaHtuCAMbaZ\nuGi/oKhvn1ikFeXA3eYCtf5fTIkgSgR/Cx46F+m4bwGK2dhYrFUW3R8Kkbd0\nwWEN50JfuH4Xu1OBhHRX51orQzdmt90cc7ndDyO351tzcEzFM7TXFoz8Qe15\nErZK+R00sJK9zuXEboa6qDoSlsCCBEKx++cM/f/61q37SNL/TOsI9ReOJMEB\nXoBL\r\n=kxJs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"705a9cbab9462d9e300da18c26d7992aec452ff4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/rtl":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/shape":"11.0.0-canary.23ea2d85e.0","@material/theme":"11.0.0-canary.23ea2d85e.0","@material/button":"11.0.0-canary.23ea2d85e.0","@material/ripple":"11.0.0-canary.23ea2d85e.0","@material/typography":"11.0.0-canary.23ea2d85e.0","@material/feature-targeting":"11.0.0-canary.23ea2d85e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.23ea2d85e.0_1616693639188_0.6435690988385303","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/banner","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.4ceb42220.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6e805b0058c1f05a11c78d5b6fcc1dd1baea757","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.4ceb42220.0.tgz","fileCount":41,"integrity":"sha512-9DciT+0ds9+zr7fgWCZ4B1mtbSq38inWgYcXr2pVUkockVcGqHdoJVK9yUovSVMwA06cpy+MHxKrswMpA4oTGQ==","signatures":[{"sig":"MEQCIE/AHLLADXCX4sBzwKgdCoz/NfpS91mL4cScCGyT+bsQAiAOtbSeWmulSFg+G95UhP8NIEmj8RPS2Qj7Z5aYl4obBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZQ1CRA9TVsSAnZWagAAmYoQAJfaifqOVtU6cT+5jt5V\new8Lw6I2mvADpHLKb4f1bhezrbH9AM43ekonsJxYt7HspD8BHdzz9LdNzEmL\n8vk0mG6stUSY4aSg8X9c4R00FhYim5nk3vCUChBuGVNhXv9nn7f2ZrKpuNnd\nf0Qldwzb49J59qNhImfBIyP85GpzteEkk+CDFVFqeMNR5rOwQ+QdcrjkmdEE\n5kX6Xky1DiUib8dxtHFDzuIEav+S9XdZUB0uAtpZnag0uDiOgVvhJNgodBck\n3F+Q52b85u/oFY316AfdZum+tB6eQZ5rA9H2vHqXnzVRvaskxt0H8edQwGpK\n4hHlzkLcz/+LTHXfsIYJWxfpiJEidQY8isYoMIXYcSyI2OIfwwsbtSbt+z+6\nBTtf73PFoFEkzpBrR7e3Rn1Em2aTtMpDJRWn0OSL69r2DfrsSiHwKSgf6/9A\ntaazdiMfYsQUldpaeGMFxvpBWMz6B4jLtYPyXcKTpoOtWiChwc1AQ8hsljKq\nf96B8ocCZuNNcuI6STrN95PZVoxVDZuIx9Vv7/5u0Ja9R/L8VCerrgsoaS3D\nqvEYIx8nYonzd3StdF96EztvkLuhXVIYRzbeTLGBY93k2kOrFFNK7OHhKvqH\nFlvxVGacrnQoAcaJ+QfcehBxeoktWJPxDzIlnFL301Y84HSn81r/ZO+coXiX\nK1K/\r\n=zwtV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"75fb611f33737c857d1b59245ff5a31676d7f3ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/rtl":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/shape":"11.0.0-canary.4ceb42220.0","@material/theme":"11.0.0-canary.4ceb42220.0","@material/button":"11.0.0-canary.4ceb42220.0","@material/ripple":"11.0.0-canary.4ceb42220.0","@material/typography":"11.0.0-canary.4ceb42220.0","@material/feature-targeting":"11.0.0-canary.4ceb42220.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.4ceb42220.0_1616745524767_0.4907689607022727","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/banner","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.dc9c84023.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96d5530af2a03e5b2abe6c069a3ad64afb757404","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.dc9c84023.0.tgz","fileCount":41,"integrity":"sha512-j+wHoa3ZuB9SgWroaOY0TlY4brIhctQ4JbXmdxnh2+OVrFiObBDZHKRDEaF3FecQLfqnFrZbq/zJ8vyer30EWA==","signatures":[{"sig":"MEUCIDq5K2ph+1AKC9JT0kl462ID+HFLSBA006kk5Dt7Eo/FAiEA+rRU20Y3EyTovjRaSv1/1qDmzld8RVR80EYXZrgPKZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2S0CRA9TVsSAnZWagAAD7oQAIY0k4S9jKLxf2p9qnyY\nGvGui1QnNapkKFxV76z1bCgU4EQ+m3AGFaQZrtFYnmx2QWyiHNx805nITbeh\nexUm4WQfMm+OAqM96gtnTDWVEyTdLnOQNfuJkqO6u6vXcDv7CRFJ2eaKMrGt\nkItIhEBw1AplmSCN+MHFzWMe17R5DgcT0QduzRs7DS3Ae+ZqZqA+wgHLxdfg\nvfFRnOwdVKoVtEZvVeXGtM6oEIwkJ2FNmviwp7uORUkdSFe/f0d5a4dvYkWe\neLuxPqOp9IrBw/XoyapNP8dLVR81IoBsMTxDq1NRO78vLP+DQ3zfBzkFN0ew\nfJ212Jci7GTiEkPZHv9Mgt3za9LL60RRPZT6TjBIpn/gZUtxjznaX+53MYVo\n8d8y3jNGAZ7ohiB0dt68im09nzN/dP8trlPkR0gbjckJmx/Xf+LDM8S0sPNB\nScOrpmvHrbvxLnj2vJDHMLZcRS2xzGUJ1AaSdkWxmcljCZ3Uhs2xF/MRAiKQ\nTTGdujfdfTH0HQ86sUpBc4zygNyKsSTVihMgFahwKEE18S5zAe/+1r1s5nJe\n4pjaln25Jx7qgT9ECRob1gy3kW8GqC98LFakDr7iPMoKx3eyKkeUHZrclnWK\nE5+MjEJSKbAVOCipZq9pGWcw/hbqy5jdWmeqyC1S4CnIWWIeTYer6DV4P48n\nnmEu\r\n=6qoZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d7f7ddbc4309b6a8ce5cca3772255dcc6acdc701","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/rtl":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/shape":"11.0.0-canary.dc9c84023.0","@material/theme":"11.0.0-canary.dc9c84023.0","@material/button":"11.0.0-canary.dc9c84023.0","@material/ripple":"11.0.0-canary.dc9c84023.0","@material/typography":"11.0.0-canary.dc9c84023.0","@material/feature-targeting":"11.0.0-canary.dc9c84023.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.dc9c84023.0_1617126579704_0.38039353501055273","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/banner","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.56fc26962.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b90d983a4a0a1b4489f25514e202edc94fe9b31","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.56fc26962.0.tgz","fileCount":41,"integrity":"sha512-awWfrAFRKr/kdE2Ey3k4fSHEB79Q0KdyFIoYwqFGjnaBdhFN3IV0hb0qTSdxygY/bPYI6GtaXt0sD4/EnOGBug==","signatures":[{"sig":"MEUCIQCXiFjTvkzya0KlQIi8vo2ch6X4VHw9I3jBuu2OXGbyUQIgOQ2haEsmo3kN8KBGnfLZrJPnhRi+3OWm/wyxZ5C1kL4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8CdCRA9TVsSAnZWagAAk6wP/2ZHTwRT1A0vRWws9IXC\n5DWLRklj/dMs9EFGHk/76gPtHYpPyHZD9fnoMuciHNG0wkz0ve2gxDpNjsTW\nRGLBjxazdI2oMS459zTgAG+5pZhO7MTwT/sa869HUAEPG8EI/YE60K78b623\n3NAWXw3rBCCzKCt64EAWTKXnGgefl5Fw9V2AD6f8aBzUJSRh1rfaCSW+00+y\nojhAXzpMZTb8wb58LL9Q8gPsHd035tQxM4E9TILbH15jTnaM/sSpeHrPY/lC\nLGNr73EwJaQFrL+uBVds8MMMMqVtsrtp9Ej9FpDYTaYqyjpn2THfO5Qpg9on\nSQ886RhG1kJJ6IILgYgFvXFBenl7oNqyypLShrY8h9j5OxYRdyL+QHDAVoNw\nJlxBx6GYxqX3KTTWqqKflp4e8opyxim2rcnm6qjAUMP5U88S2bdmiNcOPKZc\nWMovZoljRYlui98pV738Fg7H4RT1x/oVfQDP88C0dIcXvR4kmR2YW5mkeBJU\nADT60vHCHmo2o6ESONtZAxTP+Y8xAMmrN9NGfUVCGA9tcMOW/u+ZwDvDoJwX\nMCvmD8FrdP6civM8x4HUKl5GwMMv+sU6j5f1farGyV2jnA2C9LFWxDHhMmiK\nk7yny//5fdtfI7Vro/pg1Gstf0rpXDd6lscYr4RrPenF9CrohJSjsQp1IpCj\nA7SI\r\n=G760\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dfdb8792d4ee8bddc61386ac6a8e7e216c1681a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/rtl":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/shape":"11.0.0-canary.56fc26962.0","@material/theme":"11.0.0-canary.56fc26962.0","@material/button":"11.0.0-canary.56fc26962.0","@material/ripple":"11.0.0-canary.56fc26962.0","@material/typography":"11.0.0-canary.56fc26962.0","@material/feature-targeting":"11.0.0-canary.56fc26962.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.56fc26962.0_1617150109032_0.22666728140684733","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/banner","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.bc318250e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1786efdd4d61017c4b2dffc32069f22b145e5242","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.bc318250e.0.tgz","fileCount":41,"integrity":"sha512-//Dv8d8qwAdHVx0NS1ibUvG7JQfBUU8VCkZc2ME2vbwMNVnVWrDk3FMg8h1FMGop3q2De6tZiqbvdGUwm1PW6A==","signatures":[{"sig":"MEQCIDMDzjgHdGRkoaPn6WBeMl0kW4PmTNNlp3mgIQ818ssGAiAGj2QGnRJf7OhN6bvt0rz2B98J3F3YBdKGwXI0pV5ECg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9G4CRA9TVsSAnZWagAA0HYP/0cV6XsJuZkNV88e9rg3\nwKq84IGFju7uYMaQnR0xKNuN7NQEwyUX8X1aCd+uEnQa4Ks25lhcMFfqLOhN\nMcjBefobKa+iTeiPkZIdNWnK1oP+hd0zi60JL2riqV0qMQFm3lTXHA/aTj8I\nNzwgnfYMW5apoNCla5Ubtg///dONHV5Dmvi5Nq0xhCUtN0zsVMMerx4CWXsS\nqKf4NGyayMDWI5dj6OuuM++JeKoWM7RcK16SXoyduHkPdK2k8UF21aB6uzC3\nGMP2bcYkoOP/Z5v1ltGuiQnt0mYyIi0/Sp1qr58ZPKb5dDSDs3eRlug1G7uc\nC/v1hwq4Dl9Rh2TVXR19RqUt4jalO5oYwjfxw4jX67lJOHCXQRLEswl121mV\nzOmiey1l69b2SLAW+9Z9eWBc4GyoSHCtNnpBXy0Nbtk02/Cvju4J5IJUN05V\nLCooGBzjXn51ChpFtB72zfZtMI7UeQiW+BI0m6vf2G77ilJwwOzbxdD0jrr5\nz7yv05MQpaYM2knPBsoFVRGVBwrOQywf11ILm8t8LksQLtYxm2XlHGUTq8g6\n4nvsvStuevK6p630o5ywvzaP3EZFzQG3U2STv1e0Dt4Q6YzkPS5Tvs5/cqfE\ndwOV8GFtKITpbxziNCKbkjPpo4urPjHfvQVYjsFEf2csfe56hwj8vrvbYjEs\njB4T\r\n=ZZea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1de1daa9e4e0ee7a779d524a027b9e7566841b56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/rtl":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/shape":"11.0.0-canary.bc318250e.0","@material/theme":"11.0.0-canary.bc318250e.0","@material/button":"11.0.0-canary.bc318250e.0","@material/ripple":"11.0.0-canary.bc318250e.0","@material/typography":"11.0.0-canary.bc318250e.0","@material/feature-targeting":"11.0.0-canary.bc318250e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.bc318250e.0_1617154488254_0.11317484319715332","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/banner","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.edaee19aa.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69510b6b45d1f5f7d05154e8421649fa242e52a5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.edaee19aa.0.tgz","fileCount":41,"integrity":"sha512-B1fC5GBJCRtgX2syzXlhWJWj6GAL80xNJSaq0NMc6ifXzV+zkjl6r8dkdnXuaVwGfvH/qnUPjuKq1KQPBYbLNg==","signatures":[{"sig":"MEUCIBegbPuLwMuBSOzAODNhUSpo9CYOyRvEqh2eJ9fEG/d/AiEAxeILQE1JnX/kRe5XVghTyrvQ20AiTgZz5Xx1jP4+RuY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qfCRA9TVsSAnZWagAAeS0QAKTDL5WDDvdLjWC64j+n\nagPaI8TtFagGE+GqT5WN6WzRXtU03COva3BhSapdH1fNS2Md11LW9+RSV069\nRF2iPlfIO8DNUOfRGdwUyNZso96yxK2X7UNatT3I/6sdxd/lS3im7/GBUaVe\npqDnpldBd8PqNt5a2wXWBThokYKMmPlEA/5wqHWuU0U6xZ6cDoPr4zsX08i7\nhdaNajLyiN6WcJl8PhT9bUop1gMkD4LqUHeNNWB87Xl2UOao/THG/VgX7pDy\nsqXnA/xrmz7fYqIrnYHbRefOxTc7Trghcs2yb9CRj/IGpPM3MQ1Rx/+yp7Lf\nZ2X8BjSKOupzCTZtYSgNRPsva3iJzDSPm1yB81r0eNMRh69o68hQJvN4679w\n36bodsDMBZU0itA/ElwOFNMR83PhjzGb6BMWWxxWz7gsQq3IF550Dio+EPLs\nnXxbwDk89tLq35GgzyqqCYweCgSUlIDMBpikq5NJEfuB4dc8NjbWAYxocStL\nBdJ+CStM477ZPFHfP9/5f4bW8/9ITYrAI0epevgnoFOQRUSsqHZL1IYCJki7\niWeu/Wm4TV37msJUkqDlr91dr7zSpjrzwXHzzuIBZOo7sn8UAp9/pxEcEQ60\nRuBpXXqnJWXob8c5p2+eDlgJ3CLFWl6PgXjBRHIX2q4abhUVxQnz5aLByKL4\n1wPq\r\n=6xFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e2249b4be4cc5bba6887f28ddb9a3b9cc8ee09de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/rtl":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/shape":"11.0.0-canary.edaee19aa.0","@material/theme":"11.0.0-canary.edaee19aa.0","@material/button":"11.0.0-canary.edaee19aa.0","@material/ripple":"11.0.0-canary.edaee19aa.0","@material/typography":"11.0.0-canary.edaee19aa.0","@material/feature-targeting":"11.0.0-canary.edaee19aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.edaee19aa.0_1617156766939_0.7610696499337342","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/banner","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.24609b822.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5a2375f3cbdae186ead21d710a8f82075cf3d404","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.24609b822.0.tgz","fileCount":41,"integrity":"sha512-DmMiQBUWSCJ/LsjQo0uM8cQzP9g0PoSzwObHPutTqaS1m8X5HyOwr6Dz7TbhsEnFunedWWSV9+rHIXUrJn+Wdw==","signatures":[{"sig":"MEUCIQDiJ6i99amqPBtX7phhX1ia12T4yXg/CIxrH/Dweyi3fgIgccrvH0Gz3YpgomWufYDiOKTceRsln42I460HNUMCDss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJfCRA9TVsSAnZWagAAI0AP/AxeP0c9Z45LRRMxroXs\nZl6rJJxyYekeGE9w2idMwmwasgBDuvrmJdwnNqGUEZ+AOYZ1/JDST/8saG40\npmejdzdNqZxoVYj6t2UMTY/SVobZU+x+v3CqUjKaTA/RDDl7AVlYgQVLCFn5\nM5V+a5zV5VRTo4xnkPI/qgexV27Ce3vSGKUIQ90qr7CEC8tGYs+qPcdu7CC2\np6yIX098C9nTicZQeSKclwgmcb7m3yBlN5Mbi2fSsVj5Whh88KwD8wJW7XhI\n1OmsRvPt5iTsscGZOu87fYcb5ojbi05/Y5GLcNGMWXFW5i2P9tZpZvyhYf1W\nW5PsnjK165z+GLhBN82HDoH/9qDP076DdR6yoNtfyLmX4T2lYIE0mBUef2wc\nheju+pObbqWnnz9Sp0VvtB6YgQMEqFL44L14vyki4/UPmje4fJF08wgGmBJO\nkPFphhLvLZF8r4r371I76N0l+xzcTMWHsQoycofzZM0GMCzLXOdYJiw0Qx8j\n+p4gTV6iSdTxdOgBzax5AtS584PL/CcoCN9ADySmg/HiDOL/FG/GE8nMXVbN\nCBVDgCNVT3Qz2fslf9FYxnjTND4SgsrBzGzXvc2iWamej9QdktjFcUh96kcx\nZeSMp9hrSxF+ksVrgAxC7ppxZx/o72jGiOUPpKKvq3HNGg+S2wwLdajmttd2\n2P/5\r\n=xQfI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"50b495134dae6937c2262389aba694d7664f78c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/rtl":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/shape":"11.0.0-canary.24609b822.0","@material/theme":"11.0.0-canary.24609b822.0","@material/button":"11.0.0-canary.24609b822.0","@material/ripple":"11.0.0-canary.24609b822.0","@material/typography":"11.0.0-canary.24609b822.0","@material/feature-targeting":"11.0.0-canary.24609b822.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.24609b822.0_1617224286765_0.002752752978990136","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/banner","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.b6cddc2b7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f6f8e25eeeefee09091d2d86f622733b9646c054","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":41,"integrity":"sha512-+iqHPH5fpXlvTBge7qbbaQ4piZUPoU490PM9qSOvLuRav3jPtJujtxsafEPWHurjvo2qM5l2rAxV7c84EM11uA==","signatures":[{"sig":"MEYCIQCMil2uoGc7klDsIf0h1/qnV7wjCBYqtaUqCz2lf3bnnQIhAOdDzoHeYbeT7WkbdAi5Fi7+kv69tU+mEmLYETyo93yX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeF1CRA9TVsSAnZWagAAODUP/1JGptdaVlPHt31XXHb7\nhqW5XNlaGDI2spLvDJQSluiDCP0L6gLS1Ih1/OH2fiE0basCHFSEMhWfsAn3\nyZuNwmK7HXiE9SKeneywCAUhupeqrgZVUqNIqMummBtCZIU3Zn83smoIRVBE\nhA3nB64rOyLDCE3VT1kSJVFtpAhK26ZKcmoAtrngz7AvrWUNbL3+R5NLl+Z9\nuQUgTJliAIvjjJWg+6cz2QmZhKB5YeJphtCU4Q9Yj5HE8Du+Pmxw8jujXbki\npJ2uqtimdVR54WjMmbHRMwnqMP1fyXr5hIRjdy/ePl9B2DK+i5BglR3Ez8Ti\nQfnL57/OlfgyFKZ/aMQ1QK4pvGPSfVDz9SEwJhEtphu9Bgnqh9XZfeB09nqd\nzcGKZkr79NPPW4AVHi4g8ufZVrnRBOJCxiFd890J/ZhGWSZHg18y3gKeS3nw\nAn6oNC0DxRONnbiZo6OIKn+8wT0wCCrqQi0DFTzKsVN3U57PSOqLLhF2cSKq\n0njpDlK3N/JEGegS6fOxM4XaZZ+RfLJthu56Ezat5wCj9tC87HId/DsHoYLK\nkUX0M8MRASrR06SJb0odj7XBPiOY/rCcHdLoSItKT40+/n4sQ1L2Ugr8/0sT\nv0XXY3HnGAl8opxJ/NT5+2CFxYY9V9Wn4oAe/EwDAuDl/XSNECQ3T/kjdsYx\nUem3\r\n=WwpR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dbd92fa1a28a9b31a1e4eb476b15f4cff38986b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/rtl":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/shape":"11.0.0-canary.b6cddc2b7.0","@material/theme":"11.0.0-canary.b6cddc2b7.0","@material/button":"11.0.0-canary.b6cddc2b7.0","@material/ripple":"11.0.0-canary.b6cddc2b7.0","@material/typography":"11.0.0-canary.b6cddc2b7.0","@material/feature-targeting":"11.0.0-canary.b6cddc2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.b6cddc2b7.0_1617289589266_0.1805312377890751","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/banner","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.94937c78c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06c6e910208a2391e315e6da64ea25d10d9b7f41","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.94937c78c.0.tgz","fileCount":41,"integrity":"sha512-M5v48SYHWVIwpd7OCot3FweqVxjXx0tUEoMmxcYd5xmkxXJFtcgv4SXfbg6Uv4thLZPgYNvIiOLAoreZ1z0XPg==","signatures":[{"sig":"MEYCIQCu1KHPnK4rh+GLJrrH97FoijDns6xLiB5JDR7fBveBPAIhANcqfnG9bD+LqZlapWVfhNOykRRqu5ekG4DWQg9eQ5Uz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjTMCRA9TVsSAnZWagAAy88P/iP5V+XwL/qlvW924ZF1\nXM/YAcq/rm5vLl2VxrYE1WLDpL/H8M/HbWne7XIH+NggkRJ7g/pfyT7RQ6MQ\ninEyHHG7b8+oZd1ocJyhJ5Z6BIdHvU0sLmvlzif94TO6Nt6ngqIhwqvXz82l\n/CoK8jXJozaWTszQsbl6KxcDhBjRpX5PNi4jWF5+jV0DQaGhUW9HSECgUrHe\n/9iK9JM20eVO5TWEofZyqUngHv2/Jb0yRSyfc1Wyr+q+odJ6rc3M634bWH7L\nkmd7XgZNFgbxhDQ7ituhXUD/hdPqfuw4Dpvw0f2K34SIb70249CRNze0SwdE\nC+AOd6PaiyAZljKMrIbsGDmvCPEZqfehUEW74cEyWM3B7pUgem/DXgoksMo1\nQvfSyh75xp5EHgQdHDXGNqxOzQjGRf7fC25+svcYsnv23XBZWxjNPB4FJ2/N\nKNQxn9spMQkSTRwkYpoeFtyBB8BRZWcsvmFmDQ2cuWkDq+EBS7eU7D8EvFz6\newW4yxm4jWWRTrq198YZql39ytlaateQybJKlwF4cvMZ6UK0jCN5MIX234EW\n8vav0MDjDverBO2iFFAJCE/zup0KOuuLuNpzUw//MyLCdw3ru3RTHkEf0Gja\nNt8qIDRlWG0lBdXpX8I8+nEhb6MvFAeOhChZ3Yp6eNqn9oFppasNclTGiOCN\nHPeI\r\n=6+i/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ada608c773d2657680fffa3be444debd83967f00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/rtl":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/shape":"11.0.0-canary.94937c78c.0","@material/theme":"11.0.0-canary.94937c78c.0","@material/button":"11.0.0-canary.94937c78c.0","@material/ripple":"11.0.0-canary.94937c78c.0","@material/typography":"11.0.0-canary.94937c78c.0","@material/feature-targeting":"11.0.0-canary.94937c78c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.94937c78c.0_1617310923463_0.8693456918060525","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/banner","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.e7202cb57.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85987832963d8e5cec0e44a84476644bc6f21bf5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.e7202cb57.0.tgz","fileCount":41,"integrity":"sha512-H4ta+B5re94fiTUNP6olyfnsHn4kY3MgdLw3ratYR+/9rfB6tlsP8HYHaEaB7hrSrhnq1T0EeLBoplCXVvI1gg==","signatures":[{"sig":"MEUCIQDDA7kQHmUe/oscr7cR6unEvAdZZKDjs/8x7YD6nzhcgwIgPOmIDKLic+iq/MGNe6OZxZFSXZESVzgifil1v/T39Pc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2zCRA9TVsSAnZWagAAUdYP/RuQRA63pJ+PKpbVuSfD\nRXsX9Xar0XgEAtpca8opz6pZNR8kPPykRNem+pvApqdPyK2DOtdwITtJq1pU\nHhU/d1jnLqMYVvojGKyU8B01vIDVEUQFVHmRbTuqSj7teqcQMF0+EsC1UHI4\noV5dKiQrj91gTLw47+ljrk1HKherZgU85+lZFioG5dVQEwDpWtFFH8OS6dSI\nH3tRq6k47OenLHdPdBBaYBe/T8w8NFzcnunW9SBSaKc55NvH3HsYmThhFTqs\nTx2x5TBuNZV3KMfdvbQYG1lxq44jMGCg98mHMRahfKVlHroqUTfe3aKkn0xz\nBf8NJUuVvYJGtmdZoUczap3f4PDSoCovZnKn51jP/9pz55jvnWr/3shrIJdR\n9Hz17Lc1b4UhS0XhhlpB4PgG+bTd7Kj+iPUb4jzdX/FvR9GLqndtDm/aILxp\nQUu/MbuWIkNx1K6mbinbO4PtdRXpFYpRpx/tsCPA9nG4AoaAxDp3PHh8RtBN\nDO92HyTDwb12Pq/BOSx+P1iDbeZ1kpqRxVTX05dYEOXYVmstEGiVPR9XUEEo\nn8xO1DsRh8ypg872FW2LkrrtPMK3MPAGIA5qJ/2pdP7mR32/y/EwqTBalJ27\nXyYhS9Knncka+GRUssJ3Q11XahN1tfx3vUHpzZMaevVN/Z1emAkgnNnzd7KU\ni1QD\r\n=ga4D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"113d79c2879cb1503ff12c8064eeb38ada16b472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/rtl":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/shape":"11.0.0-canary.e7202cb57.0","@material/theme":"11.0.0-canary.e7202cb57.0","@material/button":"11.0.0-canary.e7202cb57.0","@material/ripple":"11.0.0-canary.e7202cb57.0","@material/typography":"11.0.0-canary.e7202cb57.0","@material/feature-targeting":"11.0.0-canary.e7202cb57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.e7202cb57.0_1617317299315_0.4357997914938829","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/banner","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.1f636b205.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e48f0d2035d81755b08027d25d1d2599873a1bf6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.1f636b205.0.tgz","fileCount":41,"integrity":"sha512-pkPmJeI3C+stN9i/ulydkJqxtgWf5jK9wtb5QNjdv2Sn5yTekdk82ma+kycfdIcdT3ZkwFD+on6FoNbmV3P/Aw==","signatures":[{"sig":"MEUCIQCTGOCCO94Y2G9QRic+gc47BF5IYI+F8fzZ/I/bIcB7bgIgAT0aSwjfsMVVp8CSGGWIykbaXFGOAcOHj5p70mTDpUs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5nJCRA9TVsSAnZWagAAYFUP/2oNy/ptIOHq3oTyjbJ3\n+f0S+Eo1gEDs+TgrwK6+kphGpM84/2bFOKWlQ33KOzMEJ/U+aZrc2XkrrHqL\nqkBYP+zE8dAN6NxTVRzrhKprf5aldiUCVBJNvTK6VwCtqopCGKnALQ0nbkOS\nDnMGD4pg6jEcwKa7mj3h2fQKZzuunnYc7WfasvKA37YdwmLgJrmLphjEXVWE\nw81lP/2ZyoEyPi7wpiMd8oFRhx4Tr+q5OdZOWwztgv5qsYtFopMZGqe6GoYy\nLv/5oNJJdPHFXHko2PbjCByMl2ImiH0z4TX/8YjboNsBQdxuM9nvEds7V27V\n1d4F7O/w4d96Y8Swr4ybGfMgHYQq2wb2Xz+p/NgE1rvikJrGoqN+t+I10TKF\nOTDpWgE5VzsIWM3RV+U3wwj8XEWFTYEKq1ThUPopu/knE2oE+bblfvx44MHj\ngtNwjbQy0h8TXfYTGtZs+R9tcvXXPirdOmGXjQVHCPWXTrPHDNic47qYxrTT\nZS/GxKWL9ZJQNBrY8v5kRXejazVLh/RV9jKGv3XJ7CkUfdzPVtD3Z/IGH5cT\ngL6bTEkjNxrpJAfM3s/r9QWFw425Ij4zQ3651y0KavVrNb5zxyHEJRyjZVhg\nPSg+sCejIdURvGjyTbczTzjZnK0luJU6UE+ultI9pNknjgtD5gdTQdZymF8+\nsWBf\r\n=J+r6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a523c6467be13e8aeead7e4e2e5f20c418871bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/rtl":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/shape":"11.0.0-canary.1f636b205.0","@material/theme":"11.0.0-canary.1f636b205.0","@material/button":"11.0.0-canary.1f636b205.0","@material/ripple":"11.0.0-canary.1f636b205.0","@material/typography":"11.0.0-canary.1f636b205.0","@material/feature-targeting":"11.0.0-canary.1f636b205.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.1f636b205.0_1617402313396_0.765569115422325","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/banner","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.94f50b260.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"299be5eed186f7109a1cb6f77c12b7e10305e1d3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.94f50b260.0.tgz","fileCount":41,"integrity":"sha512-GK+zwA+sSlggBmgsoqYmFxfFydPzHOPs/H6kExEExrZNc04wv/JdoRbpHPXANHy/RP2U2Q3L3aFdor0yzszT4w==","signatures":[{"sig":"MEYCIQCpZYs7P+27eWr8epVIRoYX2Qa2eeJhiYcovPXJkouARwIhAKLqsC2z4y2mkEsQGEiQFwPPSCioA1nl5cm1xhQZoqrk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydtCRA9TVsSAnZWagAARNIP/AqvUd4GXiu7FG+g3F51\na+yEubqHGR6RU+EsQEgz8QfRe+/SaUcAV5wKqThsVzYU5ThyJA1ZRPYtMih8\ntrF3rUGsG1i1sv61whaBzIXArc3dHRE432D0sBcPmpMip0gNNvMxfyxpiiX4\nKUgu69PIuouT5TMm0s+No6Knp/l80BaKq/0b5RZAXSIPj5osOe0EIHx/ZhlJ\nS+ojDxktdYkX4YvX3xOD5OYyGk8sviq94gZ37QuH4su8JybhPaPdATGth2Nc\nHIz355Z8V0+OM4b8gE4gwr7gt6UdpaBXUKABXDnMn4GZs0P5f1Jy2epWy/ZS\n3IMY4cI4mK3kTlgtCFPV0D+GPxQsF5r9kM/L8Xz3WS6x0B/25BO2lrOWFkO+\n6yh7dgTMj1P85RZ7JP9elCeMLSTI5zJT7HLgamiP++oyiJMHI8ula5UbBhIm\nCT/w739Fr1fIcGSV5MZtZ+09OUbm1iiNZyx3qzpOGMEzm2/atNLVHdxArXip\nZLIRNyU4+VEf9EGOn/N8zcjeutuzRa1u7MS0Y2y81bNpSkBR4VGRw4LsItGa\nLx7VgVS9wdIXAKdy0maSVkUZ613m8Es2x88XTDhXwOqOYoLlMcCn80//FW1y\nN2EkSj4SL67fUwi3WliRazF/mBstGILRbnJ4l9uXXZIBv8GJSQHY+RHb2ER8\nZU8t\r\n=LdEM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b5f84c677cd669d6958748a69435b56ebb640bc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/rtl":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/shape":"11.0.0-canary.94f50b260.0","@material/theme":"11.0.0-canary.94f50b260.0","@material/button":"11.0.0-canary.94f50b260.0","@material/ripple":"11.0.0-canary.94f50b260.0","@material/typography":"11.0.0-canary.94f50b260.0","@material/feature-targeting":"11.0.0-canary.94f50b260.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.94f50b260.0_1617635181099_0.6447663627557556","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/banner","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.a4009b80a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a07649fd92bd6b934dda70f5e87b72e9eb564d23","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.a4009b80a.0.tgz","fileCount":41,"integrity":"sha512-RqmZlrGPALAZXiyZa8QX5Gku9zFH1YA576UaeNrceW0pzbZLAW/qVdM1yiCrqc2vqSToKtvMms5wWqVUTbf7VQ==","signatures":[{"sig":"MEUCICmmcLQ1p+cOknw7pkqYIhckIu5AXqBU7zdZzXMoucA5AiEAqMAevZfv7C2dv6OFsPQIkMj3DqafpymASecMNc5Bems=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4jECRA9TVsSAnZWagAA2o0QAJevHmCNN+tBYcm86DyQ\n4fTjYNeUItZWkbtbnaNJTo4PSqHX5onRYo+htv6855CJxwc/l2SqYDY6lHse\nIKTg8719npQGIKdV+NgxZgxwXRuCD7wXyPZiH8z0IzbCrHsTWGmLHG1VV/mh\n6ECAt548a87rErV9UIaM11RB1ZzGG1viqUyXivmJn1J5AKpBPj5dmv6IYZwB\nLYMkttt7aW7hConRJwx4tSQFP+K4qOXMogGMEnlxsggaP4H5g3crZwgfn591\nyhjYl8+BHP0POtmjc/OfvUh0xxgI3hQggiX8orsCw2NHiNCetNPkdFf9P418\nMtT0FuQD1uU+MtYsp1KCz1A4pftrW4DvS0qg5xvoYfej0gHBp734HKadPGfm\nJA/4n318og8YQ4fADqa0x3JSg79LtDfCMseIZbtW7b18CXSLaqYGZcPkv68u\nXz7zsSFSdns4axyRihNB9MKQuNmyJdLI6lBBMV5VUuXMX4JKxqnIvPpEmPBx\nll+mBvkaop0gL6SkIyad7OsJFQIQU+UV4Df2r+2muQuA0XiUPW8FI4Zk9lb6\nMEU2DEMmIbCpYmU3YMKu1DNMeajFXm3MqTP2e+LYCEF3CY3S3LSauS+L+cfl\nDXgWhFMRF6Y0edlcE5dVDUuwhrJTXc5F0QbtoIgLU61bBmU8N55luUSjqsud\nx886\r\n=a2w+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"35eef76af32a43b61b6a0fb725dbb83cfa5d3421","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/rtl":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/shape":"11.0.0-canary.a4009b80a.0","@material/theme":"11.0.0-canary.a4009b80a.0","@material/button":"11.0.0-canary.a4009b80a.0","@material/ripple":"11.0.0-canary.a4009b80a.0","@material/typography":"11.0.0-canary.a4009b80a.0","@material/feature-targeting":"11.0.0-canary.a4009b80a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.a4009b80a.0_1617660100400_0.07836723635787268","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/banner","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.15604bd0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4daa2814d5b2dc3bd336f46653915571cbf96861","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.15604bd0d.0.tgz","fileCount":41,"integrity":"sha512-0O+/fYf6onvYdZGWrvdTIaWi8Bb6DftHM+5D75VQQIyrsql8WOhV4iv/dr0mapuAqVVjUdE+UIFpyv8CBAoljA==","signatures":[{"sig":"MEUCIGb5+0YxeVYg4HbZxhNyhukfsSN509I33eP17aSg+LdRAiEAtEdRcnFBKv/iqgiMvBlrDpUlRq0aUQNARt4QabwLvdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5KFCRA9TVsSAnZWagAAw28QAJB17mDeVkcCMH8tBA3a\nOQOsS5ijaWGRkxW6RlLjnO6g4bBewcF1aTBiNzFarl6fQSGwB5w8mZXoqxl1\nEQtFyDUz9P3nC1EwSUSEWMDVIqryiy4YPjF9tD2N8qWIwP6Uhm4Jom3rTPGd\nRiT4QnUfFD5JKqfbaz5w5TheFTBsqDqiO4MMUsWXxmHG8M2ld2IAUP6QiNWM\njRqjCZxBLKjKmBfH2W0mb8PfQpJ8wfKmbjr4E1kUmCQgLpJZ1vZpEFP8jnbV\n/c4+H3XJ17s4+dzfCSBfPg6JdgYSLrcedvjad1EvV/r7QqB6Yt41XwcZRXtl\njc38sGop5+4vTfDo/u73MXjvocR6UUSrVjmBRynZ1VXznIPmfHtAcJP2/ADv\nLmjckMsACRYp8jNrH38olLsvbhewBqQA69ESb7DifLfkpRh0Uh+57wr1Pyu1\n2TcB6B0r9DnZlaw7RPMNOXqu5iCUYRz8CzcwPMwaArBzRME0nfO0xmvN+p8F\ndbvLd2U8VyJEJjrItWyahS7iytk/+du23upmgebPnk8Rse/Jag7pcwPTvha9\nKd1M5eq9q9RK2QgWLirRNLh4V4NA52IVJRktnz8UrNQ96k2dlpSRz3/5m065\n5A0UkaqP2lBehc/jeFX6InBEoX6SRacIAibxOoLv4u8o0cVqKd6aYEqNKW8j\naAQ/\r\n=vtR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ea3949c02ab8da1a812a2127f1fbc7e7a3c98532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/rtl":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/shape":"11.0.0-canary.15604bd0d.0","@material/theme":"11.0.0-canary.15604bd0d.0","@material/button":"11.0.0-canary.15604bd0d.0","@material/ripple":"11.0.0-canary.15604bd0d.0","@material/typography":"11.0.0-canary.15604bd0d.0","@material/feature-targeting":"11.0.0-canary.15604bd0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.15604bd0d.0_1617662597043_0.7021083659818175","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/banner","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.76da7876c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82f1573c065f04f9279638793163d901bd77a185","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.76da7876c.0.tgz","fileCount":41,"integrity":"sha512-VLiPhpOwqH6Jac5WxCYxhcWscujcVU1C/VLNTtZUJ81jvVtFj4GGQRU3yJTVXbcl0Yl8VC6A+sK3fky10FpIow==","signatures":[{"sig":"MEYCIQCyOwAB1deap+DhUt7eKfu9NA2Msdi9lGD2v7yHV9vkUgIhAICZH89dbM+ZXg3iVECPUMxyNm5XhaQdIoaIO2EB5cZU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ7WCRA9TVsSAnZWagAAuR0P/3uUsAFQ5uQLnLvMk/Fg\ncDznPDLRKjYXzSQbta/hnfztkXUYW+jloqZYLtqg8fv9PvKZ19aI2pF32IJ7\ndtp3s8HZVxiwgbYiJ6FjFTKd3n/JTfmUd3WkVEPdmvqAriOGZgyDUyQDxHUO\nNqdWNkxLR3w0vm7KhY4k+x9H5NTwGOz94r9ar864c3sd+ju37lmZRdo//hMz\nx3ZBbBILpNABRkxWh1+g9LKT53vxuJ6qGmsfOXai7YVd+12KXg5oY5/Ibpda\n5nuj7phV0Dm8eym0Pgp1gv/SKqQxXChxpolhBO6LunbkMTQMCzc8zZFkLBOF\n2smmvHYLhA5uNt3cBYFfjmksMP0Cg9rz7iK7OHBmWZkn+eVxx1TInszjgYH+\nhp/Sbjvg8/5EWd83br3nOh2vqj8x/muFtALQ6sCnySEtECxuET4XEqW+1n1C\nagRw5rAylGuUpzIiVAC+bt12bplBLC3vN/yDslJF2o+CbkbrS7lYGEkGIJoc\nDZFGDqvGc73bGLWCz5W68+J2Xrs2pX1BP3pcjPk6votCywQDGnmwnqvQfO91\nVtqpWkJk5EbKDEfGeV/qbCvWlL1+NsPpKGYz7WpCLwJGW14c8hZMCdjuDA26\nzQ3boXovDVygTti+Jl5c0LgoDWesl9QY+KA2uCnq0s0uWDiJdF5Zkcgoa4qa\n+ySM\r\n=FPdv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4bace63831a45c0c9e6f786768b2aad0d79087f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/rtl":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/shape":"11.0.0-canary.76da7876c.0","@material/theme":"11.0.0-canary.76da7876c.0","@material/button":"11.0.0-canary.76da7876c.0","@material/ripple":"11.0.0-canary.76da7876c.0","@material/typography":"11.0.0-canary.76da7876c.0","@material/feature-targeting":"11.0.0-canary.76da7876c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.76da7876c.0_1617759957947_0.40523997441436266","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/banner","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.6bcb6cbd2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c13561aee496eb6f32a299155485d367681f6b1f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":41,"integrity":"sha512-5aXNZGbaY+kXZOinAZsierBiMHHLgk9jBQfknwV54SIkAe4h8hQbJZmfpohXw03d0QfKvomA+t1njI57wGkBDg==","signatures":[{"sig":"MEYCIQDH5MJ2kLEALO0pZm6mBMrtEewcvGTNqxiXCv+y2S9J6AIhAIz21SoqoUhJbW7VF6PSeJ66yBswBLglcW5aOy1sdf19","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgAACRA9TVsSAnZWagAAj/EP/AlqgL1hLhe3eGOLNvkZ\nazleSoPq7R+fMF+HRSLpdP0CWmKJNV/+hVSEQUk0ETzx7xXjKjOaniORBHmb\nxsaneWZMg1fMviXf+vhpviFBYXTb/zjRXhuem035RTSrcr+kj+oZ4mZyvhJF\n7EIpaH1MSTsARalaLcTXyfj1wnHa9vWIFYo7GH29V3H+fQ2ZkmwhI5TiM3YV\nwRkzMW8oiT2Yyc8HC3IC2UQh9E/LuJmj3rhqz8urXRpnDuPWTOmoIHqEv8DO\nIouxhwDlFxcJVem5hzMxQXa8EK8Rz2UfnV4TTVtuulw7P8xiA7sQFUuIeH08\nl2DLXT47n4mSo90mv5iHhogFillWZg2zKClVsh3BUriZ6KxzDPO7x4J0KBl2\nN1WhZFXvsd5M+mot7lZrE9hKX1RQdUsjJHCkm6VdF9xcdGq3UzlYAM/VafH7\nV9mcRBDaSUIHLabXgu4+zwUmohsro6dvuDpj05owT5E4U6nimifwKRSpUAiV\n6VeXLequz52UGmFEdER1j2l0i232n5/pf1Pb8aKt4/bCT4pENoZbhUVeIvSd\nEcu2MSUkAGa0nhUkKSjJTkbuIpAAVocKHE++Ickz4D7QakV4d/+v802wkO8w\nu5jvaDajk2qcCVhTGLJxpOxhWfeSPrh64zzApvM2E+jeZF4oZgc/6vsA5Tme\ncDnx\r\n=VARj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f3ec57093899a7f082bd51cae05b398c31619392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/rtl":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/shape":"11.0.0-canary.6bcb6cbd2.0","@material/theme":"11.0.0-canary.6bcb6cbd2.0","@material/button":"11.0.0-canary.6bcb6cbd2.0","@material/ripple":"11.0.0-canary.6bcb6cbd2.0","@material/typography":"11.0.0-canary.6bcb6cbd2.0","@material/feature-targeting":"11.0.0-canary.6bcb6cbd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.6bcb6cbd2.0_1617821696455_0.4528593965816534","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/banner","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.c91e8d141.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ebbfecbd607716378acd61aeea271617d850183f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.c91e8d141.0.tgz","fileCount":41,"integrity":"sha512-FWsLS0k+EvvpQ0SpAYP3QYLe0Bht1tT9vpQY1Ew/myzkZUIDVUqTMPmdG7Z+S1ui63q/6TPMzSgUcziOXKfvJA==","signatures":[{"sig":"MEQCIFBopFL1q54r8YAUBfOW3g+b0IDU94IzjfWsyDTmYxCpAiANH98Hp3q/mpap/Pr22hj/9U94oIdhL3a3EB33witUng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDvCRA9TVsSAnZWagAAYWMP+wcOHv5e//g4NVuSirW7\nAVZmHqEcu0oEoSDBxDYMdS0HUBicYnYxt27eqtzt0r0sfRbGaYclZrPq6P5E\naZ/JBe5ade18qQjzxOUhtT5Ir0QCDPht4BWHk1t4c5kGgsJwQww9uoRBRw0m\nYXGhOJPqNMya2wfaN1oKhnDt+GldDlPW05uj630o0UZJiQhAM833fq77eO83\nVQ8xydakS8aKb4KeveVXjgwHZk3ynT+W2kzUZpe7tLBhZe8HvGCYKYmH76cP\nCKN81rDbYC/l7RnKHXxbA0Io1K+px0pFRLl7CMUze/ZHCobqH+vjLhRfWl9l\n5YrhOm47b5vHUiLgNYQXjPj8d+2Mty4/ROzUzle3T6gtZeNKLgQljoljNCto\nrpxOxYiiT6PdOJN1Vd9JTSms6fHDJblEbkqPq1sn/eOfDNmp/e5XYkJ4jh3m\njbzuEMKX/aeS8NEy9emB3fxGiuFrRAb8DIZk4lvSIpnumNI3JjhYpY6JinLs\nrnKeLGX8qZTVHU7PEeXfmnxRGoEJXOoyyxQcJmkSEWJ9KI16djLARiwzxkDO\nQEN9yo/g4cRGxbaXC62lQm1jd86EPtylQuZVfZwwOL/iYFqF0POdI880mArE\nZNPukbSZKD0Wu3SHx6WX0Q/7/YqLZbmIx+FktC7BlJTiLt7FvBgS0GWvDVFp\ntB6b\r\n=i1i5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b13009a2b12843e6eefaa0c3ae66fc519af7bb29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/rtl":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/shape":"11.0.0-canary.c91e8d141.0","@material/theme":"11.0.0-canary.c91e8d141.0","@material/button":"11.0.0-canary.c91e8d141.0","@material/ripple":"11.0.0-canary.c91e8d141.0","@material/typography":"11.0.0-canary.c91e8d141.0","@material/feature-targeting":"11.0.0-canary.c91e8d141.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.c91e8d141.0_1617821935183_0.3229210894704848","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/banner","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f77c50860.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"336493ca6ca00d4568aeb45fe633a4900c647f82","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f77c50860.0.tgz","fileCount":41,"integrity":"sha512-oWCJ5UcOJNeUMvhvj+S9BivNlPm0whPoC3T0ifhyiJjvzgaNRV85yawlzAOL6OD2eoJDJCEQa/wxveetrZrdvw==","signatures":[{"sig":"MEQCIDAHZBXfqaIWTesWA+VZVTe3ZOqa81yAeIaBqqgdRHC1AiAL8QgGaqLz+RMu5VVuoJYGL1lavbmAsB2omqn/SydgUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMcCRA9TVsSAnZWagAAIXMP/iIpMRJaQCmA0qG2McfP\nSGhaomeKvu2e08kQFfmyQP6GBsDwLKQAqKUZvtTkMdEIFLDsEVeNM4pQpF7+\nNtDwgSedvgOR4OlDpu/EbqVHqE0oknOm/agni316Oq8K2B0GTrmuM70Tdarh\nvL64A/AeNPHwPtrvzfooKmxqiJzw29ApPzhmSbjTADjRzK1COq+4P8daRLhr\nbbNOmwgVOh4kNgQaE46bGsZlwX/IoQbMcnEN/el7uuhHa+DP6d4tZJCYX9Fo\nzihVxbKajlCN0sbL+/dEvLBMUAP3XqvB1JGzBs38MZdHNrI53KUz6yM4ydQ3\n0HgDqLvhg0p7pnVLKdodzWJ1AVdjE+8AOz8le0aZdmw+d3of8QjxqUq38hK5\nOzXGgciCxUngxCiaQNysQOQET5L086nkyO8xc/TOnF0vvxSFmz6Ss8ggVFvP\ngL1WuA3Q/5R5NODsQzeHs2qBDVzjVyzq+3rFAuwnZudJ1+ChayAXpe6DmxpI\nI8C64gIA/iQRXc2oNDsDIJvffzw2VK9nmG+kQewufWr55VhaoCqj6xvWIZ48\nNJS1vCTPjFtxDlCQ03LiFLTOjdAVdCzt2iW6yDtmgZXhcfaoi9Pad2mi0WHa\nXlu0d1eTv/Xz6cwK4eybJtM9q0qSgv7sB9pAVPLEwlgktCxXQhk6jdWQU2gu\nEkus\r\n=h5pi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d35db9665d4a8a4f385b134c9c1a23bda8668fa2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/rtl":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/shape":"11.0.0-canary.f77c50860.0","@material/theme":"11.0.0-canary.f77c50860.0","@material/button":"11.0.0-canary.f77c50860.0","@material/ripple":"11.0.0-canary.f77c50860.0","@material/typography":"11.0.0-canary.f77c50860.0","@material/feature-targeting":"11.0.0-canary.f77c50860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f77c50860.0_1617896219912_0.5058143186460822","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/banner","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.367d88bdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"974b5715bbb2ef999e1654ba92740c7c04b17d7f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.367d88bdb.0.tgz","fileCount":41,"integrity":"sha512-LTVgo3IFAx8Ns35zKS45TfG9i7MClYGBJjFvJ7DXGd7xuIxHj+u0KRU2KsI9ijzYSVHlSZLthtdqiFuZIgBVqA==","signatures":[{"sig":"MEYCIQDaEGKIE8+3j9K5rFaGM5X0aHicZLWu+uteOv4MoqQ6/QIhAOKemrnzbE78Oz1KhcuZgTBALegaCfiCJcQIE1RxeiRE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzHRCRA9TVsSAnZWagAARc4P/0k8+VwvG8er1IR1Azpc\nAVbc9WG25bn2Hxxf3lV/29nFJ7wZteG7VkM4UOJOQoHcSJfrzzK0G7EJdoZX\nIlVhYQAMwkRVN7ucvTbZIYRObvEBVOmA+bsUvQt8qdgAJV4Wflnk6nA6yGHI\npTsQZpShCS1Kp2XkuGGrxBOUssg+DRlH245RIJKWQXzwdbphAv4iRW8TKEEw\nWFYw1UdLMOnDmxJdzLgzh+srVXMAIPsWxIAnhtYvkMOJxDZq4zpesvijNZSw\nXxoiBA59vydTimuH/9AxeYRDMWwUPDDyt0lGoHaLtfm8m/k5rSOAShLVI0fq\nl/AuCmNrWp0dTa/ZeHB+A+RtSJSAlvciFo3ZOuorpB5po560GZ8FwgE+6ZVP\npA/n63jo6OU1nUbt4V3dcCe+EIABiuv7ddWEdI41lR1gwB5COVlZgAPKAUyv\nHbFJNniM1Ldvnhq81iV5s0Jgd72GqffUpj5+BF7q24qHrrRosieBrGgh4Uyu\nD+2AqDAdb/bWCbdlEsuT28kCGiZDD9lVMBMtJcRPaTekNE6FgrYdwuk6i/bZ\nPe3dhI9VEbTdDRig6euEzE2IEdC5XnHyfEiGeQCbf5MnPNt/8zEC2b7O1J+y\npFJHVvsvb8Ma1HfwSZ0YsCoaJaxW1F9tDpi+VuzRzDUoH4+MbliaqetrJxJB\neQUC\r\n=56wS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ba9cee87fe351c7e76ccb32f2572bf3ca91e88d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/rtl":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/shape":"11.0.0-canary.367d88bdb.0","@material/theme":"11.0.0-canary.367d88bdb.0","@material/button":"11.0.0-canary.367d88bdb.0","@material/ripple":"11.0.0-canary.367d88bdb.0","@material/typography":"11.0.0-canary.367d88bdb.0","@material/feature-targeting":"11.0.0-canary.367d88bdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.367d88bdb.0_1617899984722_0.792523454855905","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/banner","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.0ec437d3b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8267438857e83e104ca7b6103f195205a6d5358f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.0ec437d3b.0.tgz","fileCount":41,"integrity":"sha512-JQ8aciBB7J8qCV2NJHh2FP5Pp1oaCSZjcfrMseBEnp5yqvISzW1e/heFPthQq8kRvQofH7RPi9g9t1Fagq5Szg==","signatures":[{"sig":"MEUCIQDmBWua5Q7xQBG+URf/j/LXi0O9ClK+B3Z5lGQZs6s2ZgIgLE6u+eb9gEFv8YVFY5YMGoXZ6hmTms1ZBmR14QSnpkM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1tCCRA9TVsSAnZWagAAch4P/1bOCKdtyHTOa+heBBUI\nHMyQ5D06HcIABcZN7r5UxqgtlCAoqYjT0bVkvVh/6+fW+5ghRYYJLeFVfNlo\ng/obC1NY0h+wHmJ+UVxmeHPqIunX57sa4agQoVd8S06HjLh2GpMmXTkQoAmZ\nQ0VbEFeakrJpKk+A6xfhel2Kfb2U2isaS0WRuxSl2bte/h+g+Oq2h8VO+oal\nrJgNBe1tnbGe/o4SqYxQVdnJblmdXBFQc2JP0/qyetYqQVlms2GM0W5SuGnJ\nHTan8hnEg42EQY4qq5F8gfL7u/hu6O3CT00QILfd8uIO51GNX+AuLtjacAgX\nJDAG5cTBnyIA4vkoFVC3aABW7tmTNBRdBsHA/2pfKCmyj6pjOdAL1ADmEsQA\nPS56dLe7DloYcYiHhobws+nzmbmVJsrAdHN/JAXYcEwzi/+aIfuaYEQaFZ1U\nhmjkuIf9RdFCYNJjyCHGMgHPQfmqplLYqFDNSSWOZtuUik04tbKVLCz48BNc\nssFLMqe/6F/PZLbZhoWv48gEJIU0dgIpDhipY8IkGbPn1UTqHQ296cwdjvEw\n8fcf2EVb5S+6jHBoN6iiefIUeLgCKYBJEfUgDQJ/Jcz4EyuOAvWxnpEw/PRm\nSfFKgz1zUJ5CfaIYkg9bAjUpdClsX7nLR1Z8YnGZQesTALhZ+a2LUkkWnDQD\nDeCh\r\n=mKrI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"50ed2429a570432fef9747a954d7c31d2dd11f0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/rtl":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/shape":"11.0.0-canary.0ec437d3b.0","@material/theme":"11.0.0-canary.0ec437d3b.0","@material/button":"11.0.0-canary.0ec437d3b.0","@material/ripple":"11.0.0-canary.0ec437d3b.0","@material/typography":"11.0.0-canary.0ec437d3b.0","@material/feature-targeting":"11.0.0-canary.0ec437d3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.0ec437d3b.0_1617910593822_0.7362199575475943","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/banner","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.b2fa996a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afef3b2a806364080e905cfed20371d8598898a4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.b2fa996a1.0.tgz","fileCount":41,"integrity":"sha512-9d92uAfzQ74tYXIG9Ea5aM4iOZQttfoq6MtlwgZm+mLeb2Pja2AGIysDXDEAKV/sXG+0upNx850qqlKvtF1Jeg==","signatures":[{"sig":"MEUCIB3yYhGEuQDm9qU8tKWDEZPJvgvar4CFRaFLHrTp4KDCAiEA8wuhZMSzJb1eeOT5XlkV5nKBTYoGcb/TcA0p2KDmuGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7RCRA9TVsSAnZWagAAmqIP/33AeL2yl3bILxnRXN0v\nk9DRonndfe1/vXI+Mqc/O2NPqO5lBL3U9wMWaXO/HPbCA6AF8NgzoJvPwVDN\n3MW4r7BPXrKNkKXeUzZM18c/12x2Vvvjaxi48Usjug6YK6TvIfnBrnsg/UcG\nP+7ZHDxIURehIJq5XAe8xFvmEvOq0rt+EKGUzZEc/vZgyjWIs1M8c0qs3z11\n0WElQAYK91W9N2mNrtI1z+vtq2YWcVkd3gh/feJGTJDrzuIRQKKgGMi217nV\nJznGA89TnQyxhqFBBFA78kcNmpNdb00svDvj65HphQ9uh2TndcgBCa//p9uT\nYuE9rtTkrk9vAClIGNRF8shf9iaUGkrRH5Y45eppnflYRKZmW9ozSN9fcV+g\nnZo8g/AuayPQIUhxdMfw0TRzcg1/W9YPv3TQgj8rDNEvdgSZWchD62Yxq9au\nyBWCAcv3LPtxGtPG6rt7h8s2w7/oHJpt0bCPM7p8kNwk2Jz0cXgiJ50/RY8m\noJLpPe40w4kEaA7t5OQmBnOVuB0lLb5+VcLxYwv9dtfsQxz2AsJi4xfSL8jw\n6ofr0C9a63qHDCV7mKT2gg4htpfV4D+ZLULe2FHBdTne634UAKZJZpr7EzSC\nhIGzpesmTwFC7H38MEPYhmLySm8pbSszsH2UJYMxfJiIsJTI2V4pekYRXC2F\nLm3W\r\n=PJqm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0b4eb5b2d30d6d9a7b20f57164a2beba3c20d65e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/rtl":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/shape":"11.0.0-canary.b2fa996a1.0","@material/theme":"11.0.0-canary.b2fa996a1.0","@material/button":"11.0.0-canary.b2fa996a1.0","@material/ripple":"11.0.0-canary.b2fa996a1.0","@material/typography":"11.0.0-canary.b2fa996a1.0","@material/feature-targeting":"11.0.0-canary.b2fa996a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.b2fa996a1.0_1617981137543_0.3611789176747775","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/banner","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.24255c408.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76eae08f4d9dc548015dbc252b03224ad1671c48","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.24255c408.0.tgz","fileCount":41,"integrity":"sha512-V5R9etzGbpxdTcd3O014tXc+wh44TrDp7TohVom4GYLsJA4Uy0mVOpTA6kdkBNt5NGs4e6EM5gdCY+RcSXGNpA==","signatures":[{"sig":"MEQCIBgPpFpmXrSUsKASCWP8A+fYPU++oMX7DbfhitWHk9IoAiBPQTcza3H7i6VcdOfotUjFzjsqNN0C6fBJe/VyuCUHhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLV0CRA9TVsSAnZWagAAfYEP/iFfaeYAZDBWbva/Tfp5\n1D9Bts6hGbVY6yxLYawI/nMsxG5F0Ms5XiHP9Fb8MwIJIAxSQEHA8oyIqWoE\nhThFnxORImkYeDqVWOnScaJ8wXcyh/QdDEXqGPWnh5S3ebXu/a+VocEJ5TqP\ngZ4C8S7o/+49aHpgYU/5/AVX1LVc9ckEoJws2Ui6Te4bYZqTA1tYuDs7Z0oE\ndCcwXSw0Fe6cQ+E7QGtJTFiDIo9Pla7iCWEc+gSK6oQV1HBMHZIn1oLlyE3b\nLJtdWxOZhXafhpl2QTMQp3kjeLErBgSRUcWYeLxQBapF0Z9uxI/t4q1dcfte\nkSPLCpLf8eWAxfOO69Eh/YSRvBxtSQT+HT5C5jMghx+T/2vHo2jwmN+YRvtY\n+bK7dAOnoHSpHkBeAoC3TmrjYJ7mwZUsARVNhMuvhvuiOvYXdLit9+dLPQt+\niskXaUdvBYJ4fi8r1wdvrTvIWf6RnKLx21nG6rfhGLJvc1aiHQ6jRbn+3QLf\nUIELGmRNcDnlP5P89A5wgd4WyxfEsoSAz0RWqE1M684EqPguUHVum7f+WQdL\nEcG7ZCJFe0nfKwSWJ3iOZMU4pk/CXSO9tR1FKmhTb1rgTn72tlOjqzQ5iRbD\nEMs/urHz1KRaGDPcxkj71TJ1cJAo0JrO+9wmBIE5dTNv2FI7+MzVhwRCI0u7\nEJo+\r\n=mZVb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5cc224c5482fd736af03872db458f031901bb693","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/rtl":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/shape":"11.0.0-canary.24255c408.0","@material/theme":"11.0.0-canary.24255c408.0","@material/button":"11.0.0-canary.24255c408.0","@material/ripple":"11.0.0-canary.24255c408.0","@material/typography":"11.0.0-canary.24255c408.0","@material/feature-targeting":"11.0.0-canary.24255c408.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.24255c408.0_1617999217775_0.04770259418389955","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/banner","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.7d6a4bb72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9fe5f1d97b778fdc58752b310fbf69572caacec8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":41,"integrity":"sha512-uKTvF4bjt0wWA3nWMVW+OL2ml0xh+3wUFlZO0Y2oiBgIAg19FIIlNKZRiSWVYt9caZmXbThvj5PjJh0iK/2uHQ==","signatures":[{"sig":"MEUCICjo5R6BF7I3yOH2RKeb4M6UyV7jD4lmb7syqZDfL7tvAiEAixY1LwItCvFzybsQGxxjwRTApQglHoYtamXAXhXn+d4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNsuCRA9TVsSAnZWagAAo+IP/1QqPjl3mu6h69zKFjN8\n3kgMWiSANcBZdE6fAiaooJiT3O2zjdAD9f3hcBDAdTWcLDLuX0kYhHifuGQ0\nu4nLNzk08BtC3hoWcjNvukCe9ShNySktDXS5qCytGb//SbXuzRQyidphx3S4\nJbYoaIfBiIjiqOfvMPkcONYBivs7wiJoaCVxITtc9rvWA+vn8f70EzMdHIGz\n/zxGe/VA5eikMjvAGl0b5BA0XnYn1o7bLMgQdtUh4ZCUKkl3c+X4DdeYpN9K\nzj6vFUE+Fs8aWmAG56Vmdw5yoNNwXyz3jMp7vqFrK6Z9ZneNghMyVpMZKl6E\nsPnnUKNSNM3ZA4HKkduuKYISgtzQEHoHY86WtkM75LckSsjBmhRxO9nIjrGf\nCb4U0ZLu+vn1SNNLHQNDRcWGF9iFIb1RnnXi5c91GZu0lOebjFa7ht3CfCPN\nKnYBhnKttjDjCiNDn1PHvsQYCV+XcwiaHtrVP+MhNc38n6khmWzGbRa3Li8b\nxkUVL6cF+pGKqScEO6bk66hIQSCd3EjqqDspLNKjEaS6DgILnk4R2O4c5Utp\nvC/VQLtoCoYFGTeg7M06wbcm9XX7LHJHAhySve/VQ5q1/C8y3ZSqt4tBugk9\nZjjk95IGXHd6mVSE1629SuGqAg5qS4nzAXa1kZ+pbH7QmDazQQibJncxKKbQ\n2+xn\r\n=7xhs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1e1f0ea898fe101863062b7a760600cfb1b095e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/rtl":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/shape":"11.0.0-canary.7d6a4bb72.0","@material/theme":"11.0.0-canary.7d6a4bb72.0","@material/button":"11.0.0-canary.7d6a4bb72.0","@material/ripple":"11.0.0-canary.7d6a4bb72.0","@material/typography":"11.0.0-canary.7d6a4bb72.0","@material/feature-targeting":"11.0.0-canary.7d6a4bb72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.7d6a4bb72.0_1618008877579_0.17289684460293864","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/banner","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.352b295c1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dad4a7cfd00a805b744a149b28beb40ca7e0a0c3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.352b295c1.0.tgz","fileCount":41,"integrity":"sha512-r5L8NFArqu4z1hwhGVTDREnz2IxnAUyk6sL0C6u3KuQIXbWUJZIYhrOe16sONitKF0PpiP8x8xAHTijyAC6djg==","signatures":[{"sig":"MEQCIEeaKi5huJGBaaGtsrREREKLJlRjAiIwbyIvR5VHHU80AiBXaQwdZqtdDPUxOQJRpV24gYregRdDmR3hqmziC2KmPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":478498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI6JCRA9TVsSAnZWagAAb9MP/0dIkuLGPwzO3nclBkrt\nQR/cDJex0v8fr34ffV+Xiti9ss2+jS0ER31E3f7qRPkDp4k58zdcllknKdZ4\njeq3wRGP97iLLUYjSNG11f6ebbQ8HwKM055JhtTOYqdk4ixteOGR/ayncCly\nmRdugpVt4OnDwFPVGW7Mqyls1YWysrCN4+/qnib6uzdCt/yueXq0A5XuAnVf\n/6Kp23SBygPJkKtm1E5LfY2PXdo6n2Bmj9yDWAibLauqjvwr7womTMJ9AKhY\nYNQymJL1wIOW6gAU+WPi0MWB/f6AtDgNn0OJI6Xxli1uRlG52+iXGoTlycyQ\nNy6VUyvObTNPHEuqiFaVYLTio+t4w1M7RoTrzItGEG55APj953Ab7Yb/SRqt\n1+pt+77ryuTYpKTh2d+kCwP9Qcetgzd/uRlYVaUZo9sG8tOV8kZpdkbWe29y\nyGnK9eTL3d5B+cCJEZSxdmsceBIQzCRGnbweWG4EGL6eKV3GeprhRhMjpBwI\nuZ4lcRNAKonT1gowNGNK+ii06XVAg4Tz5e1KL0BtYq1iGliOVRbFLu4g3Ple\nMzTD6kth8DQsf9c5pPAo5xG3toKOdqYc/jWJAryZ0scG92RUHGTddXtjbA2S\nN5zQm3dOT7sdqE3tOn9hUkXGzLGT11LoAiy28TLumGH43fOfYS8hHbiaQSDC\nfMfY\r\n=plT8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"472a00ecb08e85ff1b602e3bec15d38f2a028f69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/rtl":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/shape":"11.0.0-canary.352b295c1.0","@material/theme":"11.0.0-canary.352b295c1.0","@material/button":"11.0.0-canary.352b295c1.0","@material/ripple":"11.0.0-canary.352b295c1.0","@material/typography":"11.0.0-canary.352b295c1.0","@material/feature-targeting":"11.0.0-canary.352b295c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.352b295c1.0_1618251401347_0.3052025562163665","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/banner","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.ab99b8064.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9161d6d23c2e6c8ceb97f84ff46ecc64eecfaad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.ab99b8064.0.tgz","fileCount":41,"integrity":"sha512-mUgFoDTl8O66my1E3UB8zCIXF54FkTDh5FXqlu2Uvu5C/q3TDOUGbZASr3nMWrBLy3ceLVB7OuI67cr+k8ePzw==","signatures":[{"sig":"MEQCICiVFS5wR7kRP4Yv+6daEoUVwz8JkBwYMpduCGw8C453AiBghYVFqMPa9QUDeFDknyd2ZUr8Qf3ZgOeuue2E7Lm7LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda5QCRA9TVsSAnZWagAAQCsQAIWjZ3jpJW3/949+EfRj\nRiFWi1B9LoeWYvsAawC+Oh9/LIZwQFErim/LmsWs0CMA1MHUwnzVRs7973EV\nu2QUKhk9rORjywj2EdjbUuCvV0PCjAaDoEscB+IrO4oOdFTwr27p+MEE6P4b\nqCZ/vFQfHSudbq61h9gxRfB22l71kUGfevVhgslFIXFJesPDm/V7Syq35Zwr\nBCEJS9M2CvrNTJHkwTmRziScD61s7Zv305TUGB/FHPJh3HLZxz4NEUUrgo+z\nffYpH0lrcByH9evU38deIgBzdQZZpoXQXC4QJcLzVAjKXl5J5x2bGcWq1fCs\nQO80M+2iEszPmdFtB78flLg+IfKsdkLZxljGyjwNIVSxJrIGMj5KAQxIjfQn\nwew6yYfAR9vERMjqcCXcejxlIrxG6rDT8iM9v5BtHNEnfLt8I7xPXJpbPsiW\nP40reGHCanDCuFGg9sFkDHHdaZ2Ap03DjO5/oNXpTaXedsLmTLOLYlGlookA\nRAHZBEDwO6Qcgz1I4g3yIpQSjfJdTlqJMFWpQE/ye4UMCSz+rpHRzM2RirXV\nn785M+ZcbKjKJOYJrbTw6f1sU+jQpod9gjROgFMSkMLwgugsxPySfRbE+tLm\nu5cGJTB07cu5lYbpOpxENSqmtZ00bZgjs8TlyijkK96J5in1H5y1bqEk9zZ7\naOGw\r\n=HMOx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7a67c09690e367ad8ebdba2d551f6432c20ccccd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/rtl":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/shape":"11.0.0-canary.ab99b8064.0","@material/theme":"11.0.0-canary.ab99b8064.0","@material/button":"11.0.0-canary.ab99b8064.0","@material/ripple":"11.0.0-canary.ab99b8064.0","@material/typography":"11.0.0-canary.ab99b8064.0","@material/feature-targeting":"11.0.0-canary.ab99b8064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.ab99b8064.0_1618325072318_0.8311562342804941","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/banner","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.8f0a11e32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cac6b7e63177ddea21781abd8961ed5ffaa212b3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.8f0a11e32.0.tgz","fileCount":41,"integrity":"sha512-Ys9Uwo4bRzXKbMuqyIIntGOhpvChrgy1z0+oEjOk2QU83lS+PfK0o+HOJb/lZS5bR8eQioFvaV7q6/xj3cPsGw==","signatures":[{"sig":"MEUCIQDk58q7y0CJLpbc7qSd5hOH2Vq+g00zVNFjsZ6JCaeTCgIgYSEFqp2xdUscs2czHTpNyn1ZFeqhQSYMfiP1iQMSC3I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0q1CRA9TVsSAnZWagAAoPQQAIH6UxtUDgjcFhLd0qrw\nuU5NhYeE9O8Px9y+BSyldfsmfhOSqWR7zvZNWP9NRf9W7AhnRD1ZdPNeGaTN\nuZDpyw1DSP1qEluI0Dm+U2NZmbrWpBdTE2RBy1loaGfqqi7vr0JSvXxyFcSd\nJRqwUFDsegw0XLqluxjttCIEmBQ3c5xv4fNNmKznjE9XUmO7MsujPVqGoEJI\neyUIW7ZJYGZKbHMFP/n+cB8GPIgGxGAjPrbcqhikVPOM5+HYSgD22RIv85E7\nhFbpXlKmFOUE9MBQawQnUF3jHwjcrO1iYCbr//t/S20seruWWMnapNOaylUf\nNRMUPronvq3yGc4a/QgqsfDszInMZdwfSOB8FTIstnEw45bo4ORGxv53LbPo\nJArLY4d0s9PRaCnjRbNypomDVlOrO3Y/KUxru5PqFD78ve3ggrdXt2B/Bati\n0djy7mU2DGXeqvzOA+bM0dnPlYBJ/6mnAVOTKzpl7UMtK5DKye2PCpMCWc3f\nG/27ZQKBHMrpdOQnd6JJ+727gBL4AJvHFLleDk6pFOvVjz3cdYTU3KyQMEWH\nToYjVgpC4gIe/alhaDqMx39gS7ztPqAZW/o6dkUVDbpSdqenMMtsak1xIw8S\nvjkfv2XunmSoqIvNEWzj/+vKRJcapfJf2PXL/RwEghsiwnFzSHZMhT2ceqhb\nx3FN\r\n=OK27\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f09b2c0c350e2f684e84766c95eed5c92b5afb0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/rtl":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/shape":"11.0.0-canary.8f0a11e32.0","@material/theme":"11.0.0-canary.8f0a11e32.0","@material/button":"11.0.0-canary.8f0a11e32.0","@material/ripple":"11.0.0-canary.8f0a11e32.0","@material/typography":"11.0.0-canary.8f0a11e32.0","@material/feature-targeting":"11.0.0-canary.8f0a11e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.8f0a11e32.0_1618430644620_0.22179150492733357","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/banner","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.f5c6db8fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"06658f411d94e4f74f42a56a2fe0a308a6e0e8ce","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":41,"integrity":"sha512-u75nlOAjxxEvtbO88svzhKTE2mvbvcVWAvHOWuj5rQdw/IeZwQiuYTe+wd5IaPKZpANplrvfxqPS/ARW4lUBVw==","signatures":[{"sig":"MEYCIQDzV+V+Tm+6pJ0p6pY4SaDt72Txtjmd4l0D5yoadJTQngIhAOqhbneReXtRRViaZDrjEPA02iRopy/AKUb6OoMtxAVs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIBZCRA9TVsSAnZWagAAsLcP/21OI9R3EI+YeLFf9l8E\nAFGefYx5sbD4H1Y61DgkqlwK9xRlVTFhBaDWmhOT4tzcFbqzZvr7Gx4p93YH\nxuexI91/pFt07p5DiPfYMB+nZnsnj5ujAw93jsbN4QN0hHRx7OlWoIbi5xGq\nC5gkEXi+k6I0gjCX0Ao0MJKBRoKbaB4qdSEukTdzgeapWvyGnaqZhBcmMa08\nH056w/443P+J7Wl2mIS5Q5p+f0kxFZtmo7WbbNFhcmJH0F6X2JS3GNsxf+XF\nfhlkh1OS96PVT1y7QmCMqJxz/AAbwx5lHKerLFPu6cFNoz/m/+82bCCnKTMb\nTivrbFo7TrEKw4mp8sgjoARfZkJ8ywfulUN4ikQX/aDH2EMNXGCxYDMkP3r7\nw2R04SSSmgUxWph34NxNYKxT3gGvdGQoJlbGAc9L4Z6xzCwGVKH6xWHZFE3F\nZmDyzDPukZ7DcujzhBTqh1LQw+1iRi4H787QzMRIOCOLeBfBxN8+VZczXAD5\nH0dRi78ZaXLsGfflNxtjkgF55BD8inJX7A4nvSwTB+CiF7SAnPX77iLKdS86\n15A7Wo8hK6B+umvUDUgFbi7byL2hCtMrZ1X0OXkx33VsKAnM99+W3q82BcXQ\nfoYfuNUf12LoTbnScKH/LKLrk8IrIXwcR/KaApEPsPTNpH93ZvNEgiyfsSEH\nUlPw\r\n=xrXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"eddcbd64f4309f4bf5faecb13428405a28774f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/rtl":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/shape":"11.0.0-canary.f5c6db8fc.0","@material/theme":"11.0.0-canary.f5c6db8fc.0","@material/button":"11.0.0-canary.f5c6db8fc.0","@material/ripple":"11.0.0-canary.f5c6db8fc.0","@material/typography":"11.0.0-canary.f5c6db8fc.0","@material/feature-targeting":"11.0.0-canary.f5c6db8fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.f5c6db8fc.0_1618509913167_0.9425216741586735","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/banner","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.3793a3143.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"650b1063caea4518784e35de3a0c2a55b1137cfd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.3793a3143.0.tgz","fileCount":41,"integrity":"sha512-tWZUguJk+cmqYkzx0clCX7Cpwaw0Wchq2bXLTM6/I/bj2luvQFqJSoam69nwP8n/zTD9JO5fLXAfL/kw7KrnoA==","signatures":[{"sig":"MEUCIQD4L6IMP24SnPVMEcGQk0LeEE7EwrM/FqTj2Ad5I88tMgIgbaDKj9b4ygRP12wle6C0W/YjhjYWCsnmA+UP4nzaJJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIbCCRA9TVsSAnZWagAAH7cP/2C4xYzRtEKf/APlIowR\ncHB9ZmIjbXM6gCfSju+/cZG6st8o54mMIvu07sYlAfB2+LP2ZWXTmo+W0m3a\n7qYd2br2WTZp+zZfYsCeLw/V/VEMM5ai5JNr5C6+vw3j3LBP+YJzRyYWPSik\n7TgYixQsw5T/9ZlUAw/qZLSSsIVjT1G1K8WE5nBiWi2Wz+f++tH/q5uocaHo\nXdd3IYCR54C7zzQauCbTNlUEGMjZVdDpOLDwzia5SVCxcGeEGegOabiB6RQQ\nnS8gOne20EbGrmBHNy4eTbF60bkfiSZKVtM+0DYdC2Gs+RsqhnSSa3EVPrh/\nlXiC5Iv/yWemRRmdq7F/oxHckBcI0/ezjyjUqms2I5DTR5FLkUCQNQOcIvra\n+JJDIrxd5AyE61lB8LM+HLGqKt/yrZFHXdVorreuISFvun5s2ZlvGnnJSgHe\nvk9Z8dOWEyjffZC6aOPbgpyHkE4yI3ZSSDxwrII60xKPy66rnCmkoUWblNyu\nydbBcNumsFuNDv8NpZEFBfoNGZSYd7OVLHhNRLTS1vkAmtMkrHk9xpSEaeLF\nStPTU/3vj/r4mIVnSNuz5QgQV9cCo8s2Sqy3nt5o87QcQgwZ/uXpUzSh0aWH\nzbUXOBs97pXHkyoiv5tbDm87b1ZL93coSa+bZEP9QYhGPm+KDPXgn+q6y7gU\nZddf\r\n=6wTJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3cfbed34975d8f2990425af21414290a96e2240b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/rtl":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/shape":"11.0.0-canary.3793a3143.0","@material/theme":"11.0.0-canary.3793a3143.0","@material/button":"11.0.0-canary.3793a3143.0","@material/ripple":"11.0.0-canary.3793a3143.0","@material/typography":"11.0.0-canary.3793a3143.0","@material/feature-targeting":"11.0.0-canary.3793a3143.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.3793a3143.0_1618511553898_0.7080152098041792","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/banner","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0-canary.bc104bae7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"13ee45bcd86ecb2a1a8097d54dd8d50b32f82c72","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0-canary.bc104bae7.0.tgz","fileCount":41,"integrity":"sha512-nTdmou0DuEhEtSx24i5Kds2lxQAt6qeRG8Q4qGM4cWlBTsPCEp8rNLzebSXtUQvem4Nj78i6vvu3n4TGB1d5Tw==","signatures":[{"sig":"MEQCIBHDTe6Kt9VKI4Ze/YJ6ZxnjhLiw95nY82jhgLD86DhoAiBXtHVghL4kiVj3uRFBj8hoXwYLofQSH+T7RkTktiqkuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJhCCRA9TVsSAnZWagAAtXIP/RW+XhMUGdzcKGSXvWEb\nEbFvFCpOfDkShnX4t10Ch7ASxQ0iZ9iaPdTXRxMT2MVWcFJoT+zatJDgHrzL\ntprTamXzgqfgcpOH4M4+h6tgWpa2kEybR6AIH7vxmVVrU9JJi03IqrAFPDwq\nGLUZ2doIvPoTY9cyWn/nQ0/FPSQdhA0AJNAsdq3xoGj/ylCRJxxKHowjTz3Y\nA/vL6BUiGvNlrkWEYmU65HrRLD9wutdxqA+todGXb0/fAL7LqyB83j2yFAD2\nNjegObhqicykLAcW8MSwrRZqsgNrkXsljEki8YTcAp3WbsyWgFSBNBbmg8SZ\nlMnMd9zALzoOddiSfoC196xmMn1L9PNax3XeFlQOvjUKTy1PgrWk7B8CZnZh\nkdJLGYvOPAFPIac3utIhQq9k4XmdnlQTyVcoZUnzJiJ0ESL4GJ2f5RHyHrQf\nO26j/RxtdzQutaKeLrvmqLQirvoxruy7ImiiSbpyWfeOna2AfuAQJXTLDu/I\nCwymozBrVdzwWxzbzLww4nfXZ6ctiekxXEr+RvsFcnT8ghZzt1w79Xk9JDey\nYCss6TfWoS/hmg8FPneT5g8M641TIxUbPpTgE8f28CH7C5C3T78bkIBCdNNo\nh9gFpZdNaQh5SVLkIlFqdRolpVzIsMs3KsJadWjGwOjBVyUvbiht5geJR5I4\ngPKn\r\n=Sc7j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fefd0309d7bea91a430a20913f05f501364f2ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/rtl":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/shape":"11.0.0-canary.bc104bae7.0","@material/theme":"11.0.0-canary.bc104bae7.0","@material/button":"11.0.0-canary.bc104bae7.0","@material/ripple":"11.0.0-canary.bc104bae7.0","@material/typography":"11.0.0-canary.bc104bae7.0","@material/feature-targeting":"11.0.0-canary.bc104bae7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0-canary.bc104bae7.0_1618516034533_0.6250307434237556","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/banner","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.3f342c3f4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e23e2f486b86bb2ad7c13218b2deea8dcb590af","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.3f342c3f4.0.tgz","fileCount":41,"integrity":"sha512-disN1zuckSAJC+DtmVVzu1E6dN7yyu4VpCU/kLBVLvobt2WgHJNbVXgLDpLj8DVZl5JaBy9wASs0kMP1jgSQaQ==","signatures":[{"sig":"MEYCIQDncfkjDJi09WY4TH96syydbH2uEGk44ARy3XsEF2lLdgIhAMzZ8am0Cyi2tioqEi9Fj/z/ffSj7b0YeQ3NtzUN/gJc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMRaCRA9TVsSAnZWagAAXjAP/1B+I3erdWAI86pDdfu+\nt5Hqp9phy6HhFsxV9NLaTWFsqET6I9tZ6SLi+lp9p3yiqHwCLbU3wQVjuShV\nqsB1uSC1Uzql8igbpRaPYGErEvf2ADsu3WMVqIkynVbng8Lun3XLKwfxXyuD\nupzcPq3lV13+rE5taHf0nnfU1cIhPZSpxV9coqZ+0z8idau2+urZ3+vl5VQM\nvlVD2oQHnxEOCB+G6bLnMXQ0wRnLSjneH3OCR+FuOj3D/n9WJmhJSfqIakMu\n7ndovbRn5oHj6BXlfPFkfH1oOhnjB4Xew0QGFAyZPS7/i79uQoPKHBTLNsgq\nqzlGdu9ViHsKPFOt+PZ+x19mCi2GlJ2BHFS7fV3UKhy5MoVDwPgCe/0HbMGG\nL/+/FG1lmXRDDJvVg9xDVN8zSZhzLER157zc/aT6SjRVG4TuuElJimvhn7dB\nEyYLA6E7O0C5emdNVP+nERW2Icw5JMZ1pblusiWN6VMXeng4i982rLCL1Sc3\nrPO/gml4eeI4LbAO2zahSJtUaiwKdixJcA6u1WUINtBR4tF+v2wTcSvppaTi\nGuXs4ej9Jt93qRXTwHN/ER08sEzb1Lbp3wbYReUHEeAhlLLQyvb21GaW44nN\nP1TfHWUwwd+tWpI6Sc1QPhvDG+28qOXMdsUEVW+uOwEr03ZCL3eizKkkrPkd\nFF/c\r\n=Ce/l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d82c002d3f314f99c3413389c77960016a48bfa7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/rtl":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/shape":"12.0.0-canary.3f342c3f4.0","@material/theme":"12.0.0-canary.3f342c3f4.0","@material/button":"12.0.0-canary.3f342c3f4.0","@material/ripple":"12.0.0-canary.3f342c3f4.0","@material/typography":"12.0.0-canary.3f342c3f4.0","@material/feature-targeting":"12.0.0-canary.3f342c3f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.3f342c3f4.0_1618527321902_0.691553599347859","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/banner","version":"11.0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@11.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0598d6a1aa76ce8c7df754989ebeae9af108588c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-11.0.0.tgz","fileCount":40,"integrity":"sha512-KEhPRqhshA3rAj5e78zddpsbG9ysWo9SHkdRKGcWqqRsoUsDwVmSp3qo+LqdpE2FGATf5ps0ROtEOrudfq6Ukg==","signatures":[{"sig":"MEUCIQD07znCp0tUmpU/uzkX7Lv9m7Z3kWLIxL6YZUfg1vjYWAIgBJIixLyc+elFy6uwG2SvvWCHO+aPJvzQqOZ7vVwZ5f4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477055,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMVNCRA9TVsSAnZWagAAWGEQAKHbWh6qB2rA2DG898bf\nCe2EZG9HR6f2VvHnrEZD+OS4P0ocCIXnJJweLKpvOOxeXviHZ8JMZ0U7hLD7\nYNuPc/aoTnoSga/8Qi8vVstWIofIxRROFN8/8HgKsJcJuqsiwx/dznYhXeUW\nMgsqYI+SBb0zh7Q33pWtpzfoSogtvWjpPnuzDe78In4F/hDIjALZi+nVCoj9\nrZnuAEECe5zUkeMqwi50KqLVzWq+mYvXrHkSu/76PQL/JwfIwYH2Fn1zVcl2\nJSEmyR53fSiu1JhqnsoAKMYcXEIkCanFJB3VSajrcZc2TA6L0/uVRdRLJ2F3\nQTSeiEudGlmwJxBfPXONPesTpMUKTl/BzSP24ZXFRr/MqqvIPuBF7QqYT39s\nXnmtE1un/CCLioirJZ4guQK2B3VerQhXgifMV2Ms9iH0Hr5xRb8i9fNT6aSe\np/VWszPZlez00RFSwp/+r0JKwFWzbDHM88/UHcKhErJ+5v8/qTy/xM9lQMnB\n25V3F8E7O72gEmvpGrH+pAnqpPPanL3gQ+dYUAePffZOnJHB4WwtbJPl7Rqt\ntmqaNZXULV0xGtgoc+qHPAa3aJNwB00p7YPpb+jtCtF019+0BYiXp4YvfBtl\n1RKBQYv1SdSLPAyjAn7jTD5FjkQEjJEDUX1vD+d0+xfdluoA7mm2WubFh3PX\nqija\r\n=f6SW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","gitHead":"3f342c3f4715fd3587f327ce4ea6b5dd314c5c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/rtl":"^11.0.0","@material/base":"^11.0.0","@material/shape":"^11.0.0","@material/theme":"^11.0.0","@material/button":"^11.0.0","@material/ripple":"^11.0.0","@material/typography":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_11.0.0_1618527565089_0.06988011935741878","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/banner","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.2ebfc5374.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7586178e87c68d805335c0198990df4725de3053","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.2ebfc5374.0.tgz","fileCount":41,"integrity":"sha512-CpgOuPcWsFO7jv6+2P1738zRNxYUs2JYaz68Kjv3nPu5CH2zjrXl6N8i5xkY9Ej2JK6CrNFkv3HPRdKUXTBZUA==","signatures":[{"sig":"MEQCIBTMrBjym7I0FdTPPp6VBMtbWpUPjJBPWslNqxMX/lr2AiB5BwQppw7ACshHNvYP03wZfXrg40rag3MwH7hSUL84Ug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefeUCRA9TVsSAnZWagAAizgQAI4cwaEztHckYCmwunC2\n4Len+FnNz5p7oYnk/pBLbNBP9PQ1EeGyYjSOpzsq1T4X4sCZ+8E2U8FG7uc7\nXwCNo02jef+UKgttFcP+8D0YWzNpggzga9JXWqPjtqdDyH1ihdc3Owo4m/F3\nKsfsF7hAo3WyQRLPPGze9vsrXpKubJfxc0ugHktoCTvYhG656hxOYXlLk6mN\nJPQINxQ3onuS6Iub3ayVxEM3VZc6DFLkvsAj5YajVdavNONDRwH7e3QaTUBT\nFNTP7RI/MkMs4ISmUqBCWAOrn4pNDZrzEQkc8cAYtimrIlTf8EYW6dg0pkr6\nS8ZP0SnzOfc27hRdcZCfEGE+Au1OJToFh5utOAOVjiC4wERVqu63D1yjwgZo\nKeUQhbK+0+1PWqWMbPHT3EhQqKoeldqVQ/6LNF6d4R1xHsBU6CQdk6q7ipa1\n0W7k+pFldVgu0crvKoSxLPmL7xzfO/c+4Mz8jB1ahjrHr82QGOdor9T4R32M\nIsz/HDn54eGFMTIRT0nsFMbp169u2hcqkuGE9HSYIMCOpCjVDTN8Um0/5TYv\nUcfakKVi2R+oFqRbAuo3p7/tnPV7V0Sg0MndXdjJpxw4nKjWTogJVUlE86At\nEfDzWnhiDl4tuAJlqSzIo3TrwNhxahLY6BKx54mvU1Pj2SBpCRmdv4yeZPbY\nc7pg\r\n=ycfO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"603bba9493212a7e1b6350d2f12e7488ae1d9594","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/rtl":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/shape":"12.0.0-canary.2ebfc5374.0","@material/theme":"12.0.0-canary.2ebfc5374.0","@material/button":"12.0.0-canary.2ebfc5374.0","@material/ripple":"12.0.0-canary.2ebfc5374.0","@material/typography":"12.0.0-canary.2ebfc5374.0","@material/feature-targeting":"12.0.0-canary.2ebfc5374.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.2ebfc5374.0_1618605971450_0.053037778958335835","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/banner","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.5631828e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fe32febf2b364ea9ff52b47d740874028715183","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.5631828e1.0.tgz","fileCount":41,"integrity":"sha512-Udb+U6QVl//FhedDv50+fEea0FvXJfe2QimxonjRS4mavTbaQSAnTpHQXdanbt3juwIlCwx2LvhmumVf26Dtow==","signatures":[{"sig":"MEQCICv5TEbG0zimTp9eDqli9HpQO5LWB6ZC+q8mrf8OwbdfAiApSkxhWnZJdwuVPpSByMRvWTFypdhLIE3BZoLfeKRntg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepK1CRA9TVsSAnZWagAAQO0P/jZYunWfnxdPBl6jVsfV\n7VbdHFl4SJ1fCzlmyfKSrnnEgW1bF73kj0/G1UVhscrRtMO2ZvXaGauvU5oy\n/glKulBlS6qGX1ueRtOx/PgqWtqWUS9ooSNhEZJKbz2I/OZIBKIvzyWuP/PR\nnsdNgMWsc46Kp053b0lwgJJup2m8f4ySkEGcK5Oc8Pjp31D4pcVC6r5Lj17K\nruBKnYBNPLeDbs1YwmHaQhvK2NcfgYTZNXNLpPE62rmaTUC/BGxJLCOddqcA\niD3MAZFaugv8HrCd/OqM1qSqpU9Yih2qQNa7r9SJL7N5gEW50mflVl7sujDT\n4HEIZ1sokYJ3WOZD82gsl8IJw08pOxP9G2HNcHx46dyvv00OTWbQRiHNsNPB\n2qU/bOzGLPW8T4K3iOx3gIzQ/FvpfwLYYU8vztKl/nGn94VJ/Q/9KzGR+nmw\nabmrZrrloUQ4HTshbx9R810ynpcNz3uaTgL9qdTiiJcDwnMrlwU779U3DOUK\nO6McGc9BQ6xxw63l43rXweXfkZTFoem3rxCnPQD4LJZh5bqw5NMaVxyB5dVX\njAPAaQNrXdOVg5L7XU0Na/J3ban0Upxs00uYGd3fGz/tuGyS3yiiHCQIiSwH\n/oMqeH0x5utac5rwdL0hhSHsCN6ROr0CfiYFGPXeU/W/cCeGnL7C5q9IVgG1\nNMYi\r\n=xL6D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"497e1a2527ce0368b4038766ea4893675ced3523","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/rtl":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/shape":"12.0.0-canary.5631828e1.0","@material/theme":"12.0.0-canary.5631828e1.0","@material/button":"12.0.0-canary.5631828e1.0","@material/ripple":"12.0.0-canary.5631828e1.0","@material/typography":"12.0.0-canary.5631828e1.0","@material/feature-targeting":"12.0.0-canary.5631828e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.5631828e1.0_1618645684975_0.09047068822047089","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/banner","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.bd685395b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ded50f70cb340b5eea39c919f13513402c878ca8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.bd685395b.0.tgz","fileCount":41,"integrity":"sha512-YJ/MJVwWN866/kiEJDJoJFD3hWf31DLvEjA/1PX7W06KVoH+Iv8Q3pDFWcJIKlsyNWNYv8h+qv54glUlnfilKw==","signatures":[{"sig":"MEUCICHREakHOhHJh2dfynEqc0tWf75mG8rTCGoy5cCQH0pQAiEAyLDO/42OIsw3dBmk2il12bLsOnKhB++EkbXDjd0B5Vg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc8NCRA9TVsSAnZWagAAnCoQAKLvM9zaSgbErsHT/4FX\nR+fgZBzdzv/SdByk+7WZG1BOf+2WxxAFQAIP6ySXs4b2sFHzQOqi0ny9YrVL\nEBjOL5o77rfDc3DhEVTHnroDgRhqHKze6ZzREJapGi8+XoRySC/bm7pYYzDe\nfGNcEae5zVb8KF0XTTtX7NCJwkMsPJlpn9nUCtWsxyCj43UlUbwcuV4fnKgY\n37v5N5AliiPhWN/t7NeDH7SNcsUlxyAt+tB8WOKYCTvWcwGcx/G5D9x4XNCM\nL0G1rzRFDkSwd2g0DJT3kBz98dHGPMJtimLtpvYPA/5U07z6bZKqy17q/+9K\nArFbJ3ragk1Mrkp6lylMX47OCFYba8MsMavXOylj9aXUWmNbusLKXvXMb9jn\nPW1Iu+7ReNypUxUpMOZ0YmMqY9mVPCzCQs2QsOlcHb4GsRjmjZQYjr+aQOjl\nAPR72vbVD9m9ZzeikFuzO5QHIvivQZsCjIgA8t4Gegqcq6KkwhxFa5Z1H8Ix\nCfL0ijwlvhRUt3z87viUOJM5C2nh3Rs5OVuZ84VCEUh4DeuCmAKwUeuUdu6Y\nfbZN+tjaoNFFXfugsN0tzsSb4pU0ktwNQqr89ZiikuL3OQylZCPLsviLw0sf\nZSoG1BirDy3aBtHOze6BKE74Udv2i7znmpt0gNUWhw1rgQKizYZtlMQPyQ+A\nRQNM\r\n=sUzE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"69c7d9ec7c5de65144c3b2a9b283b6baf7af107a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/rtl":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/shape":"12.0.0-canary.bd685395b.0","@material/theme":"12.0.0-canary.bd685395b.0","@material/button":"12.0.0-canary.bd685395b.0","@material/ripple":"12.0.0-canary.bd685395b.0","@material/typography":"12.0.0-canary.bd685395b.0","@material/feature-targeting":"12.0.0-canary.bd685395b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.bd685395b.0_1618857741246_0.49965811544973016","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/banner","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.b52196498.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb443228f35bf06ea9d420ab670aa996895de50a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.b52196498.0.tgz","fileCount":41,"integrity":"sha512-reUQYibFSnp9INZIbUKZprY6aJQWcIUP4WEzM+PqXX5qZHjd1Kp+qWzy1eDGEpqDclHc9V0IQZCPSaFGPsSqfg==","signatures":[{"sig":"MEUCIQC3a3jomgiAxuFgYgrJqFDOZs1Tk2WYkIYjwXX0ndyRWwIgLOLs2W/kkWUCnjCD5tUlAdEELqWW8f1OPuvj2sqE6sU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeEBCRA9TVsSAnZWagAA6sYP/2DZ4+WrAvArrhUn1wnG\nHo0ajdv9pw2qf1tx9zGIy//8xrMhz9pzMJBQkO6j2VfYgD9p0ekXOHtXalHt\nTSrdi6V7aN6N6LWqPUim791612htLHHo+bmm/P6ULSgvSD5bg3BVD/aP7vB7\nZQT6ii3yeulhHn2sLZ/PYGa/96jx414m8eTY0NvGLmgrOTHOd4XtxOEVHpzt\nNxe28K5k9JlSNwXgPy+kXiZFfAS/Lp3x7c2wx9xlReIR6qKVhkApneaxWgeU\nj+gCqR4J2u/kFqjnrBiltRHBJtDFPQSP9H7GfXZdjI7I7a7uzPx3m9a5cDr1\nXm6Z4DLe6MjD8wfDD/fhUJX8DLTrHW8KqjxLte9SacRkuLp2ZgiCZaVzcAii\n/wx32w3lYbFufj9GxPh95l8erZM6o4DI4ps+pBoyvB7PeKibDXaLG3jzSEjF\nUNO5sNSztlk2sD5kkQQdzlsLC60YeyF+0JG2Y00HkFbKghyb62dFd/HjoG1O\n9Z9UsDlb1LumtBY+l/JEW7SfXUHb3as1jK+oVR/9hNB7BXZvDn4OdZyLEFOx\nSUCEGWEuOB3f57Ue1cJsBEkQTyuLc+viz4LEIgRYgabPzbXIv9oofVnZMRJ3\na1VPFFY4Uknk1QePehAC6bIdajtPjy1js7tHA7+H6s0sJZ3lb0alNYg48FAF\n5fZn\r\n=OpAD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"953cfdd3bde4c66a4b6b90171d4ee702958ae1c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/rtl":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/shape":"12.0.0-canary.b52196498.0","@material/theme":"12.0.0-canary.b52196498.0","@material/button":"12.0.0-canary.b52196498.0","@material/ripple":"12.0.0-canary.b52196498.0","@material/typography":"12.0.0-canary.b52196498.0","@material/feature-targeting":"12.0.0-canary.b52196498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.b52196498.0_1618862337526_0.3513766174272075","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/banner","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8ba3e298c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"658fe31731b8224576235c2d1c1e00e035cdece6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8ba3e298c.0.tgz","fileCount":41,"integrity":"sha512-5H3NB0zwl0KXVj/LZ+FWGukw8CYCO3TVM3OKId8AkMch00x7ObnUUAMfkNKfMy4nPWNwS1a9WW5RLYJXV5F8zg==","signatures":[{"sig":"MEYCIQCdjXsbQ5tHcaD4DDWsknzA6wc4bTDO1SYA3ZU83DM4CQIhANwp+dTjp/mkEHJMUhhqUMBI27mjTLA22a/p2rPKRVay","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDIrCRA9TVsSAnZWagAAGU0P/3bY8kJcEKKSx7pDi1qT\nWbPaxPF8+CT5772c8HPS+wIPRiaMqNdpqCHoQN/S35NHMYG8zjoSDJttPle4\nnxmbYmv0ejwNGduPPksYHPVptw+Dj4tLlYSQY64gCTDQx7FhyP4UAfYHaRC0\n35p/y/nOlXK3gYFwUpZ8HzTCCFOjmAP8+uQhIfdvEI1xkLpSyLSw+UyYkXNB\nHZc8ABONcxMztk+JEfSRsID3gLBuYzK+PqqSUmGqsTabqoCWrdPF55cbXfL+\nt6Vs5w7zNbY6QtexX9J4dX2DknPTBws3aoAyQiDz7iMqoXT0jFmKA4bxLw4R\nABl115+DAnyiCHsS1U56Wy8M2WtoP7Aat4XOEv3e32tqxnqO6XZwo9oarXAf\ntlnfPJ7RJlWqqAQ/WZWG0vfhDhmfpu/acs+eLXraSJN+WEiRYfrOQqtdSO7/\nbx3b/DVcmjwBfvkoog4G4sNPe/Da/FsL14P/c7m1MOa82l5Wck8GtCf7xtNU\nmIryC1qf3nZtRe1GVFKHS3czWK5qcZYo8aIH/KiGiS4JVbB/0DxXNKaTauXG\n6jPbvDaRxTiu1rxL/4BxB1y6/DcizYavyhZs9iE2EOOnNJYpvwaPumv6Gr+O\nTH/veypBJ/UjKSVOfCTuaGvnq2BTOMEDDwUPZMgZuJuZ5hTcb57wzdxIr34J\n8UY7\r\n=Wo3m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"206fcb6cb686d5de97867cb4e4005926e2a94501","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/rtl":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/shape":"12.0.0-canary.8ba3e298c.0","@material/theme":"12.0.0-canary.8ba3e298c.0","@material/button":"12.0.0-canary.8ba3e298c.0","@material/ripple":"12.0.0-canary.8ba3e298c.0","@material/typography":"12.0.0-canary.8ba3e298c.0","@material/feature-targeting":"12.0.0-canary.8ba3e298c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8ba3e298c.0_1619014186856_0.380781566243682","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/banner","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.c629eab71.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8adab89b802659ac74d27f3e497cf8a39567bee","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.c629eab71.0.tgz","fileCount":41,"integrity":"sha512-vt6Ic92RYccYG+7vNGJfVmu5xd9LUiO6XqNMuvhq7Jer3tk5FR8Co1qIfQ0HtBc9EGWt07M+YsxANpeiW0k79w==","signatures":[{"sig":"MEQCIBCG00jF8sy0q9glH1ifOzwty4RuyqXV5dX0qflyz0pdAiBgtcZp1OT5RMc6NcFROcBMrDQcwCArEA3Uz60cAGs+9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIPdCRA9TVsSAnZWagAAt3wP/jQ6wZfiALQzkyEZ3ScQ\nlExELY+Yif745/H604NuiFmgg+SGN0B44mKORYOfsijbzC2wO7fKdLPrBA47\neg8KUV96t6mV0Wr6CNv3wZAi0lsi5FSWYhJkAJnMXoJ0xzFUeiFDFAjONnPo\n2MgUwhCL+gnKSlNCY6knskV3ULzpfE0s6x6WA7uGpR50aek9h8oCgHnuUDvP\nXww8TXbCegaMfI0ByQDm8eISHxFdyL1Vr0JNR6MMi7BlowVkSCQIyOonb20R\nD4eZLOFww6XYQWXke02+rgQCMuGQ6QZfrWPpESb5Impqh5xOFmi++YZmin6i\nq0ey1/4r+RxsmVj06zaaP54SDGM2VvW3ei24gqeyPPogNSVb5lQZV1G2uSsf\nfagazlLnxsyoae5SE5brZoGfXLQt2xS9qP3N1JJJtB890XZUsTcPPKEbtm2l\nfqd5BImS/6x/NOHYa9r7KrFro3Y1qpNv59GdFLmQXIvGNPx6asLJRUUGrGp9\ntEOAIa9tLuB9e+Xzepbyls356icyPcuvL7+AAL76MrfxvAzHs6r5Gp/K1u/3\n6Y/pl9dFrr5ZJpavUfJszoV2y7TzaPVt97znwvtuFAkoO4t/IxzSDq/robM3\nafhtemxk4AWLLMeNWnEXraHlCkEI37enbzlbGK6BJ0nPcDfvz+BLGPIHIzHL\nj/+W\r\n=7Ecx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"13ae4a821cd20abff4520de3f38c689af7cd0edc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/rtl":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/shape":"12.0.0-canary.c629eab71.0","@material/theme":"12.0.0-canary.c629eab71.0","@material/button":"12.0.0-canary.c629eab71.0","@material/ripple":"12.0.0-canary.c629eab71.0","@material/typography":"12.0.0-canary.c629eab71.0","@material/feature-targeting":"12.0.0-canary.c629eab71.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.c629eab71.0_1619035100710_0.27829218554950597","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/banner","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8ace3b810.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b9b742a542b87f280dac09eecea35cd05347eea0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8ace3b810.0.tgz","fileCount":41,"integrity":"sha512-7Muq4J99/Jp8ub9/TkGUreigOk/Lbdsp9ZirbMPXo3c0FfoV23Y2pPe394FoYhbTB52zvAzgi3OLFQytj4y5Ug==","signatures":[{"sig":"MEYCIQD/rdrMHMObh3+VqHUjbqqCfyGprnlWRsf1x2cGVB5dgQIhALaRSKN03yYWj+EPqa/ZYTBrK39thO60cA8SD3D6mTdm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1iCRA9TVsSAnZWagAACkkP+wbWgV0+H3aQYXtC+HXo\n2R2M0iHdtv8qzs8CGk06XU1Q3TyYzGY5EbRw9sCx4GlKlIn0pw0OTdk2wBDC\no4ogTBgJrR/WVrQY7TwVjSW1DT+Dcocp6baFE2EtC78rmxRlW/PJTVgi0X8X\n91zXp6PPm18NOw5m6tWaViheIUQ358iWBJeEMzsJoJFtR0trbX6enHwSMkE+\nsjjuQ9zilqXOu0VRkpemg+MJQAl0jjIDxhCkc/WiRe6Dt1vf3kTvf3Z/EhoK\ncHkG0CcuK1+gg0lf0onQTzUBqirW2c4pDNLrvGjOj2YDupwZcPOSqlx534U7\n6tqyOZocDEddJMBEVoPUWZkeB8pVIl3J9EmKRdwZnw1pZ/blk5893MkfQilu\nHqr15RCvtNAmhg81Y3VA4kY+AHybRyHghgYjJK/cLr0XpAdXrP3dTzelWnSN\nek+u2nSLwydoljZhh3dbCwt75H8mCaVVfCkO0sNpES9Tj40lDpbZ6NyuYu52\ngzWDrEao7Phon9dD8xXGXofQvOvomO6tNB3FHwN3necbWpmtNn+NFfCttlZV\noxOv9KLwV1bxDN/WrK9grdMLDfXkgKP2bLIRWYpK5yzhBdQQLoAmpH1myMLx\nzJqEOwVYydOJFwNPMW+T51OrIGLYBKO3pPdyxtyKhouF7Fi8f2AfC8kPSEyd\nCWCM\r\n=xF9o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"622173e8e2308a6104e06bf943b6423381a17e5e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/rtl":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/shape":"12.0.0-canary.8ace3b810.0","@material/theme":"12.0.0-canary.8ace3b810.0","@material/button":"12.0.0-canary.8ace3b810.0","@material/ripple":"12.0.0-canary.8ace3b810.0","@material/typography":"12.0.0-canary.8ace3b810.0","@material/feature-targeting":"12.0.0-canary.8ace3b810.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8ace3b810.0_1619037537759_0.11994136966521474","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/banner","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.70beaf42d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c16bf8c46b2ca9be599ef89fa415d4da79c5a04","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.70beaf42d.0.tgz","fileCount":41,"integrity":"sha512-GtGe3Rt6hEHKZ2RbNNsQD51pK9khRmdYoIlIfUVjnn7bWcjU1t4xfRZMHVMUXVrFPYF49Y/74LxJSkXJA2sCmg==","signatures":[{"sig":"MEQCIBZVjBIb7jw776+iKjrG+bV4rJAAmfJ2/Fgrf67WhgRMAiA9kAs6GAMibRj/FvW1nDWcGfO65zrbiAj9p/gnozU2TA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJAXCRA9TVsSAnZWagAAcKkP/3H+KPe8DcDaUWr0qvAy\nysZ8lysVJK4SwFe2aorgjOzK6sy7XsMhsFLbo/J/3+qDQOiJ38etx8GPh5uw\nnIg6+Sbg8cksw9YhWa3CdxYEo0f/UTsmn3W2PgyhB2mYDZbnzrOg9y0RtdMu\n0ERUMMLwOdPsGLB98AlsxdtMo4qK0v51+SI8KKJKu59Wyz9VqHFBhQBsBI1h\nA/xYLib9/PGlcFCbgar79dgtI8LdngHgXbM62MrZkFFBIYnKdsglf6Tla4t5\n14WWuJcXBbHJEWz3/eWUG9I+2NztkTzuR6luurCzN31SPlzjYUlKBoMjn9YX\nwf/jsDV/9OI+a17vnzLG+57b3MIvl9Zrtqw+vk52FJAOPvT53dDrHPUcBWVd\n62HdNJh6oVZJXzJn89qvhl8CZoSuGAJF5/NIrvK3W1GZW4Q7iv9wPIGfj/hN\nQzxiem3NP3OI+R9IXp0n5s+AGnzNou9nXm53vju3R3ZWrP7dVcxwcCoZ0e6z\nvng7qjl+WXBhKbLAl8v1kW/Exr/wh0bEH27JvdfBANWDUIEeGZwY/6upJPgW\n/Ir9DyNfOWfnF8/BPWWiQwrVYLR+FpiDGtvdlSaxeZk6NXdibizMcR4WDyJh\n01aI91xSi2YR6yqHTCJjruPcUtOpyQ+mqbg41DFLPf7tNtwjLh3k+Lll8qF4\ncCkE\r\n=M+1V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c5b29092fb8fcd0102b908417d8ed3d61c3448f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/rtl":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/shape":"12.0.0-canary.70beaf42d.0","@material/theme":"12.0.0-canary.70beaf42d.0","@material/button":"12.0.0-canary.70beaf42d.0","@material/ripple":"12.0.0-canary.70beaf42d.0","@material/typography":"12.0.0-canary.70beaf42d.0","@material/feature-targeting":"12.0.0-canary.70beaf42d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.70beaf42d.0_1619038230655_0.8201033841585583","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/banner","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.cad489689.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ad230334fec777bac1e7ca87782be0768f2c7a0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.cad489689.0.tgz","fileCount":41,"integrity":"sha512-8neMPDFG+h/M/KRf3m9Uiv4nZgPWLd0Uxv2znoFwCHLFJOkeixm0hDJrTcpa88HNZlCjIRVJQpOrPqNm+gewRg==","signatures":[{"sig":"MEUCIACe0MuLngIabPTIEXr9UgUVXUSAEiW8sAW1Impr8nhoAiEAoNQ9y3RBXO/p1ND9OSdmCQ3ItMk80WuOpvK4quuyeKk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggalkCRA9TVsSAnZWagAAA5UP/3tzC5DIDv4pwZAfjuZ/\nzPQtK2TO28qaZsjqOh5DgDQI18x8IME9f5Vp3tycZs/e2YC62+mLitfZy7q0\nzX/tlVksZSqZn7Koy6wPM1HRgVYmwFNnT0F6x7Q3GjhaUnqrzbUwyRsOfDgs\nCbJdPceAyMHZrD7HZRaVMm1cOnZgu2eFWyazwXY39vUsCsiDB6nW6b795g7U\ngi5qGqOhcu8pshawU3L6GPcnwvrRy2oYZIfbZBSA/Jsic/zjbxpII9XeSarZ\njIbKPxlqELMz/oZDoqsQhOWUlJ8ofrcwFOSBRc0R40WtSBOV7IMTYLUJx1y7\nFrgpKx9MUX+kK45Ju6vylaIy8yAsMxuKEb78TchQC7Bq8LZVEevM7lYqkdZZ\nx3lDtmUYIFZyCjfyc4g4ENKQbcc/oBMLGKfVbdbZeuw0M3H8lzJv3hWCCsbw\n8UGsl42ZjQDQ5h8/o66v5WuaMdmA+W9ToElNdtAdSo47ZSnvxo870pTQbvww\nHIggSxEuR4Q2cvXgJNbG0KrX+NZFhQUcSO3y71Q8MtWBWDzRF68neNfIEJOE\np2kJpKSQ2hBuQdagqLGFv2NqPBe9C7MuL+GxfaSxRh8CpmME2/Cm62u9do9b\nzrM3CPuYsrUNwHL1HO4NSYl7xz7UiBqa+0IYtTRsPm96XD3EitKK+Bwvw87b\nHzK9\r\n=YRPt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3e5c20e059b33965b63d0073bed7e300c57d5781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/rtl":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/shape":"12.0.0-canary.cad489689.0","@material/theme":"12.0.0-canary.cad489689.0","@material/button":"12.0.0-canary.cad489689.0","@material/ripple":"12.0.0-canary.cad489689.0","@material/typography":"12.0.0-canary.cad489689.0","@material/feature-targeting":"12.0.0-canary.cad489689.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.cad489689.0_1619110243457_0.6317347459178795","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/banner","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d928692b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dd4ec0867b7daddf5db4446624c62d76380d75b5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d928692b5.0.tgz","fileCount":41,"integrity":"sha512-7A/jsQey06z2VJWMNNn/SkXXn0ImqUzznbn3L7YgwCvTaOv4OyiVy8+yG/YQLeuwCorK9Ec8353kSIPpA5v4+g==","signatures":[{"sig":"MEQCIDEPLeXRCwCDiqxoLlg++eJUAp8U3WtrUe1laRRkshm/AiBLCebQbPF0uUkkwXUXDDaIp5Arwf7sxxAqvxnV9EoThQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwVsCRA9TVsSAnZWagAAwUwP/0b5pONDEc6kfd0WbIYa\ncqivNzfR8ZJnLc+FQZZcJnIGBwUEnqLMkj/D5csszUf3aQPjU9GO7u+7NEn4\nSE2PE7gtTivF5My+zwGm3M23jdSeMcor8AiZUqEm8JQoD8UH2fUX23+3jsDB\npfCstJS4CuhuQmqRMqU4xGmZTIr3wzIqiMCaU7L+kRH+YtbAEc+33B2gmkTk\n/xQvoJPfWKh8U6mOi1GocKyppIlvHKzguEjOKsDeO2lDdoWgefYIsQ/8sada\nraKJyAulseo+y8mG+SKAZPUdgvY25A3SLqbT0z0w3K1DfVZ//PtBxrdPQr7B\n6F/Mv55tfXL3xyKQupVbKEYjoOXMnEElXd6nE90fcskCAsaFwWUckiBk3r7s\nGHAp3JI8jOlTrPVwbyFQW13kM8HL3N3NvAEywnuO+D7RujXYlvSiKuKmqcGy\nSxvqxL1nDc952Dm+VLspEhITvuKAYJPS9cgH0ZRN1FZ32oNil1xnQWH3K1nI\nBk9Eaw5BCALmWzheeInPUfpNq6eiDbd08URjWjrOrmI0QkImw7A0NkXwElWn\nSgnfsS+bkmr/yC8V5fRxDZBnv24KSB8c3iDZtexdBjO3KIuQ3Z7yl8JKf5PV\n2ydrq6EblmLUv4Km9kxOGG5wdwE0fi754tE9SmMNZuqu0uh8pWEsNOEMchOa\nM7P8\r\n=uiTQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ced6a0237d36ed84c4d277fc25a11d9453108e12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/rtl":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/shape":"12.0.0-canary.d928692b5.0","@material/theme":"12.0.0-canary.d928692b5.0","@material/button":"12.0.0-canary.d928692b5.0","@material/ripple":"12.0.0-canary.d928692b5.0","@material/typography":"12.0.0-canary.d928692b5.0","@material/feature-targeting":"12.0.0-canary.d928692b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d928692b5.0_1619199340188_0.7951035339762638","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/banner","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8f68de8f3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74fa9c48e6e7f7cc5c09f4d452c7b28c62b56f84","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8f68de8f3.0.tgz","fileCount":41,"integrity":"sha512-enUi25LObDCdks4oKXDilqnhO5r0apRwdhPYO/ZUCougmg1KOR72FTuIW7M4wRIvBHEcqkfR8EdtiXyn2TXMxQ==","signatures":[{"sig":"MEUCIGJ4kd3AcKla4G6gdGtryOAcGJ2R8mkDbWizIx0nhPqlAiEAwi+hCi0ZiF91csV5VECW32MA43azQ87yUuc0q5MQ4Ww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw58CRA9TVsSAnZWagAAIYkQAI0sV+knrpl6pF5dEUNB\nAy5+dEj+TPyME2QPzmJk4CJYbEfnDWFM3Gn+QqvzUtXbcta1W9xo3mXZjQLU\n/HttsM/G/PD43ggp8V/m7lHP2wV2NPjGi7fAv3nco9IdY1sS4xs75hkfNIDn\n5BNlPWQxsFPh0kv2aSNqgX97OM8wx9wEumpTd81yAiWU+oUWhVvDRcuyXxb8\nYs+0m7WKCTT7Tx7X5ekYZ/Y3nA4EYBKvylPQDmWnfTBNsYslyyd3uOBwkVTy\nbJ+tjkwpfKUCtjx4HdhjzSnCSNnq2gNXSwq9qZ+xYsLluVDDCWHz1YLzGNie\nHELfQTp9P6BKGBicpURuB3q4aQSodKuZmtDuGZDiQZHpOlYIdTrbkuFfGf2H\n8Cl33M4HaT6LYAZO/DZFgz9weQnSwoLI46eo41DKDKdyti+Z5sXGyPAOiHrx\nWqdl5JdYnus7mjRl8OW0WabxImaLIGtpV74k78tcSm2PJPG/1f70LliWUxQl\nCqG5qjAaD6M9z6in4VsYJH8xVWbeHMcxiQiYApp8C6OyRxv+QcK2GCoPr+O0\n0UcX4XbFhAHb4RZ8XJORudXpYD+V9hrYpHew50n7jenwPfQesxjjwfyjv84/\n+q12oXGAuFatNUaI8OcDGVY/7IP+HW9hzjmAYelSyZ/31+DszpL2izRGt2nr\ncsC6\r\n=i1vq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5bf06e910f57a544c428d7559d72d5fc2a5f30e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/rtl":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/shape":"12.0.0-canary.8f68de8f3.0","@material/theme":"12.0.0-canary.8f68de8f3.0","@material/button":"12.0.0-canary.8f68de8f3.0","@material/ripple":"12.0.0-canary.8f68de8f3.0","@material/typography":"12.0.0-canary.8f68de8f3.0","@material/feature-targeting":"12.0.0-canary.8f68de8f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8f68de8f3.0_1619201660334_0.2893919240852936","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/banner","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.05753cf77.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b9b9db56f6ebaa0c698784cd434230250d4d8ad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.05753cf77.0.tgz","fileCount":41,"integrity":"sha512-jEZiqczQrxVgr7c5hY8s3fUlSys8gRgOEav+8rvSkojog5fuXZTjt3UXQscc4pHH9pOer+rAUE7bomYmQkObug==","signatures":[{"sig":"MEUCIEhxjAg8rCF6QbUuL99522Tl20p+Y+BLibiU949Vb3btAiEArSv3QjFbUpLZgjF8Th6tweZARet4SiI2KAHfwKagk6A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1vPCRA9TVsSAnZWagAAq48P/1VSlHm8WMLZ65Of6uHD\nLlqVpgJ+kfsnEZGp5UHGbIGSCvsmkSOKJ7RL9jREjQnI3tlcGPDndzdyTJNl\nfS8Tfu5Z6ga3XzQeasigvmXAVYgPQ9oXlBhx1Z2wuOuMpxzJnB6ffEozhNSO\ns3GKr4wuA45/pO5/6R+UkXraO4ctoXnkguuG9K2Dsm/4bRXgU83e3aNKy7IS\ndEmf3Gl1o0aZELGF/XxFhfgPdq2nHeKXnrkjzYzcad5Z5uiI7SZuKJ9DI/+p\nMzSn8oO9N3Ch2wk5fmbYWY1VAFZM5p/VGS/MmPGtx3fTK3XQ/3YnXTwUhWCE\n/gZwO8zXQ0Ur3YJMbJbjirAeuYuQwX668Xd4oe795AD+QfEBXskIi+eonJYg\nPBAu2JJGTQfpUIOJoNz9vknSAYf3M2N3T5LQy+Bkv0BlKCpNtHT7/+sf2bQ2\nxvMhpWVpFAY4s6AKhjmwV/Ko9XwC0uIiGoyPp7eiqBT1lqQ6HJQz/T0EDAlr\n3vYFFcfihD/+vqW3BgGYZavHjAiQzQGLzBnoh7dCfm8veoYX3sjP1VgvjJSU\nj8dyyq8HGZGIx+gnwN3U6k5w6yaxwjpnAISRlvDSLXxYc+PdPGGLjcIw+kpC\n5nktMTY4n7Q3jlOemQz5qeoFcaaHVb4/o81JxjUVClUEElFPfhdKkBaCoxmb\nNmkY\r\n=m8Bv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3557c74d7c4f9400f0a8d2c88bc2610c1d600199","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/rtl":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/shape":"12.0.0-canary.05753cf77.0","@material/theme":"12.0.0-canary.05753cf77.0","@material/button":"12.0.0-canary.05753cf77.0","@material/ripple":"12.0.0-canary.05753cf77.0","@material/typography":"12.0.0-canary.05753cf77.0","@material/feature-targeting":"12.0.0-canary.05753cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.05753cf77.0_1619221454880_0.3002612403309308","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/banner","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ef43e6d96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff0aed2d7d97809b474d80edba4da1d5eb3ec16c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ef43e6d96.0.tgz","fileCount":41,"integrity":"sha512-Q8DSdaoVCoARSyU9f0BIV6yw2mh5eWXjtWLaVq+66xGHzdbRLvMIF0kjf7II9gtueLcgKuB/zlbW9Xn2s4KswQ==","signatures":[{"sig":"MEUCIQCjCV/Ud2hvHheJ9zmv2j+ZKrIU/ikPAUz+O0rPKwG2EQIgZtYYby12TN/n7V+/gMSjRdJiGzof/G+0hjGrm9h15jM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg11OCRA9TVsSAnZWagAAv0oP+wUQxB8li3KFue+j87Id\n89MTvO91ZjZBQsY5Mc6sXKJtmNaS9LphZ/b2gxt8w0ufAhO4kRnOCBMIlGT1\nYxrnSD+QTVXqp3MXYAHeqV6VJ7TPonBV8W4ViLNye0YfiPb6D2tp/j6oL33M\nnk3/Iecb5+3ooMnbaZcN/2XNkcP4O1rJfODMYLBF3Dmj66P2jFX26zaRAJ9Y\nwFI6XcqosYMoBGa1V+eKvWvdXkF0cbWQQWLGutjYjOFMByv3baylVrMhJGHG\nPd2a4VOfMSh9Q2dZ4/tNf7rJX/pjC+DRuxWmncxsFw+qVbALTe4xjHAtWw0e\n5GtJOF1rxkan0T2tdZD4VBXvRxvhyhTQXOw3pKBUBpZkSjpgBq8K1teOCO2V\nCzsPEM6YNynYbAMi83i1c/V0g6o9AxiKFVYY9XCBj9g9E4foROlEM4Syv4yA\nqvJ/V3VzeO/YYGf4U6xXYOix0gFkeNdLBsW1O+chkIjUxi9ErbHg7m2D/x2W\ntdGgeI39XD6tMLrVnqCR7HbuujtNmCsMjjr/Nnqdk6GDnHMLw8puiKqo8L6I\nOdzqBQoHDHkDm4y9YtfszhdtrXYL9hO8k5otza/79hNrgK7AlHbYgG7HU6NX\nI+oZWZHtmrcuAA3l9a8ilD04EEDr7E4d2duHdfCC2A+AGPljAJ1j/zFYUmVq\ngylc\r\n=n/tf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bf61e37f943b49cb1c3287501ad6fc31f8c88687","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/rtl":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/shape":"12.0.0-canary.ef43e6d96.0","@material/theme":"12.0.0-canary.ef43e6d96.0","@material/button":"12.0.0-canary.ef43e6d96.0","@material/ripple":"12.0.0-canary.ef43e6d96.0","@material/typography":"12.0.0-canary.ef43e6d96.0","@material/feature-targeting":"12.0.0-canary.ef43e6d96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ef43e6d96.0_1619221838109_0.8546237432129358","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/banner","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.197f64fa2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9edb455de8df1d2ae62c2b7faee782dc71dc1405","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.197f64fa2.0.tgz","fileCount":41,"integrity":"sha512-ltYy5LCWInMEPoJRJ1tvDFOyDB0ocf9QTuI0NYQF2lOSrz0nA/yB7TFu0+efLNGW4ZE9B0Aq1X4AToEl0VPUJA==","signatures":[{"sig":"MEUCIEs2OQblGrzHqb2g9gHSABsq0QjCab53/NfK5zAfRXv5AiEA6J4GxXccVKJO9uhNueIbMS7n2oGaTrLbUFpzFNbpto4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQmCRA9TVsSAnZWagAA1fgQAJs4i9/Gg7hFIhAgED6Q\nEqvXzWEx9vc5P0iJmjdx4K9K0BgW0M+NYhif7LI+XAgQYdi00557wgLlgq62\nPEuva2p4vFokYmH2183CSPGZvOKWBrbfZOHEVgLqlawdlamButsUo8XoKhUo\nvW7OyfJ4ENkxL/fC+uR910jGjb3K+BUkBed32nLS0QOgmIiJzSQLxSYMpXR0\nz+ZX9u4eR7QWTU1JwZUynwEKojojTT8gihiYCp19Od+nQ1KbiLC2IH3aNTsK\nh6xSo2SdPwyW7NONFU1/md5rMujrW/sV1tCcOjf99aldbmgBI5AfoDz7t6mO\nEMbHJuaH+8qsqfCByFkD/pZ1MDhrSzKQm0Jd0ljxVevBDqUfa3b9kqG7BDVD\niI+YT9jkXQ+xBqkkdh1BuNGPAPJSEbz1ThTsrZIg/yk8cwYwlknkEGCK/eew\n/IyDq4DfEHNFJkoydHP3L9RiSitN0hs7dMc4qSB7gBiSLTi518M15ndSuB0U\n+vw7GGLXEE7C4inJ3H5VclGH4e3VrA0wVYBxH1zQjs2AWtzYRJcfoPH1Leks\njHy3MWsZ/hRQMtZ4RLzcOgm+T8LgKVjE4RTV8NQ/I5FTUYmznTkqInDiC7zz\n4d9qt7hWPRXvyJzlANdSohm9BXqyx6IAOfA8M7iBwdPrpTyesmM4x25XOYZS\n1ev+\r\n=idFS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8ddcd6186c353b0d99439cebca29eb95eebc705d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/rtl":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/shape":"12.0.0-canary.197f64fa2.0","@material/theme":"12.0.0-canary.197f64fa2.0","@material/button":"12.0.0-canary.197f64fa2.0","@material/ripple":"12.0.0-canary.197f64fa2.0","@material/typography":"12.0.0-canary.197f64fa2.0","@material/feature-targeting":"12.0.0-canary.197f64fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.197f64fa2.0_1619457061920_0.3033214204212553","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/banner","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.55ad2d7d8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97a21061fbe6b107f3b7ac4f0bd4e3734f1521fe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":41,"integrity":"sha512-uUohqVBtUfiH2Ntsm31AnmzkfIhSr8Scn0xP/WgxYq87fA7bJy+y7nuUpyaDeFAB5lxV8hbvNKVhkbg026MOyQ==","signatures":[{"sig":"MEQCIBm4KRzIykT9WuujGn50d/W9Jqpq8mHb+kORsqX3mABdAiAUbo5aF0KSoby9AHUFryyWqaLEMmPLXaQJu1Jn5CJv8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":479789,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2b8CRA9TVsSAnZWagAAHwUP/im9MXhbGc6tYMjI0YNe\nnTKqOkaT1+YLQ/SQiuU2TGMSZQwfwRFE+VmplZecbK1vfH+OKx1e3ZPLoICt\nDE78S5CkLwlL95LhXR1OLzVbxknBLV46Vv6tevq6Urajg1j1OdvQCT/BsPlT\nFOdsNebe9imR426UOno+f8HMng9UioEJN9sXXN5ZemTotDtPxAME/UG3Xtim\n5GH7OKNoqUrrAp+VvbP1yN6CRPtsmcuX/UJQmz0Ea07sbehU5N6PxSBnZsRN\neWhM6met1YuKTMTopDrdntTA7LLcfIoeUeSRYvjAzG8q+16f8CIuw2X/DX8u\nx/k5wnd/kD/g6SxvrQcd/EGWAfzIlIXmp5uNKD5coK9Perc7N0QHwNHvxS4c\nq3MP/eGpviLdtl+4auUxRu6HafweBFfoiATlDNZEZXnLjXrjAy/Q0IN6ufSQ\n/z6czmht3DnpgywvFdBFSx22r8+oP5UzmXscCVvKeo8FRWwWLzFp8sxwyGdB\nxdfcMytFLUgN7ZpiOVJ2Hb2YW3FbW0D6nOwMPkkqjl/CHXPOp061Vr5SminG\nv2fgIThbDtypjoRuzCoKVbueGxfpbPrX6XhxuQe2fFSHErH2GLCWm1H32U7a\nKvDOYM9tRNViW66jKhQQTl8+Tfr6Xvr0ImW/+ljoZT2Pd/ZusJZWKynGkvAA\nNLNI\r\n=+GNj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ed8a5f8b1756d56e3973815a51d6fc7e51c366ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/rtl":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/shape":"12.0.0-canary.55ad2d7d8.0","@material/theme":"12.0.0-canary.55ad2d7d8.0","@material/button":"12.0.0-canary.55ad2d7d8.0","@material/ripple":"12.0.0-canary.55ad2d7d8.0","@material/typography":"12.0.0-canary.55ad2d7d8.0","@material/feature-targeting":"12.0.0-canary.55ad2d7d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.55ad2d7d8.0_1619486460053_0.8975984011974196","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/banner","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ec4ac5234.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0757af727fd7f49dcc3bca468be3014535182f5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ec4ac5234.0.tgz","fileCount":41,"integrity":"sha512-XOqBgxFx2I+Iyo9DrW2KkfCCjTbUAFPFMEvseuaOHJBLTdo/Y77StF1b7Yi4PHTasCa+sXDJ+af9ubPfJgUueQ==","signatures":[{"sig":"MEUCIQDohzBiCuclXwcczZeKck+hAJZGEYRRiBBTAHtoBq3XGAIgBiY129iEGh+Asn2W3fBT6H2QgJ+Ov1G6EhRYfJtiYSo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RwCRA9TVsSAnZWagAAwDQP/1Fu4jMO7FwJnFg2aqP8\n9zrRu+U8ARcayRCZhK60EZOxtAHrpugqSJDrIv9vNqvIR9tKZfrZWFoKZQlR\nNgqQvtiElKjtgBOCikr53gdOhaQ6+v1hyDu4hTynESLaNPkU1Jn7ttFnlvaz\noBPypK/Q8tCrMk9wKPuC/yv3wSMoRZds1C9qgLxKs9pELoMo1nTd1S/rp+yR\nn+1fTtmtNaKldCxzIU5TP1IJQ+/OsmUKZG5WVLrfsJZNpRiDpABFe5Mz5DtJ\ngxznIZE/Pr1hYt5koGM3IoO4jOwpx1rHdb+8l06oABlIkklbdWmwVnvUpJvK\nBeYYTNrj7viULKQ4bQ8GIN/3pXG+vXbZYOu5l1SvwqUf6wB9GhGKEo4IgPvc\n5AznHHSVpRbZEC3GIqFnlBhVmKEe69FXZ5rCTdsKxUeZmtqNci5jiCa9pF8x\nHKZQJzsP/QPJO/BhgbHsbRW9PnFxQ+/W2OuV/sylFw3K45NCDWrJQiZB7th2\nQFtkHys3tfscWf9yk/iLEPp+Qhd2PuMtjoJlHDKv8NcB7dVEUr/raKI+ubR6\nrYeILAdVADA5spqGYuZuleuZdkpzqjaoWms4k4hdctMuUwMVWggFc7eF7QV8\n+g3Ou7eaiCoVDZkceu2mH+o7Xgt1Ium4Hlx6HuLQ/bHcC2Yb0yOVJFQAxHDD\n8cPK\r\n=4XGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b189e0be8deb45b4e94790f21c377c3884f551b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/rtl":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/shape":"12.0.0-canary.ec4ac5234.0","@material/theme":"12.0.0-canary.ec4ac5234.0","@material/button":"12.0.0-canary.ec4ac5234.0","@material/ripple":"12.0.0-canary.ec4ac5234.0","@material/typography":"12.0.0-canary.ec4ac5234.0","@material/feature-targeting":"12.0.0-canary.ec4ac5234.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ec4ac5234.0_1619510383892_0.20477407847139117","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/banner","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.b0579acdb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c27e07ea87da7856cfef0e273a7517638294ccd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.b0579acdb.0.tgz","fileCount":41,"integrity":"sha512-Pj+eqwm1Ekd5u01RLXa6dqtTdzpwR+EZKR48vPZHu7soAef3xMYTSvPPTh2pth7MsXVV+iK0VpeNUwsSDi+pUg==","signatures":[{"sig":"MEUCIQC95hY9CnHMhEtk64kwL7BiwjraS+gOi5NoofeMHrK9/wIga1crPYAv4EmCWBd2tOCtojU+Mbl8OpE1XPfCMIVEVLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh81SCRA9TVsSAnZWagAAFDAP/2Tihn94uCHb1aGUzkD4\nGAdX407eW+ALXWC2nD9SQe8Iq8IF8ovL7TJV1An+zMi05OWI2Vx6yzdWK+WK\nxrqhWpTys3Ai9eJlKxwc03d6xy7QQLN2mjT2cn8QRI72bkWDLDGxnWXVAFyJ\nQTa+ESD1YZnfOArWPMInMnUtuRv1LXFLj+JW2VpmB9K76nGM8j6Er4z6RdUR\nGi3zlrkhUfyWKh1vpYM0ICukhqhQKnPLjpOr5atbLjeWAY+Npy4MLAjTK7xy\nxaK5xTZpEyWb8EPQvOEXKE9pxXREFbfQw9olEZeSNmRRaK0ZyiYzGT1dILTg\nMG4pCwXNkOWBgqT4nXqLfbzzM2fLGYhv6hEQZXgUnjwGAH0NcW++Z5ZCuMTL\nFgeCPIC1XWg0686AvYcX8SAgaWGNhrepjdiGhqv50xgQil2qeTi5lRZ44bBa\nfxcCtYl/n83+aDxPi04numym7G+zonipnZ/1iwvOwPBm3kS/MfA9YTaLjq/u\n6+l0sqRERTPvoGWwNcAlANpcXkO1r5BPACRQYf5ogKctUK2GiZEyYrcKL+Kc\nivmpWliXleXxkZZKTe+l5grSjRnHZghP9+2ynFLNAH6jdei4NkxyXuX+Jd4X\nRYYCtKIh7x6q6k9847fJ9JhHylzpuPU5BTCRfYdAfy9l01ArKYShoWYJUQ9a\n1SDZ\r\n=EmY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d1f704610766e7d0c46b8a40beb1848121809a41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/rtl":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/shape":"12.0.0-canary.b0579acdb.0","@material/theme":"12.0.0-canary.b0579acdb.0","@material/button":"12.0.0-canary.b0579acdb.0","@material/ripple":"12.0.0-canary.b0579acdb.0","@material/typography":"12.0.0-canary.b0579acdb.0","@material/feature-targeting":"12.0.0-canary.b0579acdb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.b0579acdb.0_1619512658271_0.4341284326171564","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/banner","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.81e2d4ff3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa339f6d1d0b22c3601c9911129a70a7ef8463e5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":41,"integrity":"sha512-pyKos5Om8An0dbXomOOgfmEbLY6EsJn4UUnajJtnkKuZmzp1HzolkLwln5huZ5uD5Amk3FLEQ1oiKbhfqXQSYw==","signatures":[{"sig":"MEQCIBvDIX0OlocPLZtHoQ74GBH+MqR/4y9WUHsIRkB+QACyAiB+ZNr9GG4GvHHK95zaIlbcRRzBGlyY78NJs6P6EGuNdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHsUCRA9TVsSAnZWagAAFI0QAKKFdmXPfD+vTldLKaTf\nu+SUHdBek+ziS8+tu2OPwM/4zFlbu5IhKwE26JS/HOts11W+S7LGBQO2/9hG\n3FobwHsf6F6l6RDd2MMwQ9Wh9KOeqHxvL04kSuse1VffGKazcy/nYJRGFl7F\nutFE5K7T9m790nAk8m8QJOrFMroTr9FBHhs++5MuwbCJgvXFRQ6aDtOoDn02\nWIEHGmFM/+2tvLFzhZJZgxMmn/bwqGF/k+PM25gdveQgWJndzTq1EeC3bMuQ\npkZmbja2EtpLiS+jWtHd5SJqwuSOWf7X/XdecJJ7FC2r7ItdwNKNBxmgKUtc\nEHqMmPjhLghu/jFTPSvScvGMX+/vnrB/qTqxv8NrK++MrcBhJ88SJoa48uQW\nT8wnsrrcfoRpPpm5FZCAWk02aWs+lGE6K6T2jGJYqeM9inkbo8MwIeOd3Vby\nsJcU/rfPRjA0g37kTkALBDWtF0DUIFSZOk5dyxPFqW7qmNZA2TNukNk80eAw\nAD5wt7jBRuM4PAdzFUn0SYubWBSbrbbW66/7WkpSsHXowdurS5yYZOtpmJra\n15b9azMEcbFOZwpmF4zVGHudMzZCl5g5t6lAYHS73j0u5pmV3RN/goMzmNpW\nL3LKD9+KdtMuZ2Gs87iDAw4nEKpxL8Mj+uWXXoCaV7r7BhlcDwIdaJoV4o3J\nMhFs\r\n=NWE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f55512ab74610e3f3cd0db70822ad9b52b9cfefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/rtl":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/shape":"12.0.0-canary.81e2d4ff3.0","@material/theme":"12.0.0-canary.81e2d4ff3.0","@material/button":"12.0.0-canary.81e2d4ff3.0","@material/ripple":"12.0.0-canary.81e2d4ff3.0","@material/typography":"12.0.0-canary.81e2d4ff3.0","@material/feature-targeting":"12.0.0-canary.81e2d4ff3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.81e2d4ff3.0_1619557139758_0.08216446068049787","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/banner","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.c8edee52c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d6336444fc492824179c2bce5c4c59a112abd744","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.c8edee52c.0.tgz","fileCount":41,"integrity":"sha512-LovES3OeSILzxgWqrdPtv9W/b+2StRwyS5jywFzwfrhBbYj1Y7YL3moTJEYQy6wgkKUvs2oABVd3Upfk6+ug8A==","signatures":[{"sig":"MEQCIDyvt3c/kWaaINALUBJ/Kz/5+5yYJpG1TBHDtAnqe1NhAiBWUvewZwonGotpbWQudeD6e76glnFbEhR++v7fgtUKHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":480605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZpCRA9TVsSAnZWagAA9E0P/itv62qGBfawQyrjoyZG\nWhHVfaeTXOrKgHcv/0Mq6GfUo/xR3jDl6RF8rM24CMT8d+B5NrJ81/cVy6Nm\nk/Gls7LcA73YzpXnNUaV52mMMmuyqEaxXemC3jcDCW551w0sCYb/Mc9z7iV/\nqFBWSBad78rjKoCbGDqO6qP8rTKiCmqAEI6ge3ws2weHvXC5CpBv+1OPaOl2\nEybir7KrBJyKSP7WtxbUZ/usZ6Ey2hkZYVtu83fOMyQIy6rWXP9x8vkGZxO0\nP2YOHdGwTVOsH+19ZuJK8MjZmyHR8kEU9Oi6cxLFiq7cegmuVLEpZ1Bwaslu\npKJ1RVNGrz/TR1dq0ldI19IIZ4C8H7FnvUR99poEKUzgnBk75wGrlCJIV7DC\nxq3Ebs7njhgN827ypu9D8JmdepIzvTsM3HDlt/R5p0yzA2P8SbFRTiT656xt\ncWpe9pkE6Hu/qE48jc/u1rFzTmGoI2j+cGkJx+NfxV5WwJuwhVF+ER+rIbPi\n3t+7t6N9LZE3xZxo9sMoTYu6K+hwKca2X1f1ePXOWanq+S+P+Ay7RZyFq6iA\n8IWCSIuNU0vLYUYN6O/0IgqQdXCUwUfle+U4bX6+EO9do5fnKXKisgHwKaTL\nk9ZD/x01QaYnMRmmi6BkqdP0BomyMobzQ1NBx9Ith8+stLX5rzgbWy+NXQRQ\nq9K+\r\n=UXKk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e8c7902721c81225e1c8b750094cbe6ac4666a0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/rtl":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/shape":"12.0.0-canary.c8edee52c.0","@material/theme":"12.0.0-canary.c8edee52c.0","@material/button":"12.0.0-canary.c8edee52c.0","@material/ripple":"12.0.0-canary.c8edee52c.0","@material/typography":"12.0.0-canary.c8edee52c.0","@material/feature-targeting":"12.0.0-canary.c8edee52c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.c8edee52c.0_1619560041101_0.8801216198375925","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/banner","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.f5b6110d6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"57a87a6749adbc3c318a0baef9888f54a5e4fabe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.f5b6110d6.0.tgz","fileCount":41,"integrity":"sha512-kRSdKOdm3LyDpN0XJO+1ZBv9lvrE5+RJsDQvNsrxwFh5irAewXXZ1rUPQxJEhYbi/9TOcrMLazBRNV+IhFznoA==","signatures":[{"sig":"MEQCIBbDulhpxP81sMkN5y/PliY9FsZ/4GlBnNiVDKTD8+rNAiB65q8ZtZZaG+2jhhycgbnS+Qepw/n1F3q4dvhXMX9aSg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiItjCRA9TVsSAnZWagAAxBoP+wWFfLTpZjVpcm0t0EkF\nZZBdI5cNYU+rNvXPsuefFqJ2bRv8E4KuCaMAzmYMSz+dgGEfISzoDgclz+C7\nqWZtjPJ4TzodGVOkMqH5jjyeA7Cbr46tOrNHBOEAOaPi+SRZLmsfgk2pRCye\nj9ethILabnfJjNDvykl+MD4oG7cvi5wrwu87Ca32G0+TvAYX4J6/CPGOuDjB\nyTp3r/Yy5Jk/jITRTLHJULhjv9fbTK2v4APtDVCnO+ebQmpJxIaKHm9j+ldf\n85H9CRmgaG1C/jahtnijakV4eq9VFxDd723DM6SLnz5kiNIyigJs9Oh5ly4f\nmjsSA7USFVoH9MH0L/Jg0/NSEYO6uSm2EBJPp/riYZ4hU2SANjx7OzHvGLnG\nlgrCe/VB4dYpY7E5KxxMD4AGlTFiudNewnrQp0Z2SchQyfQCJQKSEEupSbWW\nwXx21O7EJestO1jqYst2OFWi9Bi4zjIUV6sPTHufv/fPN3jtcSXfb4B2PyiP\nTKsYRsuKUhxChiB0+48LEOAS+aSX+BiiRybz3MKUb7X06MbqC6Aa8fqN/94e\nMBKUDy40v2c+Qs0ARm5syhZatt3ASMkr3x59aE3V4kYGR3N8/NRHwkNRMd+s\nZFzMSSWsvQurWrWJGwz8xMAHH79mH3mxOsNTdnmNRntt0+GEuF1iAJ0bYoOq\nhXnV\r\n=NeJw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c7be6486c9ad6826105a70187add5afee2a6b50a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/rtl":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/shape":"12.0.0-canary.f5b6110d6.0","@material/theme":"12.0.0-canary.f5b6110d6.0","@material/button":"12.0.0-canary.f5b6110d6.0","@material/ripple":"12.0.0-canary.f5b6110d6.0","@material/typography":"12.0.0-canary.f5b6110d6.0","@material/feature-targeting":"12.0.0-canary.f5b6110d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.f5b6110d6.0_1619561315455_0.8975574720630237","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/banner","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.cee9b9e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f03bcd72432c8c4ad67a42af9d10bd8baff51bbb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.cee9b9e22.0.tgz","fileCount":41,"integrity":"sha512-ouqlNzFrVWBwoN1Vu05u1UTUaRzO12Pj5CsAyV7qHsbisdZ9Fg1guO4yuqitC6KP2NQJOmyg4qFwyO2nKNoh2w==","signatures":[{"sig":"MEUCIBSakEEbprxh90wIQSqukNarBVDvFqv75r4QCqrsXwrJAiEAg4bd7JG7ecBHlDbnpNFSIA2dvyxDunHg/hdaLeaCFnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjVCRA9TVsSAnZWagAAezYP/2spqZfIcvhqzZRXZ/CA\no5Ni4boEez0sqynG0e1ReqSsCImyGYMpInUAmfIOcqL1URuolrPqSqxxav3n\nn/npnRujr9kkN9MvumDbz7QelgCkiL1oiExvpzlFDYUpomQP1tlmje/GIDPA\n3K4yUeEXukK5NRFfri2g3ZfXGBMoH/VOoPGhiDpLG5Ei77ow9juTg5xQ9dyE\ni4x3xv6gHnwfLXyuwevOWEfLCihfNGlFGr0oZA63p4h2lce+yHmMzGBYieL2\nr0KFG/Bv+RLodPdacuQhdZ4X5FX9fTb5dKUz2NeuXyG+yklb2OHlMRbgVN4n\nlmTWVl/wgkcIhGWK6ZAcLN3LtkVoz1bfDR9JBeKvWa3OE7ydaNxej2BbzueJ\ncZl1FmzbF+QAWh9szpK5/zgXk91BotGo2TL/IJBFm6iGIEVdR5KlBVL9lh9q\nVzlv97d6LsmjzWn1t+eyoy2ZwRXNhBx4/61TNuPmt/zmOhIkT3FSnSReiCz3\nwqwBsqe61tDMr98wpRfTChbn7CXt06I3ZW8esObM/IPfTVtMiH8nSkzyr7dH\n8wj8ETh3l/u3AByPGYWa34dT2TzTPApIw9WaJ91oIvm//ilJ+wxiXrA/DK72\nj3syoftgQo0KlKnUIV2cHwRY6Z+levyWOUe2rWnjyXodIneSKkrGKuZsNLl2\nbQXI\r\n=oZJy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b0c779970f0809be4565910c1abadeed4dab0377","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/rtl":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/shape":"12.0.0-canary.cee9b9e22.0","@material/theme":"12.0.0-canary.cee9b9e22.0","@material/button":"12.0.0-canary.cee9b9e22.0","@material/ripple":"12.0.0-canary.cee9b9e22.0","@material/typography":"12.0.0-canary.cee9b9e22.0","@material/feature-targeting":"12.0.0-canary.cee9b9e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.cee9b9e22.0_1619568852824_0.7556203349929398","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/banner","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.96e83fca7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30271cb841fb4a7df70630c0df62d2aa27d9dc14","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.96e83fca7.0.tgz","fileCount":41,"integrity":"sha512-8fGXeNrrTEJGYU+s1TS5UoxRKXJe6jlrTSCAkq2CCP4rq2m+l86Pk1rF+NV8X85FCD0tMkU4OwfMnGdc6YcHng==","signatures":[{"sig":"MEQCIEpfOvdqzoml7MpXZVV2rotUW5guUVYUf1Xy2tHEU6FRAiBT6TeU17e+Ln60iubaVx8oVIW3lknnQFPQv+ozxlmtJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM0fCRA9TVsSAnZWagAAqcwP/1+uKIrIKdGieXGaZp0x\nPP4z5s2pw8al1CiIzRvdCBiTHv6L5mvG3VGxH6AOR6w2npoy5fOylV9ztUWN\noxYgQ0xjEnjJrK2dwjYO3wrrSYEH1vJdUlnlGHIrfh+z55/o3/VHkG+hOxvT\nr0/nGuUCNh0hr1xQ4IdVShj1Gqgw/WkhBcV8mX8ZYQzy+QCXb04KFwRGf1oe\n/QMCiUYqaHur1DkAYsyRmxUb3hEZtj8lsY9T5pzkMQxMV5ccZx+l1Vng6F1Z\nlR1np4BCFUE+7BtMmFYotGWkjMo2TN+fPyjbRPqZWlkueB96CFbsRfSSV1gv\ndwX70aLuc8256qydeWwK5vzlepUMUqZH6YkcywGKFXDxfDG50D9vYnL+GNJd\nM+7U21Nrc3C9LGr27S9iLsfZbCR8yLSoDU94BG7dqxjBhVV5+YRPiL7cCxmZ\ndRnTGmvdgiVHwA2a8WHPsnsKBBWjDo68UyUICtRUwLtYqzsfVmuzAnNDhjK5\ncQQvW5spsF4aZKKYv7OeRUAOuOR8sj6L0RI0R6XMchuQBpT6rtoMMWV6iZD4\nnudzTziQi0pWQTVe77vQVuyIg3rGlmFAMHFZnE6QU2sbZsrR903ypGhl3WRW\nEj/4XCLZTWKFRpeYd9mFmZ//htaKtKqUq9EF5AsrEHDgHpQmJB8VRtkaFTW1\nwm93\r\n=hjJo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"377f0025088676d544c1393884e5f27e96143f16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/rtl":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/shape":"12.0.0-canary.96e83fca7.0","@material/theme":"12.0.0-canary.96e83fca7.0","@material/button":"12.0.0-canary.96e83fca7.0","@material/ripple":"12.0.0-canary.96e83fca7.0","@material/typography":"12.0.0-canary.96e83fca7.0","@material/feature-targeting":"12.0.0-canary.96e83fca7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.96e83fca7.0_1619578142690_0.7670361000466679","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/banner","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.4c497bd19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ec517d5c16b0cb83b6f7dc487806026f76bb296","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.4c497bd19.0.tgz","fileCount":41,"integrity":"sha512-BQGJrlNlK1PVHJ1p5SIn4aRFnyp+F0Ewe8gvFHR/9xTvp29TuuJho4OxfpeKX5GiUFLkMkjopc4Yw6He9lvcLA==","signatures":[{"sig":"MEYCIQDBBeccmY9ZtGPz61yFJ5CxbxnRpJVGlmNQhY0PAB7mfQIhAIoA01y2FO+mXq0Dhq9mCVJy4V7g8bYPN+ctdc7WUGPb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFpCRA9TVsSAnZWagAANq0P/RJhKELCyDDjheWAF8ek\nWXUcgbekhYqLz94UuL7mjPoTZY0xx1A8Ljl3F8bcohgGWdCe7z02J1phRVzh\n7FU5Kq4vPOA9SD8R5EyU8Em3corAG866wGFXxT9nmmcmjnKh5phVCei2EPiA\nkDt6qN7q/D+5u8uWDNNoqDm6G4mjwLxdo5GJTmb4DIJ0HrUQNySI0NGA9biI\n5LqE2w+/N5hK8j0BspJD/D58zCsN7SGdkIjLJl1Z9YgPvSoWglT2vMOtIN8p\na3pygA+OGjzyqNE3Q1EuWhCa/2Pa+lNnCpzoo0x4Qq7+ZKwF+XwYYrfJ9pEC\nWRIt/ff+ef+8voZyIWyvF4u5YKMw2qys+iLqFU4pkmcHgrqwin4HAPvqfavh\nrxZiQcLP9Vpqm1qLallKm5N0muUMOiSCggzZWlV+ujg/GMntWORI7mgZRShq\nv/uTAiFU/qpKC9dk+JZ2zEGQSbgE1nrkDxVFtJr2iApR/kzNhVoIW1DY3bK4\n+b1tDno5gD3//4N2mALdFMRnqM8rueLEF/xcGqfSm5gcw1hnzLXjglwrJQjf\nNPGZ4lXJIGQt8m7L8LLLC2bKAUYTHp5/Wz3PrWXvu2QfgKh21Gmi5A/dAXyE\nog0gASFMklcPC7320SD5S7tdkTV0+8SPQJOEIfCnJoPZHPFzb/aYBK44c+i8\nxvBp\r\n=XiAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"beb4a14c8f43815a21024c26a96e3c53851a9b41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/rtl":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/shape":"12.0.0-canary.4c497bd19.0","@material/theme":"12.0.0-canary.4c497bd19.0","@material/button":"12.0.0-canary.4c497bd19.0","@material/ripple":"12.0.0-canary.4c497bd19.0","@material/typography":"12.0.0-canary.4c497bd19.0","@material/feature-targeting":"12.0.0-canary.4c497bd19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.4c497bd19.0_1619632488824_0.03470342622445499","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/banner","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.105b15b96.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a2104abeb32c294982a4c3e82d3957b3b8eaeea8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.105b15b96.0.tgz","fileCount":41,"integrity":"sha512-1hAs5zeAWpu0il36ttSAQnfkzEMm6ojRHfXiyS9M6Ji5FoYDz2TszRKpcHiRjU6ANb219tQkRhT7eeIWTtkyDA==","signatures":[{"sig":"MEUCIQDLGWIRmp9TZdWlRE1RhlL0ogJtI+Nc4s7UKKnszMMQQwIgQDRI5m3Nev481iEQ8eWxVYU318vKTSZYcKpqkXZ2yWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgideXCRA9TVsSAnZWagAAslAQAJsm8HT+lLkAPAar7ZYv\nMny5PteiAH/PATbINMcPeaNWKDV0SAnIrDmWeaXrJux+R0IzJNdlLEe5+fzB\niKqtTsRcqf036URCDM76DkAI9pQoBMQfYBaDlrqzgd94iR29VdiRabr1wZ0b\nvfe7CuNP1XWb2VUjnip2E5WILip/ns+/3vUDCqVQaaB3QSpHODVQb7QHO5fK\nPOkTS7yiAylL3JZgYWghzuAoGlWcGAxd2PunOYczd7KUKnPbWERpa9a4vCkY\n1AGi0/dNorIKaIMHCtyW/RrH1Cc7CoNwdfwNXPbQewfoBynlUKoQn8OrTuN8\njWWRb96sVl7iZMJFXh1tcN5kh7yqJVOKNAaCd6jOWhaIqWZUi11cXQwUKTDD\nWQWzbOKrjUkOl9RYWqp7+VcMaTUPamYdleuE2gq83sdVCocl+dLytJQvYeC2\n0ToIH68yIOwWen3lRFLZ8I5leicJ+ixOJW6fNXbPihDZCbnCb33Sp/xvfVCV\ndUa9Ttdz1HHVwBuvzucYA2Z7jSY+rfj+cSGj3R/qquvkEzdTKjXIHJEAWXNr\nkKiOFhayBAxWgrilQzrizAqniIWUJCNd2/U5qJLu074ckDbWMAtl3E2K3cty\nBK7g75qBhyj9hW3ofJ3b2XoMM7pUm1Oj5t6o9c2H0J6KTAb1E5J+ESk7EcKM\nSmKA\r\n=JbwJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"762e9351a26c1968c772104d6d64f7874c81528b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/rtl":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/shape":"12.0.0-canary.105b15b96.0","@material/theme":"12.0.0-canary.105b15b96.0","@material/button":"12.0.0-canary.105b15b96.0","@material/ripple":"12.0.0-canary.105b15b96.0","@material/typography":"12.0.0-canary.105b15b96.0","@material/feature-targeting":"12.0.0-canary.105b15b96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.105b15b96.0_1619646359435_0.37140954688547057","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/banner","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.6e20259e3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"835464344899d5dc1ad0fb7d5cca147ff287f820","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.6e20259e3.0.tgz","fileCount":41,"integrity":"sha512-c5GOoRyKhhG7mZyHX7qZYgHgb7IC9ICAOUQ/fWMuQhzqZHjHIrOVlQdTJgORNikZ5ob4nyr7gl5bGXXrxmyEWQ==","signatures":[{"sig":"MEYCIQDsp3ZnJVysKuy5nZNP+IJUDYMw7wY+/OlOiXaD3Uc23gIhAKCXASBv78Q7lvhEGV9Wk9TLhXlzbjWTAgEpJT98iOQ5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidigCRA9TVsSAnZWagAAbeoP/0a7sbYHMZOZjHiLni/p\nDPpy82Gf4n/RoyjbUxXrhwIUpvUNSiPl6xi2rjqJcLEb9+p8X0u2ODmPqzwt\nj4xUkm4FL+gDRHlULh01iJRgjTGqk+BnZODdlb38YaGpVoZk7OxHJ6HN2oTJ\n53eR+VcaUbc9b31nh7MiRwV9Y9SR6LUES6/JTojTA65+xESRpKDnOI7+FnKV\nWR1ZO/L1H8658O7b3JiRGejdgkM2NuOFyHJV2ZxtoVURltEZIGxK6lDQsD2N\nckgoAgt+lgUNpcyL0Y+gTUGMnOKjn0oC1UMoHHMOtn6KxTbCGV6jmxngpL5o\naLKKccWYRYgwYcWzZ3QGTjXAbveRgOl7XppkC0lh1bJykBgdCuVXvz+sCicE\nrgRef0mpMctxMfqmwX7GnN2WdrxRinfKYkMlt14Kza2N9pDwxV2ZRf3mP6yO\nF+mRbBCVpZ9pxV0CUhlu4IXJjEmTzTU8QWgy5ozbfyymnWptWvzdo0UXwkMJ\nknH9Zjmhx3RdMr+dDYNo3QUtZbGlip5NgeZRsJ6WO8eNC5waT9mGvHASvS/2\nZKpiLx77O6ZdeS1UZ1n7B1F1701guGbwjGbDPuCOnBw4QWxoSu3W/Be3Ckxj\n80sLLYVwDUo11x2q10M5oIvnybnuUTSFCL9NzGVHOFRFDvuVHsSm5B7R7jzN\ndTOS\r\n=dGGg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8e07864b42f463f977fbd0f9264b8930da72711f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/rtl":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/shape":"12.0.0-canary.6e20259e3.0","@material/theme":"12.0.0-canary.6e20259e3.0","@material/button":"12.0.0-canary.6e20259e3.0","@material/ripple":"12.0.0-canary.6e20259e3.0","@material/typography":"12.0.0-canary.6e20259e3.0","@material/feature-targeting":"12.0.0-canary.6e20259e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.6e20259e3.0_1619646624283_0.7807195411069485","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/banner","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.0f79a5d74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10611c1d4b1435edb634da537759eeb9627af5fa","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.0f79a5d74.0.tgz","fileCount":41,"integrity":"sha512-luEfsy1GBcl+sXRCWtfEoDzN8LrYKI1LlA0Nz9gRxIeourhEhr17vP9w6T9Ta0Jw9xy8qFSxTEw7UEFgWMJCMQ==","signatures":[{"sig":"MEQCIEFuFSFCaINWPMnsqh98hTpsw/wfxdYV7fUEKsiJ6FXlAiAjpnz//XfKBWuUntLCk+ipN1bBj3A5OqRQqzIJ39Rj9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieU+CRA9TVsSAnZWagAAFI0P+QFiizJOoKQNchTIdSPe\nwuJd5LmRQGrs8/Dywjgrm4bkRxP75yIK/MwmQePqVJ3mW/YRIDiFUdGRavAU\nQGddoF7dMoZlvEzHfst0SihUFlCACanSrjD6nA3WiDzLTcR90JEYKOd9uJ+j\nTXRrkv4eVqgK5W3fD+ExL/Z0K3I6FIYa6yWZbias5wHomZ7duFVjYQfW64hw\nSsIveDesGin9JsLRPNSZFbw9Qk9cxfKwFahEZV3ULVgGqDJ/QCMXGEF5dLiI\nTZeKGtGhd6uxqiYvvqTbGentH/s5f3PCTzF4bCFA15lsVq6vLroUM2ZmeCyX\nkqSOF7ejaYVKMBLkUd4yB2aQRJDL3mb5VEpbBHo5YrAjPOs3dEMQJbxfqQ1b\nEadZMJf0KLc6uXNS6Z56JV0+uKNsRMzM7b21ts0paXuJA1uOLDT5TyvYkIu0\nDEGAsw2XxdWoi7q9WQiAlEJoBj+rzpQ/WYT4emFUdRTz/mW+7CLj4EVRwgm6\n3WbuRH78IMV0GEsXhHyLrOczwHFzyz4FVGW/1UZ4npyb2Gqfg/TWFZ3udPm8\nyVd/8ZPqfrL/GHEcJhg+gSvnB3VnmYnftnBUXtYhUlB+WPd/5y+hSDKRBLQ6\nF3S8QSfGyB6h9rWvQ08RnWGBeOmhNvBUuNJvTXAJ2Tft2MTLF6sbtgp4x0zE\nActT\r\n=6j5j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2fcb990c07fcc62dc025eb258f87a8f04f08fee5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/rtl":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/shape":"12.0.0-canary.0f79a5d74.0","@material/theme":"12.0.0-canary.0f79a5d74.0","@material/button":"12.0.0-canary.0f79a5d74.0","@material/ripple":"12.0.0-canary.0f79a5d74.0","@material/typography":"12.0.0-canary.0f79a5d74.0","@material/feature-targeting":"12.0.0-canary.0f79a5d74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.0f79a5d74.0_1619649854474_0.5267197419383645","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/banner","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.84f3db9ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf45189e2092707ad5342ae9938cc18bb7624f74","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.84f3db9ed.0.tgz","fileCount":41,"integrity":"sha512-4VNjch9C6EGt46vYSGoDShaZC1yW5Mfpf0ePIAd2RJ3M9ss/R99RV6iJ6LSXBcNML4uUZ9PbgvUxsekIck3Kew==","signatures":[{"sig":"MEYCIQDzPkBezrMq8dvy2BRbm3QRmYMkLKuSvP95njYP+JUFxgIhANYY7KWPYhxfI1lGqPmlF1D258irSAe+ct4m2ADx0k9q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisBhCRA9TVsSAnZWagAAMugP/3N3kt/XcGsMzju1GfDo\ndu0c0YjAkNwMlw5O2r6OxJ+5n832kIfzux0zY+EE3uaAvS3NkZbn1qeoYe0n\n7V4pZyV4MBzJGEgCZL7MVmJkZCO7E/D9nehANFCUyBfyZntxMYIc2hTCfmXu\n76ZYuJUcBm7Un1i4R8FwZzKrZiNPuIvVY88AJETqwc+kFqlXKchHLT47KQDw\nwqTXDYri+XzpZaHbQoeqDoEI7LyEfVAcQrulh54K8TwreuFUQR4lkMXlliGa\nC8uZJgVFWuIT9V0Z1ch1FAxBST4BOAC/7zhh9R9e/pe8GWBIvLMLQwo3X+Yb\nfRUamT5x48HlV8bRYHeuM0Njo//QoGgn2xOQrHOaHAIXX6VvEY1QkID9pmQn\n643JojHtDc3KzBH2qHMzeVBS0rsTV7sEIavYLtbZvmxfYEQkSLkTRWLwTmBg\nbci5vBy5E7pl5vzfJ8ND9xicD50IKmv21ZIOhhyj1LJ6XNJjFRLQEytb392M\n9Qv8RNJRudGhqBvBAItqu/g/gOI4vcp9IfLhJRISkgf5/YryUB66NQl31w5T\nsVSlG2Nq8bEjUJ8gHa/Gg49nWwW90TwDaGYn9YbZzQTpDFYr5l+b5kzf/xjz\nxagIqDrx4AQvvT56L3ubO02MuXWCbJ6+vppAxS2wc1YP6YAbasMzvl++ZeY0\n6Dqx\r\n=RNnS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7c4b7e41edc7737412479194451432cfd33839b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/rtl":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/shape":"12.0.0-canary.84f3db9ed.0","@material/theme":"12.0.0-canary.84f3db9ed.0","@material/button":"12.0.0-canary.84f3db9ed.0","@material/ripple":"12.0.0-canary.84f3db9ed.0","@material/typography":"12.0.0-canary.84f3db9ed.0","@material/feature-targeting":"12.0.0-canary.84f3db9ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.84f3db9ed.0_1619705953055_0.43285144565489575","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/banner","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8fc29273c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b506618a340aa26733bcdb57137dce3fbbe39fa0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8fc29273c.0.tgz","fileCount":41,"integrity":"sha512-7xMLMyc1YYuRlQIWyOi/5t5SQCNnVJo3vR/kWG7Cf0Dtya5giBDoDEKKoSOjhnowrAKgbVzpT9g9dNLZKp+LeQ==","signatures":[{"sig":"MEUCIB6S/Q7nv93j9qpwQ+DirMhzI4QOGZkHw5Nqp8qcnZBgAiEAg9h2/NjD7xuZ6zI7VB2tTuu9qNzv0lBqtdBzQy04U2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQuCRA9TVsSAnZWagAAJWkP/jkq+d/fWMGPUv+wANIf\nOMsWH1MEe3Ip2YgnH281E5ao983zhziQSiDCXBgKeWXhq1aZzhYyCb1ijnr2\nnAu6QUhmZvjsdBo4bq/XyD5VcMqpZ4ibQJfugOW6uHaT28r27II4TkmuR2Y3\nmCDRRAkayojdG1EL5MwWNjHaPWSjLtKjUl0/wGNi2ykDfFM/LWFCSIgbbESC\nXhIutep3RYNwsemWLNlEUpmJRWmqadHtGLUNWoSu4bMLrQTd4mW3L1PkvUVb\nlXttP8RtGkyyo+kHjyXLNdkOpeXBCR713S/85uZ+lsJpG6NHGLilj/BIDyWN\nXTpEsTD50GWmzu0RU4P7PnD0lAuFxRVyOiNvFWwre//0HTmqtZA3LspgY3D2\n4cObivzIOQTe0zJzN+0cyup5ut2Z9XnvMT1V7WIPsi03bhGafsR35NViFAtp\n58+GjbA8eCTeP2LdG15FR9p6smV2cXyXUN/UFaFEzmJEAN8RF/TILjwzij5N\nM7jWvQRiFta/axlF5qsgOigd+m2W/bC280udmGd7KF1sYj4O3fLJG0jZeU4K\ntEB+QS1YBgNRkV7tWfMGS/xqV/TRXcQmyNjO1miAyznErJDwuH+hMgZghvgF\nMaCkQQuH7GMRgk7xSrM6KnhdJyE3C3zFxN/Wrch06zoUM05TrVsNzMG7bxuB\nz3ij\r\n=eCEY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fd877c3e50788fb95663fb8213bcd66f347cdd0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/rtl":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/shape":"12.0.0-canary.8fc29273c.0","@material/theme":"12.0.0-canary.8fc29273c.0","@material/button":"12.0.0-canary.8fc29273c.0","@material/ripple":"12.0.0-canary.8fc29273c.0","@material/typography":"12.0.0-canary.8fc29273c.0","@material/feature-targeting":"12.0.0-canary.8fc29273c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8fc29273c.0_1619731501941_0.17659526579658902","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/banner","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.c50d20bab.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38d52b9f5bc180f6ca0f13f09bd91f8ec017e1e4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.c50d20bab.0.tgz","fileCount":41,"integrity":"sha512-aPUDvMqs8bBmqNr4gwIK5HjMNgd2zaGELeSyPzgAdU8zE6zAA+u824nSfJEGoM3OXk+7uIP74HaP7z0C3hsBEg==","signatures":[{"sig":"MEYCIQD0f41XF1yF5LYb7odBaUJaMAlbMS1iWs9qF5Q/2czLKAIhANQiM5sODO6mnbjQ0hpyQ8Cjx2OFNnLZvRbjU9cBGV+X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizsyCRA9TVsSAnZWagAAO24P/0rpKLdJI00grgJ3geDB\nfQmfXByTWxZKsXU0dkyx6ceWtqYFanQ/6YiU4OUFti46/aO29LyfuUaVOWN0\nLe82MnW3pu2cAEoZI73KuMMSw85erfYob5jFBzM1i2Pd80euPy8Oz+G5dmed\ndcmjpYo3EhYCJvDCm2V1VkMBplZQPzdvaLxVkqDrnLc496D12DF6IAzuNuoK\naoX/a0qdbZRhmR9Q2OTQqjRUboGuEkuj41V9kxqpYuDdpr8GM4wguAUZCTGA\noF1xYiGVY35d4uHe7kicArYmqy9OJ/i5oXvSqQlrpB5qyDAXtJyq0nkgO+/y\n101MWNxxfp1u2o0nF/FE6jmGTa9YtWYVN1urShsKwkONoNN/7E0FiXZP9kqp\nXB5QU7AreaNlGDOg6zfVA3zZj/eGCo0R/Qs+iTOaLQaOAeAuTM7Bi6vacUjT\nX9b0g6W+7Fj1kSJmA+6PPIlsBOmFazPoQf2x6CChTiZtHx7EROoN/qpMFhHA\nfP/C52OgL0NvK3dB+lQH+5n2CCHaSWZNiIxQH60RAhQCgT2oft9sp4mA3W4h\nQheG/29MtqebLP9TYVuXui8NImFkZYTxG7v+VCzfJX83cj506pf9GYqxGy/h\nyhwkfVH41F2SB8/Kp/P7c60M2gMyjtpj26XGjUpgd1joMFaNitvN0VfR47rn\nPSCB\r\n=lIQ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2aee1fe5eaed5267b0e67f1610c29dd399d323c1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/rtl":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/shape":"12.0.0-canary.c50d20bab.0","@material/theme":"12.0.0-canary.c50d20bab.0","@material/button":"12.0.0-canary.c50d20bab.0","@material/ripple":"12.0.0-canary.c50d20bab.0","@material/typography":"12.0.0-canary.c50d20bab.0","@material/feature-targeting":"12.0.0-canary.c50d20bab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.c50d20bab.0_1619737393808_0.4643345829562606","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/banner","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.474836ad0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d44654830c550babf0b1f9893cc2de91f626a46","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.474836ad0.0.tgz","fileCount":41,"integrity":"sha512-Oa7ZmJcMnqFf+NTvz3F293Cn+iRIUULgjruXBtBNa1v7LI5yO6k0erGG3P9glkypzxIeqO1azrjxLIIxjkTC6A==","signatures":[{"sig":"MEQCICwpeb6/Hn7IqpWmZjUi6E1ke7nJsxN+08YLruHFYgJ1AiBDhG/hypjSvN6pmknVTwrr1mfb2HC9Nt8D8MgCo25UsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM1SCRA9TVsSAnZWagAAAT0P/1QjvkXNxCM70CDYviyv\nQqpNeHhz2Qpi6RqRm2h5cAd30Fy3pO2bbfRIzhuxsemxZyH25O/gCHH/rx6p\njDalMdIlCm0/wD6Ijs8tONWqAT6hYFT5VvItoxpTW3GWuj866ZkbEsioylta\nSEqNKqadmeHTmlpqrnTevoIzJswO+bSxqz948R9uzMuKmi+U0qjEYB6rLfKv\nqV6rsU4GNthG6bcXfonUJYe4maIOqqIlVNj9G0CdrXoIm30L/sQj1BJ5Cw9/\nHR3P0tBQOwTfPmDPDbLrxvkpmblW2YAf44jIf3pzpC9l+pdWCPxom/l4+8dg\n4SBBxQ7228u8v9ryVNmdK9ZaQ8YPMIL0X9OoRNKCtV/XuN4GfX1oZCWkLmjm\n7gyKrljxOe/Jg0B1WVJVuHoHwO2Go6mF9VdRvxTK/GeySn5rprViW1LG6ULF\nM9kPyNUbdsm1yb5ekVt2keES6vPtz6yP16MSLoUs0gTxL3GyqEZJ6s3JPnBl\ntB51p8MPbOzyMbieuUXrKDBnmHTdYS8lQu/NyMGcMFe/ZImLFgs3dHTk8oqg\nH+ieffy1Xv33Mif8zKMglLpIzFUoSvSkLugztnEsw/fMVex3281cXTuSRQZY\n3QPpWrJvTuMj9yYjiNS+m0c2ryWVfkFUDer87GmKC7jg4nEBH4VlAk78rXAI\nULcS\r\n=I6dl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c9a6db3013566afb165bda88b05607f2ee398718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/rtl":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/shape":"12.0.0-canary.474836ad0.0","@material/theme":"12.0.0-canary.474836ad0.0","@material/button":"12.0.0-canary.474836ad0.0","@material/ripple":"12.0.0-canary.474836ad0.0","@material/typography":"12.0.0-canary.474836ad0.0","@material/feature-targeting":"12.0.0-canary.474836ad0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.474836ad0.0_1619840337324_0.4914205423288638","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/banner","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.f5ad92287.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87099444e39d187d6dfa16ccbc7428a1e0350b9a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.f5ad92287.0.tgz","fileCount":41,"integrity":"sha512-0fS84Z7YtwWWi57JCldH/Aqxc8P5OFwlkY3bYK3OLFTPYhP14K3eG75Nkx8Z67XaX3CuoIYkDYbS8JK4yDja8g==","signatures":[{"sig":"MEUCIDsmUdGzgHjOa/PFLmToGJqm1c3/1NO81jMuEhK9BJFdAiEA4zI3T9XhicN7rkhqjLzRUl7YH4Lguk9cBcmFPf8EFhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+hCRA9TVsSAnZWagAA5yMQAI0+X1m+bmapPaY8uG2R\nisar9EzoKJGIgZlStqu00Do5hJA7KjYp8YMi5I18mAyrNVA1ckydObKhI70Y\nNCQSpp3UXLUbNAyjFZdmvA+sersPUcRhZ005+/3P5gzOZlC5yzvyPAugocPv\nNFZTycv9/MDI+Zd+RbkbpuxtbJorJm7MQR9jFwdDRWXH5DZM6Q5lgF8OMo+t\nLapSAd8B95RvKp7Zs3hknWmS3vZ59QhwCFdHf/K7u3sW4TzqscAhJOG5ooWV\n0Hp1Qf8oBStO+aWhmN7Ezk/HUMjz/TldkZ5QGEJcG3ym/wJk2eA7XK6lHsH4\n83RtVHGHz4CMfAAz0yd6TQ7qxnJGGtHk/LQXLSkM5CfU+iK5curxEEJnS4gX\nRQweG/HVkTf1EanKTYGdiJjvJdldskssiQ8fakFs5Lgo0X+Ik80WWXfFs8mP\nVdOG8MlGhiKz3FCY95vIdXG1gc2lrZE5tKdDcEYhKD23kiSSNoIabftgcWJo\niIEj/0/ULGVdRZCr4QRVDG8aTPDx95/dT9acla+QIacin+Fx3zy5sEp6aY0P\npTR1+K7wcAFIwZAFvOs10lrVtCj7ZwnAId8k2rixquMDw77Tga7NRKp7i7Ug\nMxxpXT+Wbnx1KRZxY8Ir2nSAkOmTUx2emxosKTz+l8g3AGIzKoRT+xKJXNqg\nubBF\r\n=PvUx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"493c206bef4cedd10981093c61731e1c1547227e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/rtl":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/shape":"12.0.0-canary.f5ad92287.0","@material/theme":"12.0.0-canary.f5ad92287.0","@material/button":"12.0.0-canary.f5ad92287.0","@material/ripple":"12.0.0-canary.f5ad92287.0","@material/typography":"12.0.0-canary.f5ad92287.0","@material/feature-targeting":"12.0.0-canary.f5ad92287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.f5ad92287.0_1620066209099_0.15981298550425804","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/banner","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.af453daf8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d962935a5185072677ea440b75956f581f3baef1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.af453daf8.0.tgz","fileCount":41,"integrity":"sha512-n4zfvGRCAa7p9s8MSZLVJnJq/cRWjLRbE/U03NNazPfTvqSM9Guc6xn7BKPSBoiht6GQffBqDX78gf2iXK2gnQ==","signatures":[{"sig":"MEUCIChZQwFTzTrEocun5N85Qb2kdPsMG2/uJbQ+90q9zkkmAiEAkrx0ED4P9njTOmtPaG6xlsIoTye8kQ/fdHlOFSXsJLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEb2CRA9TVsSAnZWagAAb30P/2UN9borNwpknJhrnlP4\nwlOGvOMFDjjyeeqRBzKZiYa6KkxsA/Dw4A60iXrQBr1z9FVOzPQsnmUs5WCK\nyHcH0mAz8p3aA6jy4RTRYKYyJ6jO+LrpYolmBIYGJD6YcaJv1IUWDIPBxYUn\nOP1s/qpWwr6SfYHntVSTSya2VCGBRlfYcyhq6Q+kk6jkAe5vFkd3XW2lC9z3\n8Rm6mw5VOb+WANtT4GzvF/o2kozhJSgoWDJnrHmFFqJ8B2ZIt/4DNOM31OS8\nc/Uz3qgU4w2YQyhw39vQ4lyP7Ntct/HZMjD41jaUYNRBN+42MJokTkeoCwTc\nWJow0fBU9yRBXby5+PpUDuu33D1GhE9iS0+VT50DhEyhqhE0iCkVrbLTHi9F\n0EnaO1/HKZRNHvHC3hBPuEKMWmsESElA0EUzscPqV5LWeIKTazVlxrnsN5Hk\n2rcK0NqBdwMjGjD2bFk5glo7t1xtHqHLODiVgVwqWcUb+VOv6ajl9zvYU+QJ\n/msmgGykYmg6ZYfM7q76cHDp+gJ1/wKij5ecRLciNdjeGTEdkJSYn+gD4dAW\n3cdaIDdnFB/NegxDuEO6bmJ7mM8+YhIIHrKyDsqvMBDVROhDtzWrfMFp414X\nmaIOc+CTGKzNV8hMfaa9b9vSKcZg/HaXGqoSM4yuhCJ45fBZgvK5bLWTDNod\nQs6z\r\n=3qD6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d55347cda19a4d9469eff68955185d9d5e235a16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/rtl":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/shape":"12.0.0-canary.af453daf8.0","@material/theme":"12.0.0-canary.af453daf8.0","@material/button":"12.0.0-canary.af453daf8.0","@material/ripple":"12.0.0-canary.af453daf8.0","@material/typography":"12.0.0-canary.af453daf8.0","@material/feature-targeting":"12.0.0-canary.af453daf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.af453daf8.0_1620068086198_0.9398329761983191","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/banner","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.1f1918c24.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34f245ffddd861f32ac5b02ed8835ac6d23093ba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.1f1918c24.0.tgz","fileCount":41,"integrity":"sha512-tab37eab6u9dWWQXG3ay2Ff2iXmBN6Gv9cOqSDbCr7K/7U+nuRK3o+2z+yC+Ycq9OhAjEqdJ8CeJRpEQnePreQ==","signatures":[{"sig":"MEYCIQDTf5WmXmTtnTw0+m5hxIIR6Nk4ZGU0C1ALcdWUDVVBjQIhAJQYTtqiKJUeO1vzhXGeA5nFEUdkndAiz9aE4S9u5WRt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE3LCRA9TVsSAnZWagAAI98QAId5VGX6HIeHHL9c4W92\nMDOW4lu+wL7pvPMrsZUlc7JLsaF1ylap8geHlthmCmXt1Sqx8fX7+5dPVISR\n8Xlq+vsP9Uf/opyII0qA6pHXFH1DZ4nMvOoXIva1vVQFn3FmIBp27qEowjn5\nEEesJWQleKbuhEyMWYPAc7WlhEz2ooUyP/k01Fv1hnlA61Q730g7b7I9S3xL\njJY16fqXQLYJA0ntdILyzDm06fcIcbn76Sjs03BSRDYBq2JLWRXR2HWG89rC\nvNEiLY/N1ihQJLxzGqAEZvtsCNnk7YhBncfuROWD9tVMcASY9axibM0FMF0S\n5DsVeb1Ii4ISkH73J44czuJfZwljfDejtDFEao5j5mgr68C3XvAmSg/H3Cro\n4oGfkJFgwnxP6zSpfKqbKv9h/CHMcNsWstOsj4dZu9QCKPenZpBmvpEbpHSB\nE91Ia3vV0Ucy/Hmga5AIz2I5mX99QIGbn7VCJuvWXkvLY4hLqZjNoHvaIvO6\nFFR06QvO8YFbGeQKkrepkf5fT5i2k6M/6O+O40rTy6PE7HPGtHW/Hgx7d07A\nHX0zAtroseWWASlHpEvuvkE+FMJsvEGPT0vMYmfzI88wSGW3YCv3ArWXnl8H\nzeDGaY2SOnFMg8P3uxbqvEvoU1uxGdlO+rNSeJvd5HOrH4BJlEeSOcZBjdzo\n42W+\r\n=KRIr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cda2e786bcb73ac46385a1c6459a8ab7bd9ef6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/rtl":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/shape":"12.0.0-canary.1f1918c24.0","@material/theme":"12.0.0-canary.1f1918c24.0","@material/button":"12.0.0-canary.1f1918c24.0","@material/ripple":"12.0.0-canary.1f1918c24.0","@material/typography":"12.0.0-canary.1f1918c24.0","@material/feature-targeting":"12.0.0-canary.1f1918c24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.1f1918c24.0_1620069835167_0.7822359508238084","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/banner","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.33148231f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"325e1f0701b0fa10082a8358e69609d1a0c51fb9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.33148231f.0.tgz","fileCount":41,"integrity":"sha512-UqQCPvLJzFoz6YNtbYuP/bZ8SZUfANewxUkRSnvAi8SkxMd0gkl2dpaw4s3t1+E98DP2iRNP+nTLVnkRlely4A==","signatures":[{"sig":"MEUCIQC3T8XrsmxZ7gtc2BbA7e8hNS67RDK49Tf3XHQaiwLEFQIgPf7QO6LnC8hOWxS/4ZYCs8mXDApQ+ZP/dCgiytTra9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFGNCRA9TVsSAnZWagAAiHUP/0aVotdnkVxDLsXBiLkS\n2mM7/O1conmUI/fh466o9aoRh0T7H1ASff5AdAo9EmUlsIGOYRjUoHUzQDOc\n3IvIshMeQJBckqLRPHcruExxuOD2GNXMozh8RrCVHWAVhCbydnFeOE9dMQ53\n+c/z7YXkBDrRzpodmDhdCnLKtvsoM29fQ35FAYk+VbUNeWr8V9XYhhWNTVEs\n1jqXpAWeKuf40fFcWVB/NuHwbP7xfL4xDbUdbGt9q5mzjVlRwRTi7rQHrrdt\nwxm3YHGWJ9qHvFg+VKxF/lO9eDam58T/JhyAmCITuXS6VjFpTcg7bGHQPuI2\nwEk839Ti8Y/sB9vM90jT4JDZqipoUE4Z8M9TnbojlOKGb//favSZn0pB5BWF\n7UEEelsCnaERU5mAcCuccUO+OcahZDwk7HpYcmHXHqYND1WKe0SQFwcMaGQe\nTE4GUuyd3WD3oKrbyIs/tLVa9iORPLqsJcL9iyxgG9SA/UnZPMD9bevdlCac\nqWigDzGEAMjGpKIFYtnvWbF+rGZj0si5Tgvrk6AzInL8eMUJBq6QBU7aXrHw\nOuj3f00iVe/v4UoU0cdBqhILs+850IlBFBaqLPTdPiH3NAsuzTMznvAaUtRJ\nOnyRly7TkXI7es/IGu1kR71U73nffYY8vK3II8iPPVlUjzn5cZo8dxxhGX2V\nIquO\r\n=yI2Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bb5a14b15a74fcef265050ad96f737d0acf36987","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/rtl":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/shape":"12.0.0-canary.33148231f.0","@material/theme":"12.0.0-canary.33148231f.0","@material/button":"12.0.0-canary.33148231f.0","@material/ripple":"12.0.0-canary.33148231f.0","@material/typography":"12.0.0-canary.33148231f.0","@material/feature-targeting":"12.0.0-canary.33148231f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.33148231f.0_1620070797411_0.5277092021089798","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/banner","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.06b76fa74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d09ed6423d15f563d36766e045522f8dae133ee3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.06b76fa74.0.tgz","fileCount":41,"integrity":"sha512-TOSd6yU5onDR9LH8QaUcwzh5JOUFJHBNoD1/+9AtImLU3lw7P4H/L7xP10gYsCZLqt3zGYefnnW52GF6pckWfw==","signatures":[{"sig":"MEUCIGb8ddEmsM3ciB31As3Zb35JAriRDQ3CSEkLxsoQZ0Z6AiEA2vDb0QsWvshCKQjmEdBZV1C5RDhHwsCv3NaWstrglvg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFM5CRA9TVsSAnZWagAAaL8QAKPvpz8AOuDy5PF1THA1\n2o+opjLP8bGocmF5QtYN87IcU2H6tRJJTgcgYjsAIaBc2cPE3C4JJODAxkit\nRqcQ0PEC5G40uH3JWCJyuCcguBgE6nmNPEaSwl6f4BT3WpwcTdH9ilLbClLG\nDNmtsi+i5YDJ1e3Ymn0po9cQv0EhYv1reMUkgGfpniOZbq1CbcfvbKUfz2tL\nZdEjRo2U5t4HnnmU9fuqFifc0At3gDlAd+f+YjSrAZmpCT5kETKyHDbHcn5n\nD7SM8beHeolEkH9FAySgaBhe5iGPcEUDkEfctUw6wJgmV+ceuyeWlRweZyBL\nX9E9g8F8hWFoVzxeE8bX/E4MXPOcL+2uVQez/u0h8QY0RqVrD/ouLwpPDXWP\nuAvoIpC4+EJBUZxONE6noT66YN1M+qzYKlt4HTY/6NqgzFOzfxf6yOi6Kg5P\nfBI/ZQxUA40t9D5IgT0WjdFtb8W+AnEBKqIwbKtZ3sqLvDdgGqAzOrKd9cTn\noS52MM1Nez2Bt8ZJylZhl4rqDxQ/ucNJ6nJL2ew+fOm4/kAYXfB3ZPKdUb40\nQnLBEr5sJmwJLVm+2a4QuWP++dNnh4dNF0TrsfSGyYhlGzru0i0Fvla5ePtc\nekSmn01XllkNtUFBFmGhQmku5F8sGeZq7z6npn48tnJsPUXEcoaSKRrvp2PV\nyYk2\r\n=+I62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6a6a73c9687e196677329640dc1ed025d13b44a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/rtl":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/shape":"12.0.0-canary.06b76fa74.0","@material/theme":"12.0.0-canary.06b76fa74.0","@material/button":"12.0.0-canary.06b76fa74.0","@material/ripple":"12.0.0-canary.06b76fa74.0","@material/typography":"12.0.0-canary.06b76fa74.0","@material/feature-targeting":"12.0.0-canary.06b76fa74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.06b76fa74.0_1620071224688_0.3741357552959903","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/banner","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.7c5000473.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ad7d1f05a9087785f0042748b92bb1bc5831145","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.7c5000473.0.tgz","fileCount":41,"integrity":"sha512-dqERkbGcdTaeIPXhX1DrZqmwDIDziT4yzGp2bKm8UKWySo5FJEyfP11WZoBPQqC/dy8CVVq7uskPvb87iEIwMQ==","signatures":[{"sig":"MEUCIFvgW9v+DtMyVOWDpLk8hoSu2+8FWrN9MRwVNOdOTCTrAiEA97cgylOJZtu+o+Xv8HypfY8pFpckMYV1t0HaareDArQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxxCRA9TVsSAnZWagAAFI8P/RFBG0xdRUSWNia01Wst\n1n0B35hgltvxr7itbB6Vmt3j65NUAKkvm9XP5Kq9lDDCW5j5c5OxkEEM5f5p\nLMW1Ay898VWpB3wVZ+Te+d6K7qbCix/RWaOccqmAA50njeck2MRsF5Zas5Rs\nmi82he1Stwx1g+CUzje+++wHiSNECKsqOg3wRAmSPJT3ZJKfCbfDbH/hfzSM\nvQXCI/WG2q9INFMs04K/LnCCwQQ6pwd0CQXJdne+QCbe8968X06beDHaYIcj\nKmzmPkJdHXzxFx8jRZVraL1EjeD4r62iBsctYVCWFh7bP8Asi4Upgz7Nasqo\nfXhJ14g+LXJpep9OII8xmvYntJUgRUUWjV37PutPjwRYajRF1iKCKbQnXL3j\n08ziptowuWaGqaDiG0qel1IdXiiQQKe4hhdtochGv7RH/U76uV7RyMQ9zu1U\nUUnHSvjDDoEaxsI7e7BeDNRxWp1Evv4n53kzsj6pRZxgOg9zZVzHx1YRT9bM\n53Yqq93nmVIFtUzFGMLroswk0gHMCTDAF0CtConbx1Hd2b31ZZWjFpvQodE0\nUwZXN8zCrtoMEv9Y3xaJq4WQnt9fLPSwffcT4qGbdbgNFYdXKi4Gx70lhYQ1\nGnd6QNMqJbbEgpSdEB/0DaL61XJblTlJezk5xHzhIEhbLwZFLVzy/4fZMPi0\nYw4e\r\n=aDsX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d53e0032497f2efb6a42d541ce5cd2072711f86c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/rtl":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/shape":"12.0.0-canary.7c5000473.0","@material/theme":"12.0.0-canary.7c5000473.0","@material/button":"12.0.0-canary.7c5000473.0","@material/ripple":"12.0.0-canary.7c5000473.0","@material/typography":"12.0.0-canary.7c5000473.0","@material/feature-targeting":"12.0.0-canary.7c5000473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.7c5000473.0_1620081776889_0.42503281269690385","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/banner","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.de997644b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff3d2046e5685a977f5c63fd194fb473ca374753","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.de997644b.0.tgz","fileCount":41,"integrity":"sha512-gHPy6g6N79bSxNnQLwZu9jP+TZgsnVjdu4cV7lt7Q3+PUmbeBVnvAqRLePeNfedB5B26tTboZ7wm2Q5M1C72FQ==","signatures":[{"sig":"MEQCID7EcAGAevzPLHakm4K+begXbkPYHz4eVRpD3KLRNG5HAiAo2ZqmtyGgVKy//K0+4UobUrfrRszvmDNzFSHFTIy0gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYR2CRA9TVsSAnZWagAAwN8P/jeWvqbVREuU9YxIFPRd\nW9OaRbyQ80rwfVkbSvEcVGyshlyNyMqe/eUZDptsaXpXck6dU2TCB4/OLkiq\nroxXZ5aReOL11BSg+4hCiVKQBJD+UiD708QNASYdveh4rcTcgRtsAYstuilp\nhuqCtGeRp1P/lKOyPSWN1H8QjW6kjna/7y77QYN4oVtPiwYc5FE0VwnO44hH\nruQWYVkO6e8JlXta62AQeHO6fvgfMrD8t70CGEkE0dJ++FFYHw/wWItC8NXy\nx6kpdLyvXs+kfHbwBbSl0ARJ66o2rsb2n9PWFx/LRTGV3vw9fxzUvF4DVWj1\nAnWh4ruyFGuCC6VNlI1ljayQSxdwwiqX6ejK+XMgSYxrof/qUs2DAhtZtnyz\nsU+oZTqsT2UkeHS9r3PZ1D0tTbSLKyZIKm0lV9JdSP2URdcCYPnwQIO7yWNP\nd1lyeJMk3RA5R7kbC8G5HR1n5Th5IzFwqP/0WvW6RaadE7RcgbXDTAbNneuj\nQwYKLabhcGwjJRXn8pirU9qT8a+cU5ZHL3iUl00aEI2nQnUmMxKV9T2HPNm9\nT+H0md1/aAFq+pWz37lJx/UCKw3XrtMUCNlECl/UIyfWzB9g0Tmg6Ce6+H2m\nUwc2LnQQMZ/bEB+GlNteRx3sl6/ybDo+oASDD8aeBp4E9GltsO5jharfiESH\nYriN\r\n=qEYJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"efb97e2ef70bfc07ed9b429041e4f201bb0d3a53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/rtl":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/shape":"12.0.0-canary.de997644b.0","@material/theme":"12.0.0-canary.de997644b.0","@material/button":"12.0.0-canary.de997644b.0","@material/ripple":"12.0.0-canary.de997644b.0","@material/typography":"12.0.0-canary.de997644b.0","@material/feature-targeting":"12.0.0-canary.de997644b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.de997644b.0_1620149366298_0.8222517308660975","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/banner","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d4d7f1cc2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2473670c2c232abe48f5667e1c0408177337360e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":41,"integrity":"sha512-5AozCXxqiroZsL8G1FqpqAnwWfrO8yvdaSlP2fWcS1lzj7tLe4opCsxyhnPfgK1EzM3CpZgBYuCwOL2dXJdEhA==","signatures":[{"sig":"MEUCIF0Aj2JvAv7WBmHR5oxC/k7S7QkHrwmH/XtOi+aES3SHAiEAw4IEg7ahBqENIiHhvu3ISikRSbBUU8xI3CXW5fo0+OA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYrLCRA9TVsSAnZWagAAqlMP/3JDKpmPAMGvx8x0OAfS\nMgsCFFaFtR/f1D8s8t8vEpZ8vTgTbA2zBrpxw1g9xBZi3iXNV2a/vgWEGmCl\n2Tv/UeYBnc8tG/Hp5nOBqc+XT2qGUqR24oFYrT7g7jTY/vBqRfWQcF6xIo5Z\n7hGJpPtV72oU7+rBxcrKqhufkeAivGosibchuQEq/N1LRQDK51KayKgZoGGu\ndg8Qlj+H31tOhC3cAgzrG5avan8aQFRmrZzg4hVBqSnb3rP686vETjHMlx0g\nQVRmipYiKFcMtVdXobURLzYoXBpTeZA68qNgC4mkhSs24zLBWhlkdXyq+w18\n+wRXp9a/dD7t1OFokZs4OLeyv3ANgsbUB1VnebyLcjnivcsOgYAxj5fvcjQr\nwY5HMLsU7acy3wmEQITI0ypWJ2SawlGAnnF5y1FF36VpDvusbd9sW2zvsJgH\nNC4cM2ydFhEnFnV1n0xtUpn12pbUuY/MJBxnCFcuLcx+aS9/L1P53CeR9y7N\nqH9MeNcjB1bdXpO4fOt55W+NG3/UWJP9Vc9aNYJgpuWYzYr7/xGZU5URt8/n\nTeKL4poXth1A6X6RKtE4j5qb8DA5/HTRQHYJv8WSYQLOLSfXXpP2+AJoubfW\nM4e+uQAH/fJcXFOcihgEKRqKdrc/ctY9k0Uzod6qURrb1aM02Ayas07tcZhW\nLDho\r\n=XeTl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"473ac5e3a11b87616a0dcb004bd5a9411a271f6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/rtl":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/shape":"12.0.0-canary.d4d7f1cc2.0","@material/theme":"12.0.0-canary.d4d7f1cc2.0","@material/button":"12.0.0-canary.d4d7f1cc2.0","@material/ripple":"12.0.0-canary.d4d7f1cc2.0","@material/typography":"12.0.0-canary.d4d7f1cc2.0","@material/feature-targeting":"12.0.0-canary.d4d7f1cc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d4d7f1cc2.0_1620150986993_0.43591820096694134","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/banner","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.be999eb08.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1e9c15a00eea2bd25cba96934f45335c4703bfe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.be999eb08.0.tgz","fileCount":41,"integrity":"sha512-LpK4gCHWX3HDmBf98DRBaSb3PRRhWaxDlvzyrt9lnN0KjcRqg2fBqIYrIDYftCFIGNN/lFi+FOtMb2X7lqTinw==","signatures":[{"sig":"MEQCIBXZDC6ZKfWiehL8KCrWGpFT3ujxutR0wusUKB5kVVirAiBphNoClrskhKTAOBsOTnF1HwrXF+hl2SePKQwXzOD07g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYwBCRA9TVsSAnZWagAAiHIQAJ45DUEKB8Pj7+JceRpU\nlKATDfRjeyWA9CP8l+UmIIeO8AMhJhguC0WDXfRljaZoqxpXJqZ9GwSBPJlA\nzCCJRmjobwH+U8N3zsypSCOzjaaKorqMnxz7iZmyiE0q9EZh54UIIFMM0PiK\nCKFIT9UVOhPCki7tmFnLPiyyMHZDErv1nsEHo1UiHkPwIJ2rPjQ4JGZAh1iX\naO9lcRftjDqkxJ5hlnvCHvFhNqFFxEg3fEo/ICIrzsS27wmHISXDUOpKyNF4\nST7nq/zMjsX7u9Z3yPcqpJHdyro+c3Cf2jlwOzvR8nuq65n+mVRKpuPQQjHV\n5p04WgVs5OQpgsySUkH7OwodVNH2jacOGu/Z1/B59JVgF9Qyhs+7VrhhUcGB\nvG0n1g9aVNzNMn9lC09b0aStUvjt53eYEXhTa8rLqehhAPvZFxsEsdkgHrhR\nGtMI60TcwjKh+ya6DnAltnclHsvkb1tC44PrUdqOaO0tXvtQCTONG9qd/a86\nGgSHbmqTyRxHIW9RCEQm4Mhh8WUAhWvDMm4Ddfc+OPYotUbp5kyL+G9rfBw5\nYQ5uGhFpDym1PNxCB1sGdZMRjAVp7+e/G8pt8gif631Zalo1hOZirNh7eKBX\nCLn4UcmkdBHm4JyH4nnsQTRUEBixyW7Ov5zlxytwgDtOSRuOmZPj08gLXkJW\nhcg1\r\n=bp3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"78911f7ba4a7d68ed38f554357f8f224ec7a15fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/rtl":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/shape":"12.0.0-canary.be999eb08.0","@material/theme":"12.0.0-canary.be999eb08.0","@material/button":"12.0.0-canary.be999eb08.0","@material/ripple":"12.0.0-canary.be999eb08.0","@material/typography":"12.0.0-canary.be999eb08.0","@material/feature-targeting":"12.0.0-canary.be999eb08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.be999eb08.0_1620151297092_0.06095569733522854","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/banner","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.eda1705fc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"efe07034678f15a0462bf53e00741aa7ed150a9f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.eda1705fc.0.tgz","fileCount":41,"integrity":"sha512-CIUlPb2lU611zMkmLvR2T0iESFKw+cJ/0bcoCQZjqT1kWNHpx496P1H0eRlBTuSKyyW3/wTXDZi0EJEWr/8hdw==","signatures":[{"sig":"MEUCIFQoivQU8YrLn9pR7NpFGFYOY2TWmncarjMtnrZ9khpUAiEA+vSBnQOkhMdHokdIyki1/qkhMqe2QRBC2uWghl5bP+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxrCRA9TVsSAnZWagAAUJ0P/07xt+ucO5Uah9gfD0Fq\nvqdDJVL2npYr1Fw8/6eCU4ocXjYZkflf4NXAnMPlZ+ECJWYm3SKhkjgs3DCU\ng0JN6I1SJJ0Zkcb5C4MRpleEmT/IOpVKXZlWLTgi3Qn+K0A0E+S3t5jn1qrr\nQkSn9bBKvcTfXxcaZf4SWJoFmFsTvpI48YJ81o0QpjxPjL8hS6nlNNb2UUL/\n49faxn185KuDDdXI6HmpIIYrmyeXZnDscgtbjW8/YXZKYgpe2AwxAyqgKLak\nh9WMpqVUz+5Ts85tP5VM8T5U4xZ9cCtPHO11jknGtBBScfYl+CPUUWfLGlZc\n7kmnfjDuKj2JziuDB0Z14K5AUNFgDRaVQS9craPVhrg12E92n/YINWBIdz0L\nB6dLXWORryt7eeaOKuBDvdf6TnB8lk9TNL8NqJJ28R5sXl/SKgO+/wRAO0Sr\ndE3JOcazfb9B+nSH/PzpsNKzbyHjzpZODudDua/rRpMi7Xm/+O1s2DIpd5s6\nFw38Ykh94Q2LqWtkD4QY2jYIs68GML+rjSt1ZRruTmdpdaODa0h5f09ri4Tu\nM7Iv8xezEZd3yj8dQuLoKUQio8QSTB9JPo68p7jyTX2fL0MtVwaOBnX0Zwkj\n1X/4JezoE5Qr8BlSupnIc3Z8tueCLF4D3NJlEULoNJb7yqPJFiOHTn49oAFs\nn0wM\r\n=oeit\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a4c7f355f27d26cb39ac4876510254d165a5645d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/rtl":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/shape":"12.0.0-canary.eda1705fc.0","@material/theme":"12.0.0-canary.eda1705fc.0","@material/button":"12.0.0-canary.eda1705fc.0","@material/ripple":"12.0.0-canary.eda1705fc.0","@material/typography":"12.0.0-canary.eda1705fc.0","@material/feature-targeting":"12.0.0-canary.eda1705fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.eda1705fc.0_1620155498756_0.23538316616525057","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/banner","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.718c90178.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08dd8179aa9daf9c791776f7c30e20c8dc912adb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.718c90178.0.tgz","fileCount":41,"integrity":"sha512-uzdGbMXCrhe/6w9ojTMUkH5Tq5KrVE1qxHNxXh1glczbo4DDzPsg7yvHsYs6n+0Ic1cv/c2jGoI8DH5rrYBVnw==","signatures":[{"sig":"MEUCIAH00n1sW3K9nxH/mmAry9Bpcv/+v88yhZIyo1H04+G7AiEAwdPPmhRGVKscM+vOTIXzww3S49J3kdHvDLZZ2rKzz6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaB5CRA9TVsSAnZWagAAA74QAIBrTfJhragFAGmwP8OT\n25EWVFDdbABhYpAt61wmxcvDHBp2mcw++CBzGpZEIeG+e2cXKjRcJU+cbkKt\nHt6VxMHcGhuN2XZseYBuiswN3tckIlek7qZ8CAfm+3k7RIK3E8kqczfLlzhW\n1pwDjda5Hgzcpw57ZAIiDdV8oBQYKJ9Laj+4CIa9tVVJmD0y+/NB3KO70P9r\n0XjSDaepiBsWdagepG7MAEhBmxuG7ewfVaqW613wwrhpmU9r/UZXTI4ng7zX\nZhLT510uNWXdPf0t0hYuTazfvCGgNlWZbyFR272MfclpbEsRQvGSaKugniap\nqCp8Pj55FxaUPETzLRi6Mh6b2HWt5E7MdjUXYKxbQQ3Gf7TB60Xd3/qmIFp1\n8+4jSeyYq24wBmsWGtCwQtBw8quJUn0hg2UttjcIrJ+oeZv+hI0N/1sCz1Vh\ndVU3y26AJH0aeosEQdoSzsydrrh2FRrgjfFZDKQ8vQBTCQiBP8Z7qfGCRS7K\n5sUj0ZVGFRCjO1gO1vne2loUrRRw/XCnGzMB5IiSw/egVEQ2fV7MO6ZKTxYx\n75C8JieB82fKrkqsEXeHHrvYygS1rQBQ66nOJ/NQXkS4pxnUfZ5ziaDmkPH5\nU/CyyhvmhLdYSx6oEbZi7PIwTUdbwQzMHXaMPY19qbFHca2UdjsUvKP76I8w\n+D2b\r\n=GUTX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"38bd77e93e567329d390e9784d4f591d6dd41191","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/rtl":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/shape":"12.0.0-canary.718c90178.0","@material/theme":"12.0.0-canary.718c90178.0","@material/button":"12.0.0-canary.718c90178.0","@material/ripple":"12.0.0-canary.718c90178.0","@material/typography":"12.0.0-canary.718c90178.0","@material/feature-targeting":"12.0.0-canary.718c90178.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.718c90178.0_1620156537259_0.4740241677825099","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/banner","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.0e3917299.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"667f7d49e43e230bcf4ca3de4ce25e0c4ddaee6e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.0e3917299.0.tgz","fileCount":41,"integrity":"sha512-P3zdoWZQ5QKGhR/dKM7DqHdQwlUSFX53vVLn2JpvRJMEJRvSX+XYMybLbDccdYjhcKIB585M9Yn7nvjqU5hvhg==","signatures":[{"sig":"MEYCIQDw7Kv0duVRFkchi5ME1X6fALHuPFGoteZeS/smyIkrRwIhAPIuAhd/2PA/NH/EFHIQML14MgecBIAwrXKsRRiKEgEE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaElCRA9TVsSAnZWagAAa3kP/R3xzVQim43Fie2Pb/1R\nP+VXdtxrj/4vHTAkBQnQNnU3k6XaTCcDitShRh8VlXeWBiJiXg/keGB44TzV\nrUqNLUzI08HTMNjH8/bJZYhxLEnac54ifX4PGGeMU7hjoc+/pMEW2UZ4MMAK\nKKbF5nKuvuKqVqmg8m5pWSBtW9B3nwmDv1xsRiHxIL04aAqco99sRzXmw8Ic\nooIBClThckbNmrv8rLoWgPEnbCjIOIL67RREjoIYYPiTh7V7B5elO5+/kOc8\nVITKXHj/n9AOgtDJzvf3/LNXl57CRZUTakyuiQZkBqY/kp0xOAc5bGAO2Cw5\nKJjHJ+N3TyiwNHyyiyskUp5+jNNy4DKUGG7uv4Mju0YvQyiWvfZyK1F+CPYb\nCs9+KCRf3hNMuQ54dWWASC5mhVVfIqOdf4KY3XnyK3tDul7FwrNKKGGWLapP\nVIKy1ZXj5xtl+vZQMbDexL47vkcVWb4UfXeFhXYQQ0JSaoFJgo5wSKbRItW2\nqNDJK1UaYXqTo4qBTvvJdHjOtHtTMaH8D2YQahEbkp+IoS2/K5llcc7IjFGo\npzFE0/X7oan/4/FyMFddzJblUd5JymwIWUuMBzSCHBUX1/ObWAlqwr2fuQyu\nkF+/DA7SKBBKU/JTf7d26sAQ64P1J/gSdttZYFT/nWbBoefkxf5SyFCOlfwr\nBnSG\r\n=OvO4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b53d9d2ca98f518aa071c4933f2c0046916932d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/rtl":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/shape":"12.0.0-canary.0e3917299.0","@material/theme":"12.0.0-canary.0e3917299.0","@material/button":"12.0.0-canary.0e3917299.0","@material/ripple":"12.0.0-canary.0e3917299.0","@material/typography":"12.0.0-canary.0e3917299.0","@material/feature-targeting":"12.0.0-canary.0e3917299.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.0e3917299.0_1620156708869_0.29993250735864985","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/banner","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.836b3c7db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"25675deb50677f08350713847fef1ed5c0d0684d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.836b3c7db.0.tgz","fileCount":41,"integrity":"sha512-5r2o8fagUQLPyLxfKcmNwdVoiw9buODX3h4PkBP6XuAm5ofYXPoVwfAC5YL6/CoRuZ0OIOcfZtZzROETvoMYXw==","signatures":[{"sig":"MEUCIHJv1DxCpK7x7eqbEX27gjtOgjAEnK3hXxx3GAUWySoLAiEA6IkeEa/PQNJzU6QU5qt8hegyu+ToNHeFyFMKab4eJsc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/7CRA9TVsSAnZWagAALbcP/1QDhUjILIw2c+Was0d2\nIYNSETDLHjKNI78FpqjO1tnOQraQpG8mC1WgOYOmNu0C1NQC3KXb96G3aWY5\neLYqeHrgZjj73c3x/xGcdwScrOnR0ITAA8+SxCQ9WGIDouRxeq1yV1kA5HbR\nnmfJkqXtCmdAYD2rwJ8yOQquXhJvaSoxCW48LAT+cJLwMwX6WdgQ5uXNN2C2\n9VnJy98ikrQEW+ieBjqpioeDSfQsN5xprt3QP8lzz734KEMgehsT/lKsBe2A\nLZgolqwecGV90pDyN5qxLF971gckc4AGqTJa7F962pTWmbGJ7CSik7Kn3+Et\n2nWEGgtf44FrZSSAeiMY8/9QBPOC0rHk4DfW2pSd2QtTesI4Z8WhvK7iXIgM\ni9UfG+9LbqoVL3LiignJhHMUCiXsIdyPOaZTIWQOKJqZGW6ToveGxzN3it74\nSKfoxue+mzg5lr/ZhOzoqhBHMKUbX3rDSu8tZpulXloOV+yMudbmn9CqdwFg\nr7DoBH0Hob/jSfO2AMXwLnZBG/YhHibf0yUYB99do9oBI+Nihb3cPQaMSx0/\n86tm5PZinmomCBiur5oF/z1ndHGDp0UZC9nsIooWDxelR1P48SnEeYb/IA5/\nOQDHf/FtaYKLidBXl7+UH38BGlMdqltK4aCHTrLC2p+Cb8alIb0wCMzVHV40\nJepo\r\n=54oP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b39ef8f7b55792965f33ce0e4907f1811ba2b17e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/rtl":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/shape":"12.0.0-canary.836b3c7db.0","@material/theme":"12.0.0-canary.836b3c7db.0","@material/button":"12.0.0-canary.836b3c7db.0","@material/ripple":"12.0.0-canary.836b3c7db.0","@material/typography":"12.0.0-canary.836b3c7db.0","@material/feature-targeting":"12.0.0-canary.836b3c7db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.836b3c7db.0_1620160506907_0.39742385169761163","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/banner","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.53d4e6d59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b05a57eac45f72e21ee3ddb97ab2f45256c3a1b9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.53d4e6d59.0.tgz","fileCount":41,"integrity":"sha512-7pqGK4UpI3BOZxpYLLo6lNoBTn0oTGSczaOKMycq55fN0aqLo7H7oOXOJTv66d8gLvuIZq9dpauGFk8ukYB3QQ==","signatures":[{"sig":"MEUCIQDr7K0n45rVyg4rRThcO485nyIfUaW5yr4KQ/FVFbggzAIgVtxT+4ZPjct0XYNU6gowv08Ong8dxn3doyO5fxu79v4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbOoCRA9TVsSAnZWagAAtUsP/0S40IH0QxUymlHPgEaq\n67Kjw8bvLfPEEdEZJeo0ge4blhjJhFnVCYO3XvB0L9sSrOk2eWUWQ0Zef7q2\nUJeMVhAb1p0mhnvhVCNCzR0ynv0VEDAgkf1Ze7c8/1qXhJLWmGBqIMYXidN8\nL9JpFI3XE0XrDFyz8NSQl5Am8vp7YEaACtBHeJNuChgAXXdOiwrkbu6KXNhw\n14Xk4zrD7b/4ceGv/Qe5tPPb4nuPu+HNAUM7/CkqbfChzd671oUvFb/GAmKp\nPsEGO8oFR7Bgar0XX2Ij5uJjBFbM2BTIZF5WCADyTSGfw+9bv31o12lE08Z7\n+lsMu5MgoiVkKpPkXgsfID4MJy9PRBQLKDUlmKL6S7p0gbtLcd7uZTo/yxrk\nXvcMSY5Wk96Ce352kbyLg8KTt9glRJ6po5+V8cnTi+0fAZybrLtccEEgCNnZ\nb/Q8nzpOOHya3epiwr5hXHDKCnYbHxNJuFh2ydM0PsMZrd7wG5agtT9K8Xy2\nVEwKX5eR66QSFm0TehY8UCvXndOtkre/4kZPQ4np1H+nVfgi5e6FVrCqaipD\nsq1igSoHigMsp8lT/JxPuYGnSAZBQYAN91n9o0RN+Gj+DmDdnoGZDSiwIL4j\nB5ECwdFUZf9HYGMcdzBY/dIMG4Z+qTu6hWHRWfsMvVPIQHO0xWebW4JIJVJX\n21LG\r\n=Ewsk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a89a7c81034e7bfbeb469ddc1e1e463b018f7179","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/rtl":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/shape":"12.0.0-canary.53d4e6d59.0","@material/theme":"12.0.0-canary.53d4e6d59.0","@material/button":"12.0.0-canary.53d4e6d59.0","@material/ripple":"12.0.0-canary.53d4e6d59.0","@material/typography":"12.0.0-canary.53d4e6d59.0","@material/feature-targeting":"12.0.0-canary.53d4e6d59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.53d4e6d59.0_1620161447932_0.5517173744074455","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/banner","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.18d147e27.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"171e5dbb7087d179b2ec9ed38f472f7d6e60ae2d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.18d147e27.0.tgz","fileCount":41,"integrity":"sha512-iBh8iAQrZcwPnHdSRz0TksOIB7JbBJDQFxARmkkeaP/499NrqUOpv+8h8AwiZv7U0W73p/O5o+V4vtBn21oDqw==","signatures":[{"sig":"MEYCIQC0u3rOBu8L1/bDRZT6tuHxDmAo4RrTyUAFoXsXScm2LAIhALLRDSFjGnDNe4pBxmTmylSrCzcAExlnJv58mJnoSvjn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWjCRA9TVsSAnZWagAALoMP/0yjUlMtGPsDxHJCyUQv\nXyilpsTCHBU3cohHaBen/8Ypzk6zs9OmoBKCxIzjWL/UwrFZrTWaYTTVRpKS\nB8ujT34SIZzenqzcFQBA7RRb9ZXX48m0YoAn/k/s0v9U1lVqDbScb3fFQ/l2\n6tGUmDuKZUtOrpFcSWJUfoPWOn3o+/MIGLMlLQgGZVSKYp+glP3cvetdqpAc\nMetT1NGh4H/MbLP7FGMIPKa0V+QCrHLEbhLvDGHOIXtAHD5YEnatALuHng1v\n87GAtiX2rHy5VuvGpG1ec7bTHqIChn3olQU+puQ2CDjNjfZTV51WW7/FJe/J\n9yP35vf7eMi18l+ExcaAMSxhsY+F0tk9nyTnRhsbeh4goTR5bg523npo/OcO\nFT1T3a2GsAjt8r+eCT8n7xjzUz9xoxCoBeIwqTbyJteVDXbKeZ3QGt5s21SF\nwES1wuhw5VXyUfeRfJXCisDGOlUCp5JiKIGAVpv15s0m1xDHKG6zlQ7JdPCp\nei7spo+ioUzJ46qI+ggp8zFGUIG8AWme3ZiPLFDDV+6oIwQjFwD/x/49Z3pl\nGq1J+AF/E05dhLjVDw71Mz9p8E/mQy8KaFIk3ZT+ZflzoWNW/uBQZsYqQJYL\nmr4vNhBflyyKvQBqRYxHdd3vMQK5AecSYA51WVV5zYFu8EQZwl0PdVRUBkIr\nvSFf\r\n=goov\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"02e686390dabbb1590eba968246da65476db162a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/rtl":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/shape":"12.0.0-canary.18d147e27.0","@material/theme":"12.0.0-canary.18d147e27.0","@material/button":"12.0.0-canary.18d147e27.0","@material/ripple":"12.0.0-canary.18d147e27.0","@material/typography":"12.0.0-canary.18d147e27.0","@material/feature-targeting":"12.0.0-canary.18d147e27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.18d147e27.0_1620161954982_0.9448054754418378","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/banner","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.b9984794e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48a114cf21b591c3af9d116872db3f9fc504829f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.b9984794e.0.tgz","fileCount":41,"integrity":"sha512-XOuuI//e4CBVOM1y5DnM1jkp8uz5pFPyiUXjKfRHK4wEdfGQbPVsQtBC106MwiQoOuRtTS6Bjcz60EZbj/K4Qw==","signatures":[{"sig":"MEUCIA5KLgJoytfj19piYi24e6aF11LrmO9fG/lK9UJOuRJ9AiEA1iDF04cs+H3W7eWyhKnym6hjZ3+acDuLiiW8yvsMgzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdL0CRA9TVsSAnZWagAAstQQAKA+oG4zgHYDcZHKHY0p\nRZRQPDeCQmgzU8ygjHbSgwqGsgnYpZsaN978R5nlXI5WrIGcmMXItQ5ib/xv\nc7RCz7lc8V3VGLOkIZ04eFbsUdNnqYP0r5a69MiQ5RBYK6iaY3gP0Pkbct7T\njGWXkm6lA8Lx+Qx27YZmX+B2EoXAdIml0FJdpnCJZft8lh/yEV3pPrkIziiR\n7QovNiZEoz6MkLSDsXoNHMWt8njqEsq8QBQKjjUkTKi93c4BhjqY8R2uTvaq\nuUnC+J39dJp2BQQ0dIkzThXI600DKjOGyKfAzagBLH2jRfHPHfbNTi77toBH\naQ33+39jNVEGTkBWEasvCqtiOfGW7LrZlKlpNLtRCB5aa0qC2me9CI6Q+7qc\nWzVPWsK1qN7dDsJCHVPJZGuRDcrrZh1CFihuDHT+HxvYZGGJN9IFzFoCRoD3\nRxM1ucyweKnxk9bbO4WtMKZG8F4m/pkrQAv+o0ZnnLoQIg0I7BjT/1eSKlJ2\nfn0EHKUVk2jOiQ9i5C8dIxkkow07PQ1nHVQGlUZo7f33u9EdCFJ4kxUMJqfM\ny5SilCGCc9njjmqVSdcJF14Ahs0uq09KfH+aRGazqrUjRPcg++KhJOvx095u\nJE8/86Kg+YPo3Ky3QWRJ9C4xNoumEs97FHkPhQzbKYgh9dXvA2i+CZK5XsPh\nQuwe\r\n=+4+X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b9cb2c88737add4e6d3e04893ef4ca57b7848549","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/rtl":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/shape":"12.0.0-canary.b9984794e.0","@material/theme":"12.0.0-canary.b9984794e.0","@material/button":"12.0.0-canary.b9984794e.0","@material/ripple":"12.0.0-canary.b9984794e.0","@material/typography":"12.0.0-canary.b9984794e.0","@material/feature-targeting":"12.0.0-canary.b9984794e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.b9984794e.0_1620169459921_0.44951647623241997","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/banner","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.b76f5fc9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b45becc7dfc315ea3edba108b6230876be3c3529","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":41,"integrity":"sha512-rQAcO6NWPzg0Anu6D/GQoW2E2a7D8aJpQ5ZA74+ePnNdMzketRzdEjlEPD4WvNlWWFfehb3lVoONCf/jgNlyIA==","signatures":[{"sig":"MEUCIGVR+XmKE73XOrbcbtLW4FdoGHKScPUiHf/TuDGJXMh6AiEA90fQjLRq0CtiE+MaPhugUp0uG4xXb7kB3zjH3bJQsH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdPFCRA9TVsSAnZWagAA9UUP/Rk4Y5xbsJYIqKrXWufg\nTMroiDBkrCUKutklLE4Ln3zfSASVhp8HOV8MM5Tbe+VRrSJ1gK13Q3PkGdwb\n0zRu25CCjV8fpEJ6anej4dZtKZjf6I6XNZXfn/Ga5QI78b90YLpCXfiSG52j\nGaSKjOwE/wCRIxxFwMLpVhdxutCWho5VGWfdrdRNtRn9mvYl2X3EFr0ZFyIc\nqlH4E0Z3T6jsFH3HwviP8QoKdlY0KuTlZxNt39FfP+L8WLQ8B9gfODsHFY7p\nRcGMHzJ1xvH2MP7oebW9opm43ETn2Z1lAnA/YzG1yUkdJ2qmQ3zB5YU4VLGA\nqn3M2nsSvQ/k52BHpsNnPKFCRyHSxWNFohUQCBTt+rKbwNY1HVq0NBF5IyCM\nKWE6khmkJ0vyPO1d/QQo4gosd6QA5MllY4EOL0W3huYcOW+yZ0w+ZxrKMeL0\nGefNKt8bi1XLYM/DJQO6ze5vVs+g57qxL+1A6D75PKPj3T7IYOfOwwMeIfRY\nT6zfmfIaYEejSwdCg1UJT3a290gnLCBd91/2YW6wKDukngxsA7aL/Amt2e8i\nXr9k/X2hb/vRjdn+k6DoNyi9UxxM41Hv24OlfThVEB81g/tzsfBf69Yo6j1I\nYhhJxUz4wVfUHYEzTas/6phNWmxV2NEbNH/GsmFg64OiX5FJUZC3vcV7ryjz\nK9T2\r\n=g7v4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"219c30995da49f5c5f458aa1b983f09054c2d4d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/rtl":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/shape":"12.0.0-canary.b76f5fc9d.0","@material/theme":"12.0.0-canary.b76f5fc9d.0","@material/button":"12.0.0-canary.b76f5fc9d.0","@material/ripple":"12.0.0-canary.b76f5fc9d.0","@material/typography":"12.0.0-canary.b76f5fc9d.0","@material/feature-targeting":"12.0.0-canary.b76f5fc9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.b76f5fc9d.0_1620169669416_0.3955484296404139","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/banner","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.055d4f10a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed4fb38e904d1ba995d16b2dfc9cb1ff31718d19","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.055d4f10a.0.tgz","fileCount":41,"integrity":"sha512-eCrseZeDDmPyy5NHb/CO2otjXM8y7bALLWeAJuMaZeTNV1HSPe5e5p9AOEHdQPvmGldvHBIpOh6KVpj6AKZw5g==","signatures":[{"sig":"MEQCIDu5nf3EhfrAep2VRgDavSjq8UKTxcRQtdHMG9kiOcamAiBABVO7Qjt69LY2hVyUckuMZoGx9w4US/HHHPkcCzkYvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkddYCRA9TVsSAnZWagAAzAUQAJlRrK/TZ23oEhUknb2r\ndxvfcVqHetnS4jPcsMv1PT947fFbU8LLatg6vRWafw1U3oLJ6q96P76EQq66\n8YiI5SfHWaK9fkDaCdDPja7WytKxI1gZl0drpJuQ3yzVyodAvRs7He2+W8Qg\neGT2Q8+A6HbN2ym5yCqeK10kC2yyR0iGxPgIAexxVcTmEChSHhzs/gP/oz3k\nZrkv+jdtduonn9VLaz65fw1baiyRVZt5TCt7LdAaz7kolWWN9x7gfmbucJTn\n5XPRsS9ppgI1Q1hqj5U2hBI4xGlj+Yz8RtJK+KaXH6Mat32KDvh8HprPa+gp\nqQxvv4D1fQ2l7qAtmVUGQriCgP746cSAUZsVTsatnuAtWi1DSla+L/Hx3yeL\njqqW2PUbPuh4SwuBb+q1ekBAy/KleV+CoMXxaKSxB/3US7SkyJ5N3cU/7Jwq\ngOsZm9I/SevKtGWmG0BIfBqp0hjFYAj1WeQci6BTkUHChse1donaYEE1VSyq\nCEeXoAwjVkIq2pSt91HtsxuZS7TEAbIPAG6vMlceeD0+d0I0apTHbJl2V8Vk\nTcvKZWgaHXNs67ozh+FTgqCxIgeDJ7iC7UGtXysGUOEPvw9r45kmbULCo09v\nB5Uc4Bs262RvEkv7+qzVokR5iggwqruOZmJ6//Wzs3qg+Lxetg5/nOP0w3Cl\nnigz\r\n=HXWs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"df8d3cdf52cca2c339c1fa1cd18129db35422c55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/rtl":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/shape":"12.0.0-canary.055d4f10a.0","@material/theme":"12.0.0-canary.055d4f10a.0","@material/button":"12.0.0-canary.055d4f10a.0","@material/ripple":"12.0.0-canary.055d4f10a.0","@material/typography":"12.0.0-canary.055d4f10a.0","@material/feature-targeting":"12.0.0-canary.055d4f10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.055d4f10a.0_1620170583727_0.6522912347561785","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/banner","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.5b6a46016.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92be72423e17db51b61a3c8f794aaaba8d685500","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.5b6a46016.0.tgz","fileCount":41,"integrity":"sha512-iCQrINp4Snbr3go+whakKxQBhuFHB/FDFr4zbR0p2oqOjESVxj2Je4f3Cwba/cxHwoMi9hQPy1fSn4k0BnE4xg==","signatures":[{"sig":"MEQCIHA9bWVrf5zGeTLnAWC1YsBQN7PNdz7r5cFxCLJlwoD2AiA1cv1Ey7vpBhXMeMGyVfo0FGh2jNevW6PpqrRVb6dzfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksUfCRA9TVsSAnZWagAAQOoP/A7YB+tRM5Hgupor6/Wx\nFazixunW/nfTmitzUz9kCG7ADqrP/s5d83eddkzwtOvQgEj6RlscgMABmNAE\nMacGcTUvhUj2HTp8AdSviJoNxufevP5LBx5ufPzh1wXZr1FB4nzt6srTO9gG\nLGwKBbxjV3+t5kx8B5zu7LpGcEVLLFUATZ+Z9ZjsaIe37548Je9fPB+qvNP5\nCPusIoUr3pWFzl6mpZHloacwS+ob2QDLWHdWenIKN+JxsPvVRhu1ps6n8nA+\nl3+IVZ442AOOKfEOr5qFwP4A7t1BkDckNQ3N/J05c927uN3YNbcvZfTVc3gD\nKmmxZ6QVWch5f1ko56jAz1/A/8OeYExChUHYUQ5r1l4MmGvI6qShjWfaZWb6\nxeuxHMI+hTm2TPEi5mJcQhKb17ze0IyKY51fR+no06iPKFO8GSqcHYTHqxTg\n0IVhPMZZDICA0yyJKDhnSLUTGwm5e4gf644aHWSeDHR7uCUYqb2O/eD48kwi\n0aLGeQ8QUNCI/MTRuwtLTNx34P7JpINw4SJd+Z3C7bvK5fiv3F/UTfFYNTdH\nn/PMhJnkDuLpoi5wdLlZ0ECQ4GmhcwdzJgurq8ZUVwWY1sy7kE4IjCFe3qc5\nlxoh28dmMZIXlJ/IFVRhP7QFRfwo1shCmtbMnkAOpXgyb/OwYpN6kHvvMG8j\ndQXL\r\n=UEWv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3d9c7e3c179062db8b5bc243e8bbfbd9d9132e50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/rtl":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/shape":"12.0.0-canary.5b6a46016.0","@material/theme":"12.0.0-canary.5b6a46016.0","@material/button":"12.0.0-canary.5b6a46016.0","@material/ripple":"12.0.0-canary.5b6a46016.0","@material/typography":"12.0.0-canary.5b6a46016.0","@material/feature-targeting":"12.0.0-canary.5b6a46016.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.5b6a46016.0_1620231454737_0.7515070031075666","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/banner","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.33c9a737a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78511ac0ec9b05723f5ad78b4717d0d8ebcc9849","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.33c9a737a.0.tgz","fileCount":41,"integrity":"sha512-IWI6Upg+i3H426ScgeRMOx0Ec2bzWGYZGgAl3YZCyzHauvgjC8b4/FQ5XoAx3DEhZoiFFNB0eOSpahVyPxKxqg==","signatures":[{"sig":"MEYCIQD/nrFpHLaRz/Ln6nPKk7e3RdUnfHK3AbZarMP4G04O3QIhAMesVFsIGDaT8X0XQSWbwox8fqpbDS18vqNSU6JCWMVs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktW+CRA9TVsSAnZWagAADvAP/AqjfM/VdbV47QiZTztb\nFll49YbjYH84HNtPaglfRfh6Dp0+YdPzyxDiNTiVbjvdPGuQw6MbEckMx/nL\n1KnrV1pih9OJ7mN78Z1YCShH1Z386X5q7ppySFsJPYj8huPH027oth0oOUK1\ncljK8HbvdWMpF4Hx0ed2BYc7eKijUktNmv1cTt/STCBVtyHpvMncydgOfLPt\ndH5Q1cpWCvlMxqBl0hgVJsbc56gFtyAindH57P8an1xssnyeUEDp1ep1SuTJ\n0TcS7mF3eOZo66v2c5ZJ70/KkMErUVXItQHXtX/H5l5ckYpU1E4hxW9o0QNT\nw25DZUkbx0IXPjYb3E89xotwUIwTCVf1TTDa5aQYpVJRfxWsA1U9K7M9G+2V\n5dxbJnKEs+3WQlCSKkMcotu1+hQwcRt4oU9C3vBXGfLoar8vz0VNLqjR5A9l\noju6PmMjs/+8JA9k4ctryU3Gb+jbHcp6o2YI1ykilQmqjtOYovUoVXUb+oG/\n7T6bA2goA8ybbOqdzgqEeG4QPyWLrQaRS0FMy3jbdUqGV4mSR4uSSp0BSbdk\nISh9TsOBfm4xULzYBs3CA9rgAtRoNfWtflSK2wDXOcIYy+3R5itVPc/pyGmt\n9p2YEYoXVFbOD+NKmRwfSsi1xr+Jw1sMHB3yoSL2QJSKdXuu9CVe1D1iGwhF\nwkR/\r\n=BJ8P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fa5c97d28049bf03f5b138c0d97bdc267f43c363","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/rtl":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/shape":"12.0.0-canary.33c9a737a.0","@material/theme":"12.0.0-canary.33c9a737a.0","@material/button":"12.0.0-canary.33c9a737a.0","@material/ripple":"12.0.0-canary.33c9a737a.0","@material/typography":"12.0.0-canary.33c9a737a.0","@material/feature-targeting":"12.0.0-canary.33c9a737a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.33c9a737a.0_1620235709979_0.05612828654867852","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/banner","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.9bc0effaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbc58d5c41c8f64925a296faf8bdc90f3cb65982","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.9bc0effaf.0.tgz","fileCount":41,"integrity":"sha512-Vuv4Ldt8/1dtGEwZmDxckO9t411zHb0RALQDelIgS4O5UZw/YajK5H17hGvic5BlsqHvw8hAaKzKTBsUlm43RQ==","signatures":[{"sig":"MEUCIBFcuZc3zBhv50kbVz+/54/nTUzxxapDrNYbIxKHirCQAiEAlrxDtRJtXumAJ9NuZSy2wfm4MVHaZI/vNVDj1DRpJdA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":481530,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwekCRA9TVsSAnZWagAAyjkP/0WfCBUnPypL/XnE3mbi\nq0X/WtSNX7wkfq69W2oNPcCi80U5H/2tmXleEdKjxLRgjf3wshb3i6fM7gjb\nR1WnW/hwo04177CyTNrESbzUreLjt2IBw0/d2gDpPCRJ2QHlWIFdYwnorJ7w\nYvEVc/9z1Bgmb4+bUt228VshUYX1VCyrn5dq8BzFjBY1i+hBo4zeAr0dsVbY\n4xAU/3E6AQvehG6xkuFKUZM37M7d9SesJIN/bstKdetwvjMUB8vpBB7IQ2TK\nPSt4AtcCnGwagGvAuB83AkXZ+ICv4orYh0l6Tq2FgoNEB3C6QLZOU/Xe3+tr\n1FWyXI6yYmR428siAibtgtfBphv7z38wf/4Xvu2yGxlTYO6PANaIDGDbmsR1\nGsEgUpq0Cj7cuBThW7l5zSUYJKGDrrPvYX7FUSGKj127RZzSF63Z+K7ZajhO\n6YJAEFM0CVEdssbrfPgtPJjkqcUjSVAPfLraksoTqPkmKbp3WLM24wuLeYtV\nPPu7XzmmpJ3LB/AYjZmZiDwG+Ly0fpDhmf+wF4dWpDDaGwPUDqa2S9nQNVhX\n5gDmTWtT8NZ78+9pHj+H+902qVHvY25Hb6HpkPWRctSQLXDh3nTBVoTOhur1\ngW8yo3ld+gplX+BqZ5R722snZyzoSNJp1jb4hQqLsbjr3Kn8g0zEhCoQohMS\nxtQb\r\n=fRI7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `mobile-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.mobile-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e671ae06efdf42f7ea0cb40bb6700fc57f6a35f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/rtl":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/shape":"12.0.0-canary.9bc0effaf.0","@material/theme":"12.0.0-canary.9bc0effaf.0","@material/button":"12.0.0-canary.9bc0effaf.0","@material/ripple":"12.0.0-canary.9bc0effaf.0","@material/typography":"12.0.0-canary.9bc0effaf.0","@material/feature-targeting":"12.0.0-canary.9bc0effaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.9bc0effaf.0_1620248483110_0.057538656615593764","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/banner","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.a1e0f2af5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d66919df37a3bf8e101385a2a2a4b96028df19a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":41,"integrity":"sha512-UExNuOfh4+4iZoec7AjYtvypyLhZ0bTmf4zxTXydPotCQ3N6pOsqvy07viGhv+G51i/6hzp+golWRp25Rwyscw==","signatures":[{"sig":"MEUCIQCeWCjgFxJTodvj2993jK+RxgRemTmEdESceU0rND4esQIgQ59/7TMyTueswepXULnSip0daIRI3pzNmQB8zQSM7Sw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxE4CRA9TVsSAnZWagAA+DAQAIxGCbwOXlcZWXm7WhLH\ntrWv8K5XhxApu/3UDxlsulmS5kQ4CTFnxkydF0g0gf61FwN5vMLB793CyIyq\nZ1zXceaGGnzTUCPCYm4zMDKJb6UwDbrSl0fM3TRBo70cPIKJd7hEwsFxXmAi\nEKBW7GNRbsexYHuH2TuJ79piKEoxGA6trOdvgs4Kp/eKeLW2uIcEQ6x55OWZ\nSzj/0n14Io1HcicOHOHL8xjfKvVj4b4Gcbu6DPzQ6KhFWJygijQjMlJAfRPz\nfLW26Pfe53eRZrra+cUW5TU6EyGb2MxHXjyFc/shqLeAT8QkFz3Edz14sonG\nM/9ldoGXYoYfDhs86xXeHKkzbQATN1Hm+kmcg5GW51wPrO36zuZeYuIeIAaf\nsOnQql1THyinNOhEwrsGsIORhB73v8HO7uapzGmVlA2S91Y9NOW9NuueuRa4\nuUodP8UuQs1GJqEq6ZiuoS/1rhIKGSCje59pescdi2yHIEvLFBqLgEt9jggI\nmgfoVu4sZFQnwMmJgHxUn7a+8ys9yNOZf5VyIkbqu3FCSI0VuCY2JGj/q2MG\ny5+WlzXxg0CEJN8vRfMQGZsugHKE7zbHPy9Jl67JA8yKpotFfrbrZNGjVGzC\nFj4koKaGomROfqiFre5r7qyHdo6teQfPRQxLgQyCvNS0c0Zc3JbWpPYI4Z/l\nPcJW\r\n=I8GC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7e20a4b86d7cb59be9ebe12cead11b1e8c7bb63c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/rtl":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/shape":"12.0.0-canary.a1e0f2af5.0","@material/theme":"12.0.0-canary.a1e0f2af5.0","@material/button":"12.0.0-canary.a1e0f2af5.0","@material/ripple":"12.0.0-canary.a1e0f2af5.0","@material/typography":"12.0.0-canary.a1e0f2af5.0","@material/feature-targeting":"12.0.0-canary.a1e0f2af5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.a1e0f2af5.0_1620250935496_0.38143239953101205","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/banner","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.06930c96b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae1702ec9b47b9f8e13adcca6c03a44db107e5cf","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.06930c96b.0.tgz","fileCount":41,"integrity":"sha512-AE/FQSAnLaESNWUZHCvjWMgBucCahMRQJ9ZeROkFnHUvxSWupvqeE85X68izRlXie6hsTZFF47EgoS7nyhy9AQ==","signatures":[{"sig":"MEUCICNAhAHTBmWRRqNFcsB+bXxVt67+WrmZ/yXemv8NA+oDAiEAx5rmb0yH1WoKMmaoWhDhqsBhYqSqQjdDPRqJsYFXYN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzrCRA9TVsSAnZWagAAb78P/0E72DuoTlk1aaNSMW4B\n6RbMjlEfLI9uyLSVH47Zu5LrJy/n9oqGzFc7WCeh/UKgSX84OKpjurJCZH+0\nPwDvUDx+74VmlDZNjHYsNUVSfaHaw4pzBB4zu9A+heoCwj5pkQsvqFo6yeyh\neQaCsBtOurkrVA3NE+TP2eGWlsOcKbBXMcgZiXVu34prMhSOHUxYKUucTtBP\nwA7e2nWZR6iMLmYlW6R+tRLKNWh5ui4dwsk8WIeQHCa/RCW7whw/jBfFIvxb\n24JZDfVxA9PbuIsqPhqtGtcL+PRckVoiGvUPepiQdFo8JcWboK9qVKqa2Cq+\nSNzQxeMWyMaH3Kgi3frF4WFaJaGI0vfeXhAnyMMz8tsD5eEc/EmxEr2CXgb+\nusJvxmeBE15OmmFfK/1xWYikKlo7ttsOZV3/oQSF+jTjIaDRDUQVN6UYbQec\n3F2xl+PmmSCvHguF5+k/cvyS0sNO2JQS3iy/7G6q3aoWObPPiZRYS9gIO8NW\nNy9YlCqJ2Gw+9uxWI+ZuID185x3pCureW/xSjnH3UdNv48/iE2G+cPxzHnO0\nKCi52YzwGUSNagbVxd1AOSoDpDVyyt86eVRZYI3e9dVjNTsCyS3qUQnILCSz\nl+c7AvMJ3M7IwbP8qPHy9lTGjnnGHsCY4UqpdmapjmN3jlYyNPoPOGoHqNMB\nxzco\r\n=5Yjx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"aef50df6c5f49244a2b0e5a941794f4e3e4fd21c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/rtl":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/shape":"12.0.0-canary.06930c96b.0","@material/theme":"12.0.0-canary.06930c96b.0","@material/button":"12.0.0-canary.06930c96b.0","@material/ripple":"12.0.0-canary.06930c96b.0","@material/typography":"12.0.0-canary.06930c96b.0","@material/feature-targeting":"12.0.0-canary.06930c96b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.06930c96b.0_1620258027503_0.5314364581120727","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/banner","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.03f525f9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"095f9f2975440338ecedf68e190efa212855629b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.03f525f9f.0.tgz","fileCount":41,"integrity":"sha512-3RgOEk8W88ohyAmIm9Ltu4VA7Wb5h2fiVodlBX2qqMkPakKTmp5j5ntng1Rk2NCwo12egafLnx/l8n6menFxGg==","signatures":[{"sig":"MEYCIQDuVQ47liwgr+ADGoNEc4kCbo/tARICPPCy+YmPbIml2AIhAPE1ztzCd7ezFQEJ3qqH2+BchVRHBc09/bPLuG4pb80m","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzjbCRA9TVsSAnZWagAAh4AQAJQIjnZbfFNSGb8J23Ls\nM3l3+nDcei3W8Avsoktkd68TfAx2mP/Uy9VzvAnp2dY6NJD+GkYJmggZaXeN\nEcWKBEITOB6bjJ11xqCdlaO/u+xn6B80kGUG5SHNN49/jvaQluuYt2li4At5\nImRokarYk2QiPJUmf8xnYQb3uj/iOnxoKMJTgi84Al2lJr0f0QDBgR7GcWM8\nH36ncqiEbxRYnShgzMSyjAIiSb/Au+DheailER6wE0Cmx0XDI659IUuL6DFC\nqfelHW8q2XzqQC18ch5bGnlGwwJ743y/CtiJZIIyFFr9Lwbz5UowvvCEAE2J\nHVm1nQtBOxr4+pdiAI3Tby0c9F2EzUwBOZDxbeYF8d4QDTRZndP4gyME748j\nSTlKoZnXsOF/yga7HfDbWX2Tb6cWeU3LMsewIg7AulobXNcjEdYRFGeRX2HI\n3dmmpzDQK+mzoBlmWr4ed5EwAE/hLrY9XknjtZp6F6pyGJO1xMxfxpYYBT6g\nu8lvQOP2Cy9Nwtf3FQzqStSpW8gscUMAXbfaxu/bKyh2lteGwjPONVwn/+up\nXFk89LIxCyhI0SiQr3Zhm+oVvLznsf5492CD1zBQykwAAxpQUdoTtFrvr/Uk\na8XLD1Q/sxq7BxFIgpBXv0ZEiMeCvj/rHGAe+xvnJeLKhK1gbvC8oOmARDN/\nH+i3\r\n=qrjL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f9df1400e21c75e46fe6641abb76d5840dede67e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/rtl":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/shape":"12.0.0-canary.03f525f9f.0","@material/theme":"12.0.0-canary.03f525f9f.0","@material/button":"12.0.0-canary.03f525f9f.0","@material/ripple":"12.0.0-canary.03f525f9f.0","@material/typography":"12.0.0-canary.03f525f9f.0","@material/feature-targeting":"12.0.0-canary.03f525f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.03f525f9f.0_1620261082573_0.5854500939544889","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/banner","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.e82ba2a26.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c84c66bf89b95d3bea2d9a33bf7c897998df2e8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.e82ba2a26.0.tgz","fileCount":41,"integrity":"sha512-rRHX8MYaLIQmhv2GMxlef509tjMypR8kBwREjOA7cSFMDIfoT0CNE1QcSmpwfn2aSjEKtcFqhYVqI2Z9NdiCvA==","signatures":[{"sig":"MEUCIAnhpBCsr9KjT5js/PPGihgsGceehgic863R8iKN3gJ1AiEA1lNclLQ0mMo81yN8nP2WgWUdzWiyYFfuXo1bnQaY8H0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBICCRA9TVsSAnZWagAAD+8P/18aE9oFnTkqvDfcp6Y7\nuCcxjcHjGfO0mtmBs6b/kjZkECT8BSdI6Px2XjWRuoUk5ggl9okeRBg429KZ\ngQD098uB5iOL6FcmSg11xWopQuEexRNfsQP71sFzPNwQdo1yLeySrMjSHsmH\nuYhCZGnTVVOpImUUzjUOPgfNp5y76o5DGfvnioio6Fe8+YREfygvZl7MEUHN\n48QHPfrVRgaFB/mrJy7rIIt59MFyht71uF8XBA9IkvP6hgEOizi69q+HNebj\nQA5OywmbB2pf/+6Qt5EuLtkmT1DLbbNO9xKFU6aE6nubNov7PfATg5b9sCrA\nP13V9tv1wtG/MSjtH6CrqgRxV64wIq6Uk4kFG1z532lhyVmY/UB1byU5gyT5\nKj3SyWD4DvyoOT4imJZpJLly3TuDMftcbE8aAVJqc4Kr2EZLX3Xz79wMfmL1\nGeDhN6kGVlzegP3IR4GvGEyQpG6qEtj4p4FW0zFYClXURCBLCxVEB+Isd1z1\nXqyyYzs1fthVpgkB3GBFIOcehFOmgXHByqyVMcU+V1Xu1u6hZFWS6GGnpJDz\n0KyW70pu/5fzuArOxPWVYvLOXDxv8PaOTbUF4LtVOmNlSfEOqzzIx4oRmCrx\ntK6aqsu885J4IR7/kK9xtfdxDw5846O1IFXCCEfLaDzn/lioqYtK5F5wegrn\nPUqI\r\n=6l87\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c3349c46dc5415cbb89b8260a8db012f44f09eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/rtl":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/shape":"12.0.0-canary.e82ba2a26.0","@material/theme":"12.0.0-canary.e82ba2a26.0","@material/button":"12.0.0-canary.e82ba2a26.0","@material/ripple":"12.0.0-canary.e82ba2a26.0","@material/typography":"12.0.0-canary.e82ba2a26.0","@material/feature-targeting":"12.0.0-canary.e82ba2a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.e82ba2a26.0_1620316674063_0.26034604397843153","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/banner","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.fc7c4e5ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03110af60309cdfd181f1abc595da55d37ed0f64","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":41,"integrity":"sha512-hBfZwYY896FzNuDMYbfl1rlZug/Ywr5itT+JI9sSGXSPwgt2x63Ux+jMNNRwuQBOXKU8iKOZylyf1ER3WLeb2A==","signatures":[{"sig":"MEUCIDufUnkuJ0dOxUOMavEinFE9J7Vk9TWePcSjRnDZltDKAiEAk8sAU8cNAfHDcIRZj7P0mUiYSWs4NCjfuFVCqlIq1s0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":482470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCfBCRA9TVsSAnZWagAAWHEQAIusRmXLXsBcBq+e6VtX\n/g+kRWccVq39U4VUmRyPm0dI39uRo2XKxckTutm/GnxaR5BykMYKH24OGyDu\n6urcJyFubG54I/Ysj5oWeGLt+RvKaPpZp/LvRkVcf9vd5IFJ8/OTJW/XS2bX\npaf6iAloLt/XXJIEeZmsBZ4Hf0uB1k1ksHqY5niU72FkJmaSNHAbWHMw4X3v\nZdGX3dGkmiVHFL0aIE1dFEXRGgCQv2z5Y/qIjzTCJUF9y8QX1rRJgVsn2jJF\nShOQUj5FFAJRHAGnjnQ15EJbhZRuYVa+rTU4dihQKGHFiog0i3kBqDSJwTUG\npc2fqgjL+ONBjIH4A9cWuDJbur5aLpGpaCBA4JPQKtmQq+JmYTnEhMnzGFtW\ngaikZZDfVDT0H7XXv/ipX6Rq/s2LQdDQfddXDjyuEwKvDFPOahMOfh+74nP8\nMgPNI6k42TLVoOKRLRzLW5itqhaUnLXy4Bo3qPFjxNI/8iAipIsXtyziEsEr\nI+jqTZ4q+7/FfbfJUZxgu+uOXbd0Mw3XOjHWNFYDJM0UjPIbboLN3t7xfDd1\n9y+xL6aYkAWYlFp8HPGU38l920rQNBNzq9c6X0MPPeklQvHwMK9tOXnvzztH\nWt2baYRV1nojV1MH9gwT+uVPAmHcxXAaG33zFcpHexEg8bj0vXAOmq2WWKjO\n/Nwu\r\n=wxq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b549929c65e0a33cd9d427a600513c663c2dae28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/rtl":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/shape":"12.0.0-canary.fc7c4e5ce.0","@material/theme":"12.0.0-canary.fc7c4e5ce.0","@material/button":"12.0.0-canary.fc7c4e5ce.0","@material/ripple":"12.0.0-canary.fc7c4e5ce.0","@material/typography":"12.0.0-canary.fc7c4e5ce.0","@material/feature-targeting":"12.0.0-canary.fc7c4e5ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.fc7c4e5ce.0_1620322240868_0.0060002618358172555","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/banner","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.65c04514d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"627e8c14c7e5c68d916f2920eef26fe1f36b9ae5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.65c04514d.0.tgz","fileCount":41,"integrity":"sha512-tvYzH9SxD4DdHS4gZ/Emd0AD/zQpNO0f0OHZlXdYaHEObsBi6SIGvz+WhpvGyfV+gMX2tHaAgKgk3Nw9w3kUOQ==","signatures":[{"sig":"MEYCIQDymW4f0QyGmrBX8tZSOAuCWhqQWY67f39a3iTgKHgcPAIhAMVBsbn6wQaIVFJRaPyO0FST5H5Sm9fi4jZaX2ayJ5Jm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDk4CRA9TVsSAnZWagAAe1cP/RhjBRLXCg1E3h8VptJb\nMTonJCvbRcmfDqPuZQL71WF2hQGe5g347aDlmNY1WbciFcJoo/jvy9lo/EEV\n+Ke+MTrGhVt2sV9QRUpiW7IVU3pY4h2QPWzTV7cTTrg/kA6dZSa+E0TIm0sE\nyb+2TZcyMusxNUHUM8EzaW/qO1iX9SDvpEV2bCBsnJbKdzViL8Asd1YZVw+M\ngqGH+PGk8uVtmQaWMiNEpAyRqk3ubfpvyNm9Fi7tWsrT6HxOO4YIh5lOPeLc\n10neepKRcnoUOK/H0/rvpc6PKDY9Cv6I7/bPeG9+PnmaHQznaUFQq97mLE2Z\nQcNfjpJVEwMR80Yw2vPkd6OlPWWwuzpG3XOJVx82mR194Rz3kTGfwrwaXg7L\nNUW6wclUwGEAUBO2RXWcbEIBlp0MJYRJIFMRuR4KBMws73usOyk6OfjR/gWs\n/XkKZKSYWXs8dhr59TSujW+aej8V69Eiixt5goUy5/gV3movh7FNgBUKd/sK\n3Flptq8CrCloqWgQSOeSZ+Rqej1jFU0OyhLLQY3UuByk55Bz8yDNcObntK86\nE1Afke2h1RKgkX1s6QDTNoDcWGrLkwtSuUShQ2c175aC5EXwLXsRKn3sNVSr\nybcNrOIQrb+PQNa+lhs8GEYQL1+u79gZJMEOHc//6QS8ZooOrY7NUQgh61cs\nvvrT\r\n=vg/e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"01ca5daeb81d99750f9020fc62e04bc76085858c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/rtl":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/shape":"12.0.0-canary.65c04514d.0","@material/theme":"12.0.0-canary.65c04514d.0","@material/button":"12.0.0-canary.65c04514d.0","@material/ripple":"12.0.0-canary.65c04514d.0","@material/typography":"12.0.0-canary.65c04514d.0","@material/feature-targeting":"12.0.0-canary.65c04514d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.65c04514d.0_1620326712204_0.0035150992071197873","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/banner","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.c97779ca6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad207d2db91f62d0fb22efbe7e2da97a2d464afe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.c97779ca6.0.tgz","fileCount":41,"integrity":"sha512-QUwBbXewE6i6BcP4caJBl/IJ1r9hzBYA0+/DqN0IKddkk3feMiVyR0NrvpbUT7cWAYh/c19TyqVExQCWtKsWmQ==","signatures":[{"sig":"MEYCIQCam9V08BhgAJYqWAZ6GnHmBRAtAoQ/OSnJ8LNxoHDjlAIhAMVYXyUtMSGusPO7mKSHNifHDWY1ZP/MFYvPTilj5b2J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGM/CRA9TVsSAnZWagAAskYP/16xutrfDxidKJlDqHR4\nC+j6Hpek8DWuf2HGlXgs8IZbgGRCtxZ0e7g6/bpOtKcSSDLgvm/gFGAFmcb1\nQRDFIeDt7Skqb5G9FZ3jU4tVPNI+I+iLUSAGfyvbmnn0hioRNx0C5bLgMG8N\na7b9zAHSB5mrhEZYXDmp0MvcZYusuDMxpxgAo5w8bOILAi1MHo+RgRY2JlnG\ntaG5+VPoGx4IT6akyYwvaYYaGBkVA5RUmeyeeOcgnSdVR6/QcjFlwXl8Q3qP\nd+1uS/tDTCvi34BDrHpl7I+Ors0dYQ2CpW34dl8ddwwBgkaNn9JnNFI7cmyx\nufjoGCKVT6GC9G6Cpt7b6loWiyL9KKWY/9FV3C7hOmIHbM+od3ZUZtFTwPWV\n8oWGM9yLkLD4nKvcizTO7sRffo8lTMSbHWE2nrQWRnRZmTzEomPD8XqkmqVb\nZE4eucVQ3d0Cpx+K7atmUgmZcDMntBk5Z76lNer3wJoiAoejKaYn/tycuUX9\nx5pM7WxgeNDDxrTBaeSXhySGLHR+XdptYFls9jbCFMWEnsK37cZm4jAmbJxp\nQ2F7d/sc/awnHiBeP5BZ4lY+5DUbxOmSw5KeZw21lylIrtQ59WI5WgadyXry\n7WIrsXAe1G7kZKbDuomDr0jEe8W5J4YEaIxQRXHM+rqzj4BjEuP23u2I9cJH\nIei6\r\n=Ca7i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"046f80118629481ec1af7c937a84ce6e0fd1f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/rtl":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/shape":"12.0.0-canary.c97779ca6.0","@material/theme":"12.0.0-canary.c97779ca6.0","@material/button":"12.0.0-canary.c97779ca6.0","@material/ripple":"12.0.0-canary.c97779ca6.0","@material/typography":"12.0.0-canary.c97779ca6.0","@material/feature-targeting":"12.0.0-canary.c97779ca6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.c97779ca6.0_1620337470790_0.4253748201271357","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/banner","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.869d890d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05994b5c3904afc63005a9025916204d19fcf158","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.869d890d4.0.tgz","fileCount":41,"integrity":"sha512-Xps92fYbK0hz1uz/lp4ElGu9DdJ8H9KDnIF2HZIXciwERpWtGCPD10E9habSMobUVuPjkTpT+TX5MgVuqp33iQ==","signatures":[{"sig":"MEYCIQCrW9mrZdc/h1M7GNRhDA2JZj0I4bKumhGMXWcRdLoMowIhAO2yZFFJEmEpklWqOAia5yZg7YvVWAilvFBAKFxa6mX3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVqlCRA9TVsSAnZWagAAnpYP/0h6nt9ymf3IJs8BpHP8\ncegw+Ud1SfXhQWZQCogNc7Khj7DcVYYTNtRIxdRk5swe2vJNAEoQKDR/+14X\nBs6xT5TPgo9/FLvR0LGokXyuYqT7Q5Lmt6yrB6Znf4sb3hwaSPBbFcrO8cA3\np6POqLIaCHnxX6MRnkvjdYNFYvdq51snRPyHyoB7eDUTm8ZzprN0uqqaCinR\nS6LQpCdNQMfadEfOvHg5ofShwvCE6j4gnT0XEJUioX/GDflmtYYTh7+FIJDX\nhTXuFj+pWuoPV8PQb8P4I9ryoHay0jTvlTKE8HfkjHxQi/2icdgllMViObnU\nSAir3uPi3cH8QW1MRc9pbFwv2C2oyTyVTcL4hlXY1Ct/xdCraIBFUFIOQ/cH\n0ZX+SfcBsyhcA6ksntJCZST7FNNtqs1FllWxwHVPfxpGjo76O1FCtHrm1dzT\n9kTfKnEAoryUILl7+lYoE3uaaeyCK26P2ZTrD2uQyyL7Bs9hS0BoxNKx1jBK\n+SAmcTQJZ6Um1wKSPzOChvvSOu/hwD+IeXowkRy3P+eD1gElQEqalgv7fHfg\nGzQWCjbfiazaPEY1La6okNySnwYYWz0fk9IwCiXpNXWNQlHGdFoyCyPbua5V\n4/qJcj9foAepJom6IA+ejvy1Su7RUAx/7I/3pZbm3VNTRL6ewLD+tCNusdS6\nRGM2\r\n=fQq4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cd73688a61b81573744ba9a03cd2952798eb68f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/rtl":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/shape":"12.0.0-canary.869d890d4.0","@material/theme":"12.0.0-canary.869d890d4.0","@material/button":"12.0.0-canary.869d890d4.0","@material/ripple":"12.0.0-canary.869d890d4.0","@material/typography":"12.0.0-canary.869d890d4.0","@material/feature-targeting":"12.0.0-canary.869d890d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.869d890d4.0_1620400805289_0.7196538065739913","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/banner","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ec22e1da9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0460ff39ef9b561a66b9e32657aec1291c59f743","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ec22e1da9.0.tgz","fileCount":41,"integrity":"sha512-3wF8SpdnhHSJKWVEtvpRntueTYyDSGfK8isl34WjAuqGWpjGDzwYxq4RquXydIBsx9DPEiqwOeqaN5WbSgmkag==","signatures":[{"sig":"MEUCIEx+5gh9MEYd+dSGmReFeCqegzeryoLdJGnKjiy9xoQmAiEA3lb1YCdmrjjlnG78D/WOHPIc1iuAKBGr8xY0gMS+rYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXpsCRA9TVsSAnZWagAAt7sP/R83JZR4RIny32taMj7w\njakBFq4Qa5VTL7cV/Juo6ZndTIBrz+G07I98eXikBcGLiRmn57ZhcYGJwiRf\nRUYBeeg6FsnsCt2NzWIx9RwDNqN898yRYLpNwewk+USN6d1KJOh1gnIP1GOt\n12uNjMujf0JWvb4N7Mzsu1o6b7nhtzSylPTl7YGjWYakcrUzCYdrfRN3Yls+\nBHSqiJYVtYBR+bsm62QK1vkKA76ZwyOuXOxzt64B0bZtW3VI57Le15ElxCeV\n8rhnpWsBmIWVzvweixfIeYI7Uz6p7GOGXCAQzymz+wGzPkx+mZ0/wB/KKQRQ\nMo3Ym2sCusCcfWtYd48/dnhHZXlThpFX8/aZkE8Ya8DdQswJeKHTKZvbIbh4\nPbMb401RWXc/pPuYV/WFnEDqwRStEKX/t0KHIsrhLL4eRBaQ+ETvvtwc3cq2\ngR8WuEbjreFQEQ+mpWx9CL2D7TiSPG3MrdS9AwrwyuvkhUbJDUJ0RTQwaHPe\nMimgZugRwMdENZZJHNaG3qf6Gyggkzf3fL88Nowr0aqcWi6q6qCg1B+ZPapQ\n6Sr+GF3ijJEN1dWgxuRbJcySsWRQQVQ/bvnX8eigfuBZkvm6HqoAY79y95XB\nMIVoDprQQduN5AtEoYj4Z4v593ywU2I/t5Hq7tvpjWVP9sxYU/iKzLAImRx3\nSgdO\r\n=P+Ex\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"273a15f546b8d5df597771686f431c3726397778","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/rtl":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/shape":"12.0.0-canary.ec22e1da9.0","@material/theme":"12.0.0-canary.ec22e1da9.0","@material/button":"12.0.0-canary.ec22e1da9.0","@material/ripple":"12.0.0-canary.ec22e1da9.0","@material/typography":"12.0.0-canary.ec22e1da9.0","@material/feature-targeting":"12.0.0-canary.ec22e1da9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ec22e1da9.0_1620671083580_0.5801969406245395","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/banner","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-nightly.7427449f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1172ac1bcecebf0ed8e8d55e1d9b2f469d6a8141","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-nightly.7427449f0.0.tgz","fileCount":41,"integrity":"sha512-jHmqjqc/P9XofKLBxABwsh1CX+fuhEs3qGSOLimgNO30NEgoytyfWqYymAIgnIYOqerYLne21rhL1z8z3tmfpA==","signatures":[{"sig":"MEUCIG9cgXUGJgCXAR+HYD9frUG7k9hbi8LoH5v+lClmVC4wAiEAgHqq9Rm4t4YbUDhfZpBuDzAvgFHjYAAqZx45sAW6yBM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483218,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX8+CRA9TVsSAnZWagAAMwUP/3S6q6bPBz7IkQeGlKoX\ni+qymrs4+Zy4OCmVo8b0flKXpAs07wikBzqz7Wr8cl/jFyLk61/pp9vLeRiA\neiBNvxvyee0fzqFpfGJUyMorPXqW/k+2SpBuzmdTsET/kbHhEmRbatynfLjd\nbMHqOmBFPfXuVVhb+KahrnTgIlDmrgMJ11cC1tzRC/WU6dlTl4cOAW2wmhgr\nKgAaDgE/zBvkh0/ipIommOktaID3EuYJHKLadRqyWzaXtzaJ++LCeaCr5Yii\ncK1e7VHPchvpN6pMEJnyG7ZfXKYY3XeruqwGMZg6DtdIw9sGKTe8dOyFclpE\nXOE9MMsLZA61Z6tlF4SVLPYfKQEIEhLk4blOx21JVjrRb2IXRxEXOY7hHTSb\ntnnao0hs2fnmao6piJ34qNBJc2ZzwW3KrcV5Ut3ah6NVTCuw5GzjdJ4m3AAF\nZzQgIPNKzZ2QBIzwO07WDJeLK1i+C0Y/VuZRuFh9Xc8QKDo7p4x5sF0ICclt\nZGV3nntwQ1ZgIhfALe4LQbP36lzxn8hs9ska3PnJsRhy73QbAgOsJBFDQeON\nl5gqzE+awVGVt0mjApb2Gxh/h6BUq+Xeznhz/H74Vi8N4UWyALkCIsECJpz5\nzK7+Rw/8v3u5EQrHLQ74U8/Or/7rl4LIlUPhhD0KWYBBLkVf87uOoAMmpE89\n60+D\r\n=4+E4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7427449f09e9521a6deba6ba7da71038c2fc1f05","_npmUser":{"name":"asyncliz","email":"asyncliz@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/rtl":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/shape":"12.0.0-nightly.7427449f0.0","@material/theme":"12.0.0-nightly.7427449f0.0","@material/button":"12.0.0-nightly.7427449f0.0","@material/ripple":"12.0.0-nightly.7427449f0.0","@material/typography":"12.0.0-nightly.7427449f0.0","@material/feature-targeting":"12.0.0-nightly.7427449f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-nightly.7427449f0.0_1620672317959_0.3863128731706287","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/banner","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.957cc3bf5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d358c16cd42080b8bbd6220f4370e7b4eddd219","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.957cc3bf5.0.tgz","fileCount":41,"integrity":"sha512-U5ELpI15rityEiiXyJ6L7LMzSQCpwKoMHGNA913sR0GTA/JQB0AErmhn137ckhrfwnW8Bsl88t4jmwCXo8Y35w==","signatures":[{"sig":"MEYCIQDPz8TiZY5iYj9vofZBQV1iwbuR+gDQuUb5wfrXxok+2gIhAIM7JYPwK4rjGIlNYITsZc79g1D6SoyrWUaCbRZIYcqN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxqCRA9TVsSAnZWagAAqw8P/10f8QN9vz9Jd9nH7B2L\n26pT/G7YGGqJhNLRK3g0ERVpYpcO/Tt8dU1XFprvDiqe1G+Ng3x4z2OW4W6B\nfPD8b6Mik8ADStmydFVDwRl/jZk4+KorgWCbddSAMs4x1E5ppS6QSZ1EN1sx\n6GVqxKNdnKat6VhV2WUPeylVT3oxzxXirZ+yBisU33QlnNSTIoKGtlZqs77R\ntHAqVGljadAKS+u6c+Krocpi6fjZ7VjK9AXxWOWUwxWqz6XDmb6bwKBs6UO8\nKVf7Gx11e/lYyqXp1vparMeqLxAyg+igK1jwRi6HxO9hPA4BLD1tTGbg51fb\nJWitdTBHJlcaGeBY0ukhVDBOjufwuPTkUgSt4MnBeoekHS6uZKitz6gzsHIH\nkAKtR2ax6qSlHhzHVq4ELa1CiPm1iNeYQVC+IihnW/UuPfGibfLXkhcmAKvy\nlvc2urmk06UQYRL0bHavnFWsA5ZmLagcf/bIi1iaNpbqPZJT7igRQnx/fwMm\noKvS0QiQLf68HZAXoY2pXNMu5R0rVjAJCn5SK4csciFpZkaBNM3n/acRFJDJ\nqg0y1AvEBa2tBLnJXrcLyR/2g2EyoT2A7gNfrq7dWGBu16sb8WQ/p47kYiu9\nLbnTkeAtck7Qt39ewcOJeyvVDNbtaqxauunwgUegJLZrLvO6j71aYdquBpLU\nQcaq\r\n=Qcq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3c29cfc65a597598e2a8e1841ef1af72450500dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/rtl":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/shape":"12.0.0-canary.957cc3bf5.0","@material/theme":"12.0.0-canary.957cc3bf5.0","@material/button":"12.0.0-canary.957cc3bf5.0","@material/ripple":"12.0.0-canary.957cc3bf5.0","@material/typography":"12.0.0-canary.957cc3bf5.0","@material/feature-targeting":"12.0.0-canary.957cc3bf5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.957cc3bf5.0_1620683882518_0.8866463951215855","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/banner","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.88a33cd70.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e6a38a41d1d3b00400d8bf8fb42daceb242c507","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.88a33cd70.0.tgz","fileCount":41,"integrity":"sha512-HMEcOUywP9Exj6z/yJiEmAwnwoWq1GtgVdytJ5rWxLLERYkyTbHBbVidMHmGom3T70L8ihYAVZLMyhTrbtPcAA==","signatures":[{"sig":"MEUCIQDUYM6Kn33BQa+72d9VR51N675vtbWvhIBQtyg6Ib8GMgIgDibGJgmmebNoIgPWiEG2lNZBL5P+bcjgGRG7qHH77nY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcthCRA9TVsSAnZWagAAIqcP/iR7Fvx/91Ehw0WM8fkp\ns1ojbbVdb3dYO/Wl+CN68v4JxtCKwwnhCWj8jMguf5No535vSAc7Zhl0EkQv\ncwnHyNYOZpdBn8Nq4wmLqPgd+pXoMnFe+LhQy/usMICtJWV5MHMshP0fCeUc\nC9UETkf2xfzPK7VWEELBAHNhiJKpepzFOomZJDsI+Y4bYiHsqHXmWFkEh9k8\ntnSqs7LcskkD8Bn6oLCE81T/8pB54BRrOhNCMKsatAObHFhZYRWOs+E5dhOi\nhbYOXj2j3nYMd0309bPSuiz1D78IL1Xsmaq6FSu4JcQJ/B0zVtgIAJyaoROW\n3UBww4D3kXlLTN4da/Gh4L5i62LO6RZeFe/3bYOgBPzv0HjFaGPcTH3VjSCF\nMrHdvHIYjCiIfmBXa6ar5rMJUSqRLQnym4cocJpz+MA+vOxyuDCyvB7Z88lE\nj7c0NNDzpcvH49U7xjvAjD7eAWKP+FatunWYmMWB7TzVsdB2RYPrY7mIgFER\nvTmLcg9IuGRgLPsuBDLoJ6/zQJYbRQp9ON64QeywvZH0p9aighxCbZgg9Zzi\nyvBIIICJXsajHJcSdzdHsFEsjIqbF3e2UEzZfFgmdcaVjA8wJwUE16wd9rUa\nUxu1ofiIOmc2A+l2kfvgFlS2NIQ13h7CSLi056gOhykuiOwNSh5EmW70t106\n9kMc\r\n=KKN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f1d341efc173e89bd2770326eaeb1fbc581c9648","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/rtl":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/shape":"12.0.0-canary.88a33cd70.0","@material/theme":"12.0.0-canary.88a33cd70.0","@material/button":"12.0.0-canary.88a33cd70.0","@material/ripple":"12.0.0-canary.88a33cd70.0","@material/typography":"12.0.0-canary.88a33cd70.0","@material/feature-targeting":"12.0.0-canary.88a33cd70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.88a33cd70.0_1620691808608_0.655383383012889","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/banner","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d20dc6dba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ce72fb703387966fccf7fb265a5a216ed158c84","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d20dc6dba.0.tgz","fileCount":41,"integrity":"sha512-lJDYfCcF5+CKv1uQgtojGsGokR2QLnlSmNmEwOw9PC1rrrsE3gMVT7YqBUhF+idJTgMDF+GEU14C+wVvXdkpOA==","signatures":[{"sig":"MEUCIQD6gQLhIlmI36cBIF0PkxSYi53KH6KRBLfWqOdVRqpGVQIgBSglXoBjT2VggepZFUkrmloZPYrPSh/D7dFjBjk65FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc8cCRA9TVsSAnZWagAAKhYP/1hpYdCyhV7XE41gbwTT\n+7tpVlbXN3vXFvyBIJeI9aSTcYPFFjQmedAjgGP9ugUbPO/3uY89BCXSELpK\nbt8ZSMX9n1lFrCutvQodEzG22jJLccFVt78EJx4Z/O4GQvsTH7KN042oc6VP\n6ATlbhNrzW3bj8ouTND3P5kFsmMxG4j69594HSwCKjfGx2K97PUW1n4SlRRY\n7K9wnaCTbT3DjlzNkGTJjTQQDYcFBDkqiquaSZdaTen1Hbq7MBvqn/HbBzuw\n7rNb69AdbcRTv63b7EsEj7nD8vIfVXU7L4ceUwP3sPqn2ugRJ64n9BIco+IJ\nLoVupNiWXzbcHiLgG4Na6cmWMHA6MxvEWO3BPdOn8rFrRKx8BeWT4vEXOR3n\nSShtP3FKb6NAlFjeObgbMZ3W+7rSxR6oa5wg2VH4QsA6w449D5iJXkIUrcqz\ngz8G/JK6Eed9GZlvmkSwLWAaXOk2eMWmcc3m58wpV1W1MYn08BLNsLLeKTXH\nubpnp+Sm/dDftJg3Yqa9ddUiO+k0sB4jW0/YFa0a9x5dA0LkHmuNsgVylwDj\n6IDufgnk6ge/v/Cfdt0A38O578LlGvhDLP6s+2tLfjdhg+FVz9Lx2Cm1PHyA\ngXbo7mK1mNQMheBNEm1Rotiqfd6+yEtLqtP6xsweICjnpHK86PK78yn9AzYF\nEIbj\r\n=ogUV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f2980d3f7fbbd8d2e3b824a765f7fb03096bf11a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/rtl":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/shape":"12.0.0-canary.d20dc6dba.0","@material/theme":"12.0.0-canary.d20dc6dba.0","@material/button":"12.0.0-canary.d20dc6dba.0","@material/ripple":"12.0.0-canary.d20dc6dba.0","@material/typography":"12.0.0-canary.d20dc6dba.0","@material/feature-targeting":"12.0.0-canary.d20dc6dba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d20dc6dba.0_1620692764380_0.37526528390051617","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/banner","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.0ce2fdb02.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5dd8f8ffbd06e888e1f1bbb638d445eda2afe5b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":41,"integrity":"sha512-ltCEqCKgap/gg7tA2COWJtDtEb/l12SJxUqZW+W0dshc2jNLMDYTWZHt4p7Medv6Puy6BeKT91oNC8arK3BzUQ==","signatures":[{"sig":"MEUCIQDJCtwOHwObKoF9HUQZBSY5wLBW7Qe1Kutzb4+EMGl2mgIgedlPanJk+hYuK4rOuzRR2vRGJ+KV4Ua2EJWtcC12lyM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdcLCRA9TVsSAnZWagAAmcsP/3ZG4soglV0/zNBxx/ay\n7V6z4S+ly9qQiQRJgYhoaPntUuyFKnLp1rlDG+lOaCH0FUhHB6os3pVOZ1Rq\nb+hMfCupEoNLu1LLZTGsd3Vrb4ySNyEnZ8rKa91iAabZQCgLRXQeJKgjJ1VG\nlkyCGdhWXA3Y0+6wY8BqGd6X1QJxWKoFJhyksWnWal/UnB5MuQsJucarIecG\nxb3KncKrzhmdr0xUcJKk3zymk+4JNBZXf62mlGpNLUkyOZIQyyPbB7sp0+vf\ngo64HpbTKXqyoCY6aMdlC13kviXSf2xLIgBVAjFX6gBUvaJ819adJrQQTNiR\nahniT/pljcXPMZMp9sQBgQWLMNuXGG6KEKxDyyOEBqUn/L07H39npC4y0wNe\n+VLHLkXhN/X4eue8CJBFQsmu9+btJvnW3/59LuJt3T2wwKSbbbjR16Q++x8H\n0QFcs/lr8tzixOQJBfp9P2GhmHnIV0VAswA6rTJXVIF+wSQYqv/lqbgGL4rS\ne9BQhpKDvhY5QdmeubtaeHENiUZv+yDOQ0Ul4CaNkRz9yPudcSmLLzCTZ7Mw\nIv6su0h33l5ul3u6ELAdajDNV0USnm619i1cLa8DhR+IXPoNOiL0UnTODF7q\nUlC2O7Z9StuRpOu7rrbWdiPwBaicZbgkpGx0lXbMs8o5PirFiImQhOMYi8VL\nPQ21\r\n=OYCV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ee2139d87a1d755a50dc6bf0a6dd53a2f39548f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/rtl":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/shape":"12.0.0-canary.0ce2fdb02.0","@material/theme":"12.0.0-canary.0ce2fdb02.0","@material/button":"12.0.0-canary.0ce2fdb02.0","@material/ripple":"12.0.0-canary.0ce2fdb02.0","@material/typography":"12.0.0-canary.0ce2fdb02.0","@material/feature-targeting":"12.0.0-canary.0ce2fdb02.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.0ce2fdb02.0_1620694795171_0.8783675362818222","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/banner","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.cb162da37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"242a367181e18ac3ff8f1cdd44f79ef840b5a716","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.cb162da37.0.tgz","fileCount":41,"integrity":"sha512-3btpLzoG2WJDb4CPAOIw9IXXua1JfpMusNAZBYhCk6YJ1kIA10MUTxC8u01KxLDR+yr3vX4KkGl4zeumQlIxhw==","signatures":[{"sig":"MEQCIBR0TGH9YOOXyOUn7AKzmREO5/bNyYgrj8jKYoKL1iRDAiAXCV+e7R6s7eyxa94fGUC57RYigBK2wqi4ulDciXL/Qg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeUaCRA9TVsSAnZWagAAYfQP/iOaL5iyn/Wys3lwrDPZ\nONBeNxEdw43bFauPg10OxwqyE0eggELzSPrPuERnc9DOsjVSIFKsn/4PjJfF\nJN/0tBXIQWSoZrqM0pi6n8+Fx0EfUxZAk+ZZetxuZmRq9+pFtuyZIpjsCkgh\ngrEjw2PTWoxfsooFlkfHY7TijPt7CCy1KXcgw9cfHZ8zXE+Ofw+H5/7Om5A1\nJ6YiWLr62lYrXUDljy0OBe0b8nnOAWvGPqVWC/Flejjq4xKUDZyOO6tYvNSi\n2MolLMrwsN0+OIMP8bVwOXAs7KZ8TO2pDauauxwFQIoJxUhBBsuN7fMhvGVX\n3WZQ7nAQ5OUS1m2gSWXnAz41BfXcflkFYcT6gKfzVvidNjXekpHqGUvCgHSr\nb+Cned196EHD8IftzEFObtiZCahF7bGVvkqQNWnI+i4YMagW4djhU5yFdoMz\njhBzoe5/B0tGLx1KRaGMqLpwFwFaVBEIVKc4ePqMI5ZSPMkcY6uMks5Lv1Vu\nAySVJXxRLTddREaVb4slPRzAE6fdr0m2p1rAGWk7nrfn47cMHo8d4TjeLj/6\nAB5CwVqIO6m2pH1UK5iXEw9ibOdpH18Z7BMyr1oIiaS4YlCbr9OqcVtozSrf\nB868idFALeXEpT4QU9898nU2eAQH5SvjRCwP0h0rdoxou5YNRPxiCfyu/fFz\nolG4\r\n=aT0e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9858adcc9ed7b1111dde19951ba96847bad0beac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/rtl":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/shape":"12.0.0-canary.cb162da37.0","@material/theme":"12.0.0-canary.cb162da37.0","@material/button":"12.0.0-canary.cb162da37.0","@material/ripple":"12.0.0-canary.cb162da37.0","@material/typography":"12.0.0-canary.cb162da37.0","@material/feature-targeting":"12.0.0-canary.cb162da37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.cb162da37.0_1620698394238_0.6964128330099915","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/banner","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.573dc7ffd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f67e935cc81fcd7e7e6f6825938827e3b7d09e2d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.573dc7ffd.0.tgz","fileCount":41,"integrity":"sha512-+zV2lIE/tlB03J21VWLxPgLCUxoefjri8HYO0XEJohSRqjMW9SkJZBxIl1vC/kMjVTwLR+TRQGyuiz5DJ35grA==","signatures":[{"sig":"MEUCIQDsko7VgbRJRkv6UgDJZHdXIbpBPCCvKBxBexNu3BS5HQIgU0pWXYmOePqd2p3scMmez0al98RSKMHncFtKZ5eFwuE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmemECRA9TVsSAnZWagAA7q8P+waUjYXyEvkj/jGPXGHi\n8v2B5T63toZnB5o3GU8uICOyFRmShEDAWUWFfrhi75oxOXoWsGF7S7dv4GfU\nvql89SEBFByRcpnYAMLdE59pSvU8jFdkMuLXXyupk6fD9c/AbsmcHpmNbsJJ\naknKQTtkxVW8t7DnRCPnvfvBFG3/SJaFeQVj42YqyF+u2NvIgnAfZIwoRPiT\nyOZXHMX0tCtf9ygjSvIZVBi8nKOMIVTxPCxGUcw2jmqdKrxxAINvfxZGPmPr\n3iLnARQ9L/XCnDqEmqT7fhxC8qfyhBq9xeyaa4YmfpzWcF0XqENCmTaoD92y\n0jzqsOujoW7tA7veao7udEGNqDhLLXz438ZqfadkWLuiCZJppZumVAT/+fa7\neT0wLZDAYesfhmFbDZEW4L/E2H94/z+7mZ8SFt5VuX8ajUrqDm9A3eZYwUPo\nmhdYC/vvwJLHQd3c2j0afHSGl0areBPs9MdqQLcdeOrkG5oNqcN9HxboYXhl\nYEY0LIi3hLeHVWIvp0sfo+c+qKmEkUCF4rA+uvExu60AaXMQBGVbYyWV1KK3\nfB+gOnIPK8P6Fb66uiQsL1WoAo8xIQ4MG4LubzL2z5r8QkcmJfcqfnjWGL7x\nu5BFMUJ4GS0r+cFcNQYzTWmfsJVyK+Qc5jSA3HEQ+E7FBZi6sv1zcOXygUBn\nsfv2\r\n=N8lU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"67aa299a5066425730ea2e8558f89c111a5ab156","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/rtl":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/shape":"12.0.0-canary.573dc7ffd.0","@material/theme":"12.0.0-canary.573dc7ffd.0","@material/button":"12.0.0-canary.573dc7ffd.0","@material/ripple":"12.0.0-canary.573dc7ffd.0","@material/typography":"12.0.0-canary.573dc7ffd.0","@material/feature-targeting":"12.0.0-canary.573dc7ffd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.573dc7ffd.0_1620699523903_0.2108649811400014","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/banner","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d5f6ad3fe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"638835e61348bb0aa0e64f2907916b01520790ab","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":41,"integrity":"sha512-l6rH//TzMmkR7TWFmOWRZH1JzCgI2GIA0tEP5tjLoTbLGRUWVuBRm7mirggYo0QcujDPbHJRWMKLAyjmaIVnjg==","signatures":[{"sig":"MEYCIQDl8xrkSB0IW6wXgo2cCi9+guol955I/yuqTj47jP0BGgIhAM8OEl8cobJ112W7TnPZFIIR3iSH7eUtrg0jNOde1Fu4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxIBCRA9TVsSAnZWagAAbgsP/2DQzyz1mpCPP6WMSCmr\nzuU0yLejukmsRK3hhQLz7RbfhwZQtu7eSFTgL00kDBugiBdpgODABZxGn0Ks\nsTmlV74yR/X8agUU8M/RVNh+wSQkmQaAKq2U2mTZ5xQudLwn5VF8WoMKgH5i\npezKpa9PojIQ0j5uxUVhM1XfNTSX/AY325HubwXgpZ/Qmch1vn8t9efjQCQi\nrRfg5XyuK5w+se2BzOI6UYq/3UbOrodiFKsgmoUPe1iUxYMjXD0LFTAA4BPz\nCfcGBgc4oOHnqKCpfg1rSxn0HxDFZmzpe7wMueMepGyYba3iq+kznCkg3Z4n\n3O6leC5micRv4yenMcWFVj4jNT9XavcZWd2oBq5dyrkp83MdEoPmo9kSJQ18\n0EyYiZyDk/M1nSkSB0qv9KST7MiCLR+hLJaGh0J5J0D8ZXHszqBjeuScKtss\n4pQTQavnRGomCtXT2FHBDopSCag8nZKinOI/pETo1U1oIOKRkaWbeynkEuBS\nTN0bH0qXVIBwed1QSm2Y4pgceHITcDcv+LDUaetXFeaD9OsH6sPA3nSJq3WI\nM7A6L0ruSfTHlv0qdh7SnfkibOv5o6BBsZVrPvIuHrbsVc7lKJpF2ZonF6gu\nJQ23UgRfD/en3Dp7UfLHHI4eG4l3xKM+XHDC8V3qaydT81QR0RnkkzCmPbi/\n+xJS\r\n=iVzT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c0bf85201107dc8a95576c2392f5b1771bb2c969","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/rtl":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/shape":"12.0.0-canary.d5f6ad3fe.0","@material/theme":"12.0.0-canary.d5f6ad3fe.0","@material/button":"12.0.0-canary.d5f6ad3fe.0","@material/ripple":"12.0.0-canary.d5f6ad3fe.0","@material/typography":"12.0.0-canary.d5f6ad3fe.0","@material/feature-targeting":"12.0.0-canary.d5f6ad3fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d5f6ad3fe.0_1620775425325_0.27469751515922547","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/banner","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.25751d2ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"665d16216c6b31fa0529d44d09220d8a667df82a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.25751d2ed.0.tgz","fileCount":41,"integrity":"sha512-SAWIp/i4qUUTzvXHljzL8QrnYEd3tH39pbaLApytdTMopLCT2FW669LpvbXAwWrMweuVbrBJPE77WcqN8eaCew==","signatures":[{"sig":"MEQCIBY1MknBAFPnVnSsInJNimVN9LWO7IBxjpMyRepaUJDuAiA5ynXxTKDPpea7uRb09FHKvMAU0OBPUFmQFr/cThfLvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAB7CRA9TVsSAnZWagAAAygP/AsPLYQOJbEivDdN55Iq\nZZ9+oRDViC4Z5VfCLMh5fvIwkEfY1zvxXHr5B9NsknBcJP6yHQ/YXMb/80Uk\ntNlQEXGTItBNsHVKaVu3oXQaWPBAMN6fTxF4TnNlyhrI/MYj5v5Keo+O3R/a\nlTwGgpqXC3hkBI/d/6E+qRiZQiDJKM11ZB93H1o9yHQffXYYqTrR7diHDsbO\nbAMDnpZDH5+oqbO3VME72wRBQp8lWB+BpmNS9yQq5TGz6BV0OqTn1G4HVumV\nbJa1F0voAaYhsTXLa+A5W/go/DuhTNXWYv9GuF1KI9Mp4H6HntiDT72ZKTHa\nLQXRmtlPbFxc/5lQMdsFHkxT4NPYEVjiVyPPCIOD5tyaj5XyIsJiOicDWUb0\naC9aZcEoDc60dth9ecJTv0bPjXGKeI3z0g+flsnz4+Xld5cnF84jy2qrf1dY\nS/hLvii692a7YVPlT50wRiImCvsx6EI0cZurt8D2C8lH3giCCcwZDFOIDHLc\nIxcE3hwRqrVPnTu4/pqDxCCSCIVqfai+CqgvRbhwHQvjEKnWo/3Ff9bQPZmB\nGY5LXBEWMPyKfDnStPmctnQw2swqCAWeE5z7lKpKQpUdOEJ4yFoGK86VK3JM\nvMA8AIobYCO8zyXF45L4X6tOJpXsCx01dGflM3Pf+tYfVYD9u71OlEOD0WyD\na/pc\r\n=Xfxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c38dadd226475a1dd91a992667019eefec273bbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/rtl":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/shape":"12.0.0-canary.25751d2ed.0","@material/theme":"12.0.0-canary.25751d2ed.0","@material/button":"12.0.0-canary.25751d2ed.0","@material/ripple":"12.0.0-canary.25751d2ed.0","@material/typography":"12.0.0-canary.25751d2ed.0","@material/feature-targeting":"12.0.0-canary.25751d2ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.25751d2ed.0_1620836475215_0.5827555236373347","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/banner","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.a23ecb682.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"123c26ced1dee1182c505ea364c5342e77a76f5f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.a23ecb682.0.tgz","fileCount":41,"integrity":"sha512-VFGvebb38Ju1VUxyrvJ68nS9Vxcd4fILrps2YGoFY82ztjy4G+qxtYLrMgsewvgSYB+e5iTe9t0uexui1xHP+w==","signatures":[{"sig":"MEYCIQDSWn9YLro4EX/7giq6/pqFRrvA/hA/hF0WBCQhOcWHUwIhAM//eBiOqaAPrqbnb72EIEWSDctS1pV+V8XHopobO93O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB1iCRA9TVsSAnZWagAAkQQP/3ENUUbHLl7irGYOSTeG\nw+lJxrdSmpsacJ/xH5zj50JbgfyrwSCZpU5DyGDbrh0E+H3lYZBalRb2hSQP\nuGiAnV3TCzI4Y5A54ivMoD4DQC8daXfgSkBAJsE58l4MQYhWltffPf2Xj91B\n/PrdxpdiMizJhaoYLfswSMRqgwe3y2OI2nYRkjzt6o7KZ8P89LQ0o2ZNlsb9\nM/m0jEgZl5rxBdGi17CrubdhYRR2N5+/NFBEwzzN92MYuTie5jXrfS0YyNhP\ndrFsoLAVXLYaaad5QjgfTyA+/MoEbLgca/k0LsqABmm3PuOee1uqH2gdtLYK\nIgoQLQpUS5/7HZ1T4Gz+YVLxN4EQm2iWkurTBTuArKVcACaDnmSRHAnzo3gc\nyihQkgXGu56P+Oygihpi8eRsfOP7QW6NUnCi5zwIKFo03EK+wcflOSdlEB6p\n0gVXmjCQ4cEjNydF7WMgVwnLTZlHi64AS2HAqob+LwZiQj5KdwGUQDd1ZUxR\nczaJ2a0r3vkxu1fu6NsmEkALkDOoV8ZJOGgzXlEO00zxlN1mKYUmqPtfM+8u\nJV6Ibrtv4Sqo3I4G9A1wraz/Gy9w61PdrgvCb/523kqEB9gcj5PkKZDda/R8\n8hYVDvku8OtuhoNf7jyTUT0oczMScfOrjG7w9XxELWYfTKiFhLunulr5jvFL\nXGSc\r\n=VAIb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"da78c3f024a21d0e0df18a30c887082b202d7269","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/rtl":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/shape":"12.0.0-canary.a23ecb682.0","@material/theme":"12.0.0-canary.a23ecb682.0","@material/button":"12.0.0-canary.a23ecb682.0","@material/ripple":"12.0.0-canary.a23ecb682.0","@material/typography":"12.0.0-canary.a23ecb682.0","@material/feature-targeting":"12.0.0-canary.a23ecb682.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.a23ecb682.0_1620843874330_0.83137982313368","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/banner","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.33a954852.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8ed0714ffda741d900f71288b76ff97c41b74ce0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.33a954852.0.tgz","fileCount":41,"integrity":"sha512-fS3qKjuDADKf63rbfgzQBZ7CIQYRKChbJVIiOoDdt5S1FOQU8Q7cO70Jv679O0Vp9LsJx1CRsDEuk5+447zW9w==","signatures":[{"sig":"MEUCIFcgfcEybKfYCF7qT5Zo0rS293Ye08wWvVhZMhjD0rnMAiEA++STm2j8g1ViQ+Y7oVJIesQy1yVyKWWd7QMNu6E7aD8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUEVCRA9TVsSAnZWagAA8IQQAIdGuKCc7CfQUNaTuPUc\nlvI1R67tpoGRpjFmPnRe8k6Xh1sCjDCtFKQAcP/0p1uJn0ZPEAHfZWL/4bfk\nvQ1t2XfuUZckC33/M5HVaFuT9mm7sNhEFjK/mY+jtxahAlMmw+A9ZGKVnyD2\nXzeansgBsbeJQupFeyYQaPn8rQk8H0W3463anC87suG7cl6lW952MFbZwgwf\nr2BBlqDEr0WlJ8EicuvkiQZRfsF56LPmLQPjBdsuUTjE+RVLmvhPMhAACAOq\nCOdECKyC0HnYtV9sM1nGsjy6UZemY224dIt9jatwRFYyqEkoAJt1aAvG3ByE\nKa3XKyGs1XSmN+f2qrG6WheScDjOmZgcLvQfuFmsTuvk3pthegOt6qtgrazo\nNMeGnT8TNlTt1NIkZD/3fFy7hrOMs4rlmS4EedB60Zhrp338xyiNklrUpgBw\nokkEMJB8LSaAPaAgCGVwYOG44QY3Kw+G1WS9KE94H1ncEHWRfSvpL2o89drJ\nPRQp+i7BAHC07sH80LbOjDIcutpdwRsLgAEcu4ioXe5x6wK7RnDc0M8mzrs0\nptSp4/6bQsa0oARk4b8Zz8cUkD1109l0zgPtXNcTwPU15BwX/axaUcOQD8+1\nsApfKyhPmTi0rwR52oS0cA4BEezh0yPVIPvcivAab8K7DF4CqTqCHQJ3Q95B\n5gXj\r\n=cbE2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"703dd5ba6a1225efec74655d3393690dca1922eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/rtl":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/shape":"12.0.0-canary.33a954852.0","@material/theme":"12.0.0-canary.33a954852.0","@material/button":"12.0.0-canary.33a954852.0","@material/ripple":"12.0.0-canary.33a954852.0","@material/typography":"12.0.0-canary.33a954852.0","@material/feature-targeting":"12.0.0-canary.33a954852.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.33a954852.0_1620918549065_0.40569626792173663","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/banner","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.a4484849b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"78ed91b5cba210d7f5ac1ef0f9c494db758cb67d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.a4484849b.0.tgz","fileCount":41,"integrity":"sha512-Zc4tNdmfeIwtYgIsTUMpzEZJtysuvrZs/Vs2DdVFXqaNs+v1nW3zqm/kBtCiqtgjSroeit4+qSnP4cJIN/Ky3Q==","signatures":[{"sig":"MEUCIBguQ1NqLYP7yfEL3fg8X9XFUDg02Ji3LsIWIL/BRwguAiEAgLKz7ncQyiiCmh0dkqrcX1shVgmx8I+ofgJnVbDiwjg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUaGCRA9TVsSAnZWagAAaWkQAJO1SbxhvHO+jGevNO1r\nDo1AY9TZIU9a/2Iv67n2b/yt/rVOJjHVGt+DWSOUjo400tvvnM4Zl8J9ga2W\nlLYbf4vu42YKuJaZV5qa/CkPujCObtZTeekDghC3N7qD6Ofb2ZeEbT9OC3H2\ngQ9kXYMyz9niFzVKmXydFcGUFeCP5LNu8KCUS9gAgsIgiCkTYUC5gN9B1/j/\nrhA5NKDfdXIe0r1RwoEhWR6cFE/XVBPhkreeXDBJ7zQEuQhA1I9Z20ge3+W1\nx2M8DvxK5g4IdCjX8+vr2uih2Cvo1btgmpS30HRw2PzoyK+sm65DruKZIdHW\nqamIHt0c3WW6Y0uYPAeRPz17L9SIBbaINkscooGB3CHTMCovudARbiZPDep7\nQSMNzK2vx6Vxoh63R3dk0h3wcXIsYHgQXvIDaCK7bGhHWIoRq8k7m8UymFwO\n44ruHCm19QWp+z9bM40upq4BN2bTNrkxFtv9lkfz86viXJtPKrwumS+o3DA9\nlaIskjXgWEsV8DC//kHJ8I9izhfQJpk95QDz6h1mSZxmmrju+Qqh5zQ6t05M\nnZW3F8gr0hu9BrL/h+iyIe2XynSJ+iHlYIheEZTec2kut+utNCbJ+OIahTYE\nv6tNEERTzhn0xjS4rWW0sHyYZPRQGJB28OpsJWJa1UG6f/OxeThT7SV7B8x7\nCob2\r\n=EJ/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7908229b1205198ad87858e49ed29ee3836cebfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/rtl":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/shape":"12.0.0-canary.a4484849b.0","@material/theme":"12.0.0-canary.a4484849b.0","@material/button":"12.0.0-canary.a4484849b.0","@material/ripple":"12.0.0-canary.a4484849b.0","@material/typography":"12.0.0-canary.a4484849b.0","@material/feature-targeting":"12.0.0-canary.a4484849b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.a4484849b.0_1620919941872_0.9628207356320206","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/banner","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.b4c3f513e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"556f6b6b44c71e79441cfa69adbead9c00f9e773","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.b4c3f513e.0.tgz","fileCount":41,"integrity":"sha512-RpYBvBa4S+CjjQJtoBbX+7V2IVZN4zVuChoBhMUD2dhV9snbTxRB9MAPK5XpmaSHKBJwtjeewT9tqTrPeFyDAQ==","signatures":[{"sig":"MEYCIQD5EkLTtPcYyHCVZ6OTLShcC6xe3NZjG5dvGT/eNb6CCgIhAJ/gBUMd0Js6gWwV1e2rc6TbnRpI/lyLg5HEj83FFYg6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8vCRA9TVsSAnZWagAAOjoQAJTGus7WAmNiJMZiBKMN\n4zxjryMhNxNmerbN51fhyRlVq4LAUEae6GC/TgzzXwrsUm8iY2GAcW/C4yPB\ncouXDPu7VUujStgpnZBYvL72nDzZ+J3T87JzFDPEQ4bMjmkwqCHA+yD3RDjx\njjeXzW/p0CpdvL8YK/vSDLfDEZp+s0Wus9X4fjOOAVNXYshpSfRKuMJKGhZA\nBXNqlY0BzMgkLBFvfBrcdeIm2xJDPv5VBe9hgmk3R08F4LPbxSxwk3bfUtM6\nJr4ZDGbY2qhEZheDEoL5oPM3JFqMCqU46IcDcC+OuIIYv5EgtalkxS9B/RHV\ntaXiHIsXM78O+Qe3bl63Y29Y4/57CMP7GORfTOERqa2YX8TcsLSWh8M0oMII\nH9D94SIzfmHJbZmrpe5MZfK46yreocErU4LczkMbvlDX8c93qB+vkZakcp5Z\nmS/jImt7smmbshzoWe4CEVwNM/2KmBPEY81mIVkCcvPHZ/UofdisqSrtaAKv\n8tEN8QZ8HejwUFrrnaxWxlnM/y7Hyrtz7V9p2UYcSPd94eedwHAl54GZAPjz\nrwo5UfsBLhG0wEjZXwm/qqXnPz69xoD3fCkru+eFXkz7wOGC7Ee0LwASIekL\n1gVUkGMBLKUT40HBdYtNVywl9U5jwisJ2JaqBFcVWWAKT0UiSRjSDPrm0qYn\nHdzo\r\n=6jhJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c2183e7caf6f0437e64e41b632f75d33156547ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/rtl":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/shape":"12.0.0-canary.b4c3f513e.0","@material/theme":"12.0.0-canary.b4c3f513e.0","@material/button":"12.0.0-canary.b4c3f513e.0","@material/ripple":"12.0.0-canary.b4c3f513e.0","@material/typography":"12.0.0-canary.b4c3f513e.0","@material/feature-targeting":"12.0.0-canary.b4c3f513e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.b4c3f513e.0_1620922158602_0.6692843765640171","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/banner","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.1a8d06483.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4693e4a4c42a74a9ad1f4a86095da06c300dab5c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.1a8d06483.0.tgz","fileCount":41,"integrity":"sha512-tgsMBhx5nlYvF1bpRhPngGYxtjwq2gWPD5aW2SE5fKdxSJXIi4wvz+BoSuPijOZbeRIw9n67qLwaCol33jdO9w==","signatures":[{"sig":"MEUCIQD0Ovlax+iyYj5m5GX6shgoLh0HB8EhacWltjOhWyMwRQIgPHrJ3Y+jQaFW4sYIPuvQFx70pYSTnFtEuzud6l/ljcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVCFCRA9TVsSAnZWagAADjkP/jTyuKztAmM2SvtXZ9uo\na4NiYnzJ+D2qjLiA39HTGHcpTYfknXNw9pTE11CGxkzlvTXKTBAfwznBnGUj\nbYpheBPl1Ec9cjircoDJrnuY6JN5kVtmM+GF/ZE1T/Bfxf0fYrsw48na66SG\niJWJDzrcpeBDTjnjD0WuzmsYfX+mURnOs9VcmlBANRaxwsalNtt5e9E5ShHo\nyXlBBIOCmqeLlQfD/pR09IsH+hyJprXyjJrklGATIZvYhECqbGJNM9dhkU1o\n+BaCj6s9YFQK/Z2U0FyzbaKEcYW2N2dHy3oXjz6oBsos/PmqjITpyiG93qyy\nO+JQkzlu7ZDzKIugdAIFJecWU8d5V4xPzg+hFXZkx+pLBTVE6xDrwV1KXF52\nzBhCvQIGeKiqa97swG6uz2dI6++Pyn/qBYomQgDehw9fk86fHHv+xVNw6UL2\ndyu+fob4RuKnLZzY4w6i2IdOOi82dv/xX5tY8H836pHWzIykyXduLdPnqbW6\nGuUy9aUDF+ziAFEax2spWYPQXUDzndmK119AfYQAarHw9UGvRUWh0+SC6MM5\nU91QaxJ0s8t+dhMnqaz+NpeVkbYSB1Swnglub/4CYA/aQ8leyGlmWCl1XmoC\nM9IKLh7xbEkmn+g7ICO60mxoE/kWw5lAodurmqxxi22jaXr3ESvQRwwZrtKL\nfU5j\r\n=IxvS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4fd7ff5259e7910dd76488a7faab45af839a13b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/rtl":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/shape":"12.0.0-canary.1a8d06483.0","@material/theme":"12.0.0-canary.1a8d06483.0","@material/button":"12.0.0-canary.1a8d06483.0","@material/ripple":"12.0.0-canary.1a8d06483.0","@material/typography":"12.0.0-canary.1a8d06483.0","@material/feature-targeting":"12.0.0-canary.1a8d06483.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.1a8d06483.0_1620922501301_0.3284526032855801","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/banner","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8e6081836.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6806148c1b1609ced18f1458747c95fb2eb7c8a5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8e6081836.0.tgz","fileCount":41,"integrity":"sha512-4GqREgWuSJGX3k354kblTetj06ga0iIlnSWow5OvGyH52bRDBrRmOsRtDHPODBWjDqpgapXwcXltDRT2y0Qe4g==","signatures":[{"sig":"MEYCIQDyNPf7mE4UzGDn+vsBn6tl4/R++Rx5LvYxmNyP2EYbbAIhAK8XLJ3NsvuSeaMOjEV+bdB2Sn89p0yHSSt695wDkQgp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":483206,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6hCRA9TVsSAnZWagAAPL4QAJp9xu5Yiqsda/N0yAp7\niJ2BRzUz7NmdtT05+KDjZxF64c342Puhxc8lfa1M+Mn1Q2nweUZ2tdYHBb0v\nmuM7HnHQIB+FDqfZViCFOJCuIeaLb6eohUiy1tdrRbPs9DQtJEQqqEvMRfmy\nYsczFFmtWnMSyoIcCcybwreciMBV4DQxkUMzcLXdmGPG7sgHCC8vZGTiuySK\nXjWCc4nZcT2EdnoBm//+BesUfCgK3ChJfggocuZP2qF30jgaWrkbJ7bALdxi\n7AmybH7IenAT4qkHixw8Sgz7DYumSBxVjWfeXNKqv5t8UepBd51+FFLjPEad\nmqbdTfNjWNepkH16FTXT6J6qGmt9JQ0kU6bAwO3mnrm3X697H9SGQw3NuaPs\n76FFwRLohVSNjlORgQirKgltfvppYTtx5hLNaq43Q1D1pZjogu81iEY1bY9F\nBPbkfOtu+Jx+xSv4V5IEapDnbbrAg/DG6uBcuUweUWp9+I9ut0MsxlolM1pT\n194S9OO0kWS4yZvE5+8u5n4EpchbRqHnNo3fgqRe6Bmwi9w5YhL3k1wBQiIY\n9EGcLoFtGJFe60Bq2r8AqaqB6Pwo56F7kGiFGitK7RUliWdOIpZFfAwnBREd\ngESp7ELfmkCAYYnSq+Z9ys9FtYG23jNUQnQ9PfrMnyBbrxcVESB8WdgZujwN\nkHm/\r\n=dHsT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e648805eb34c990054d503fd3f70ed25e40d6d9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/rtl":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/shape":"12.0.0-canary.8e6081836.0","@material/theme":"12.0.0-canary.8e6081836.0","@material/button":"12.0.0-canary.8e6081836.0","@material/ripple":"12.0.0-canary.8e6081836.0","@material/typography":"12.0.0-canary.8e6081836.0","@material/feature-targeting":"12.0.0-canary.8e6081836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8e6081836.0_1621028513173_0.46493290230382467","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/banner","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.a2b0f4cee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e9112c43e4890286b33012515dea04dc642a7f8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":41,"integrity":"sha512-tKrVwgcxYnyHaN7RKn5mTyadmudovcCseasrwmJmpawVJp5TGwge/RnHJ6uoXIU1RbE72ysj2rQ7YXsu/rOzvg==","signatures":[{"sig":"MEYCIQCGDqsDLCG9garbtFALBikFp4xDv/XFb9Tq04DhxBez4AIhAMzi6B7wqryajyG/HS/47Aj+FMz+SGn3RvEAHmVNgI1J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvG8CRA9TVsSAnZWagAAuL4P/iyjj2AH6PvVpOQGEpNP\nLRHgT3ulwq2WXH520BvC7EiZJ903u+Im+yxt9eB3WTFZ97Nzo5/vcqO6CqdQ\nKKKZI4r7QBEKlnejFNCH4v0I4QUg8cLY/ynga7b5mB9rRgYIcTEYfIh93Y8L\n3qMFZFYAZttGb2ElyPfGNhDcKa/fs204GmRjBge2Hd2+AXzA+0ywRZpuNiw5\nym5cOraKpMjTNi9GwfGVcK4qrmjwqHnbkNQhKF0KLlCMw7PNRvnYYsY0WnFd\nCuDyODZ5+c1l406WybwSFN4V//G/NJwmfA1/qV1dJg256fBz0Ycj0PxRH2c6\nGdUTa5YI6MtAzoJntsDLAjVOfVW/x/FKwccyek5BMcTJTUjIZp+YdU61+YsW\n6voDTm3Fc+kLrTRu8GrVvlGH67vg+OFXhLkj77l2A5d/nUHkNapVTGhy0xwR\n2q0Jo9d9yibbKsCKnY3qRrUerSg02OSSedHCzgooWve5Q/eMc4oWOhnEuOT0\nIf+HFfeR89XPUbFzZdrIt4Un6c0xwwDGEDS5SXJatz9cdyCsdEshFCFqSq7n\nep6CS84uhbczPt3n+tzsSPFY4wQZPbuU+nL/E7B770IwjM5mUcoCjsPxL4Qc\n7ZIcNaXtP2Hqv/MevrKR+m5u86dnb2NKlyGJTIA2ZLhZEsEhX/A8OcY2Ntdd\nAxs2\r\n=lX3E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"67c2d3cef073a380a13ddb6bbbfc90886c7af364","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/rtl":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/shape":"12.0.0-canary.a2b0f4cee.0","@material/theme":"12.0.0-canary.a2b0f4cee.0","@material/button":"12.0.0-canary.a2b0f4cee.0","@material/ripple":"12.0.0-canary.a2b0f4cee.0","@material/typography":"12.0.0-canary.a2b0f4cee.0","@material/feature-targeting":"12.0.0-canary.a2b0f4cee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.a2b0f4cee.0_1621029308000_0.01935195548418589","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/banner","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.e8e39ad19.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad00e1573a5b38f1eef7b9974748ae5ef482b1f1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.e8e39ad19.0.tgz","fileCount":41,"integrity":"sha512-X0/zuPnQu6D5XhK94DadhXPCnFCSfCJhxIakMLf1KPWyMIsMwD2OwW3xIPQeYip8Lmh5j0N68FU3qGc3Jj94TA==","signatures":[{"sig":"MEQCIC1bh2r7BxZatvLKWlTTBVFcwkMZVm4E7rsp309orPt5AiAgZ3aMyYC0uKfFaIfCH/jRpXYK/RZ6zJ9DHSinJVggCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAeCRA9TVsSAnZWagAAAWEQAJxFEOhvFhXAcBoIAFos\nywvcrURUM5LAb7pqacwkgmhK/BvFJLr3Eewo/Yeo5Y6dyiZJ+r0EAZGcrEpM\nrQsAIcgJfHz8dZpyyJJORk0ywU0hRY47aljvueX6fBxa6V7UNImDSWYr1USg\nvAKa80Waa7xmtNXgiXT0uU6ZnF5p4hDO/6YIsp7DzRLc0md9EyMPRpAJw4Ps\nomiPqUnMNJCXtnNl16xX3ag/67NjiULftBtLY/LXfXcevL+eo3JC6zea2WdQ\nsPNEG+8jOVBnaR9WcoqnSBePvjOSfv3/zAE/BEKeCbRCQfGxMnKKR+qVRK/x\ns1EmIP4qfUTj01MV+O9CFbWc2/ThCUEe7DjL7jd2t+Z4itnEJjdtKLFKMcz5\nyKJXmeJTe5TacBDGGV2T2mxwkl8ialGdDBdY0w3trFzNoFiV4q01F2FVORJA\n7ZNjvE1nruOLkzqN0ijuNVA5c2JUUZ2+nuqqYQUcbD/DGZNEIPKS4BYu8+rC\nQJRoASGvMJl+g3WNcE+QO5wQYgVqE8ofyiId63cfYDuRXRFsKuFaevF7RgSp\nMQ/vYnf0/ckYjrSP6xKTWLxsiBbfkn6SmrBHqR9ja9/M/3Ctfia8MJmW1xTs\nFiQXmU/HnywkmPOB4SMom/GHBTiIIA0+SYyGUql1pTzmhkSfex+vJ2fzrrTE\nNth1\r\n=oPcN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2bde63cf3be6363eb1508c4d7e1747acfc51a761","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/rtl":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/shape":"12.0.0-canary.e8e39ad19.0","@material/theme":"12.0.0-canary.e8e39ad19.0","@material/button":"12.0.0-canary.e8e39ad19.0","@material/ripple":"12.0.0-canary.e8e39ad19.0","@material/typography":"12.0.0-canary.e8e39ad19.0","@material/feature-targeting":"12.0.0-canary.e8e39ad19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.e8e39ad19.0_1621368862078_0.3838006943194625","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/banner","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.4bb5eea2b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67262a0363a44450764e15f3f870f36e083c9e42","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":41,"integrity":"sha512-nYAo2LjhdeNkVaPOnBLQu+4xe8AY/A7VsrWR7iIS44Z/CiR256AWPK3AwhYdDjRITYK8qPfGNMg20H8ygR+5nw==","signatures":[{"sig":"MEUCIQDd4WIhXD8YmT2w4UqoOZrACAomW8UWUmnJcUMIAq3YEQIgVfO6a0BfuAKF38T1mu7NZtw6O/GdB4oUBxoPKuQdrKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7hCRA9TVsSAnZWagAA3d8QAIBBNcO5h3PjXuNppJf+\nSumqMsSyeFk7GCqldqdlqvbLxdLgaiP8mrIc3THaNbvVhSbGVmR9vmKfv58M\ntRP4SURQCrN9UvWjaJAQE7ZAPwmJEuG/lwQxxkzOzPZKdt4WF8WT1RNtICts\nLTioDZzrq44tr71nlqXoZJIOYCnKAMoqi63FTMA9CqPeLoxqStbCQEXHuJ7o\n4giB4Eb6BmRiqtcxPBxE6bSM9ZItoMHch766Pmn1y65Zm9W9ZcbctEOueaUw\ntMH85K5bHE1vkHK/MvCaPKsdU+PrWa9U4D1T30gNMBFz1aWyYsH4uFCnLOWc\nb5m9E0sq9RSaHc3HhCVemlf2bYXmEwiYQav3THRXYrxDseJ6vRK2TS/vsTgw\nDocdWvBlMay6VcWVwT1rqyJm2IQKvhCyKGXb0E6e2y7DgiPWSLGf7aoy5RF7\neSyCzwx391Tl59ns9dyY+rtAM2n3ts5vRe4FAfNKnsxdVJELbdjo10FC766F\ncamPUUxt/EvNfDig9w6sX9LMvLJJdBtkRDcS+KTBOGUZZDj2x3czs+ymOn+u\nAsILxrbuhY76ARB2GnZe3zT9izjdgyTtZIrXwgzJIvWZ38dWzpoZjQNziGJ+\nJz0Agv/bxhccPXTw49bsa/qdZ/CA+Mb9LGBGBRDCOqUplo9yXQvHiQeqJIyo\nO/Dz\r\n=NmdO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9abe3ad555ba3e9ca70f37ff3419acc2edb56676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/rtl":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/shape":"12.0.0-canary.4bb5eea2b.0","@material/theme":"12.0.0-canary.4bb5eea2b.0","@material/button":"12.0.0-canary.4bb5eea2b.0","@material/ripple":"12.0.0-canary.4bb5eea2b.0","@material/typography":"12.0.0-canary.4bb5eea2b.0","@material/feature-targeting":"12.0.0-canary.4bb5eea2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.4bb5eea2b.0_1621438177382_0.22477249121064147","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/banner","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ccce99cd6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8fb240d9539ebbcf90290661e90e62c00df7f70d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ccce99cd6.0.tgz","fileCount":41,"integrity":"sha512-x73MA+3IZ6jKx9XIcC4ClvzMjraJnbKMgEQc942+t7GczkovbNjq38mXmBp+q/0W1eoDNdFOhRYkBGAJ71762g==","signatures":[{"sig":"MEUCIQCyYr0chRI0H0aaf0/BwbzixLk7UFmRdAxCjtO9/Nbm8gIgXTuS2mtYazal7DTOkU2IMTlZmIsZzODD3YxMhMCwh5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQbCRA9TVsSAnZWagAAgLcP/3jDeZpqeQlLAZsl+z+0\nE0mPDKFrWzU7GPU1ynTEwCGt2OWIajEwQknLmi8krUP0t9cyGGm7uEkkrvJP\nR6lynGlfULGDtuycgFF1A9iyk7Pxoxm3BY0gNY2ElR4wUu99GHcAn3DUrgCB\nmYWAevjdoOsJnYF1ajbg/SzxVZzxtUBbtj1DP7FYmEk2oBrns24eEIZV3aqm\nXjzzXp0ZItgdpOcBigUBCbsbymbR3cNb/ZKkaPm6vRERkrYrqD/3VHNl3OLU\nQWCORRwSmkb3uP+yFpVMLLh4wxQb7tgdKJfPCUFTchwE+KMAdNVJSGRBEgW3\niXO2tUHnPCdLWr2fvtKrVMBwOFtcnf1QAMkBFdwnBSTBxk+OJkBzWDMTHyPt\nQU66cqKLnVLiM6YuSfld2RLYaxELmEzmkF6Yl6LetZnX4hAKpCXaN/5ycxvp\ncOQ4jUGxT/UkjFqaPIPumuvIb94Ig/jLK8hZqW9iO0xj+saqTpi1R/SANVkr\nkh54ZEo5GNlrV04enov7MqOc6uPVhDiHLwYVZlQRlvKP4uKXbK0KoR9drwOV\nOXk0OON55JAuN2d4x+P4R3a3cgskvL8UV142EyDwRIb5qswk+dDuMbaZUZXL\nF3l0NSRgxSPYN/GWiVZbNjsZLKYxQ4/scfycD261X1CZrV4p0g/E7axsULGI\n6erB\r\n=xc8j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5d475a1522350d9dadb5fe3597683fa7f4851b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/rtl":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/shape":"12.0.0-canary.ccce99cd6.0","@material/theme":"12.0.0-canary.ccce99cd6.0","@material/button":"12.0.0-canary.ccce99cd6.0","@material/ripple":"12.0.0-canary.ccce99cd6.0","@material/typography":"12.0.0-canary.ccce99cd6.0","@material/feature-targeting":"12.0.0-canary.ccce99cd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ccce99cd6.0_1621472282639_0.9348355547409402","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/banner","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.14767a8db.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"def94368adb7ddb765da7cdbb91d7748ae6883a8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.14767a8db.0.tgz","fileCount":41,"integrity":"sha512-ZKgjjqsKR3bzPKJtB9ijrpoJxWZcIRdoSOGQm2L34RfOu6h7eGqx/MkZzi8/pXxni1YTve4cagMW9HdOSSQ7UQ==","signatures":[{"sig":"MEUCIQD31j/9te9OGcerk4lxqLrqdaLPJz/V0xaz4ZHASA20RQIgA21yWjC3X8MN1Z/qCwHurT7vp0YpB+Z1SSGqTNHhPOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpswFCRA9TVsSAnZWagAAeqkP/ilQCIcPqOSfNvawaz0U\nF+HS6oSAAhrVGsyBF7d9C6v+iNTKExz2EHtEFIFtFg8KTBwIeZtYbWXs+hgo\ndbY+5mIiw/ckMrYcGKSJN4gtXgnfChhIV3ppeUfeNApZTDjyVNVHhFe/dZ6L\nvOVUtBAlMD35cu9fqma1oc8f9u+1mvdE5WE6h6MIa3s2fiNvlBidUj/hlPwt\n+eYOTwSEz1Kmti1VMyjk5TMMsj3+hei5VUoEGacA6cc6lT/RMaSlg4V62b/Y\nV3M7kQd2IPQBLe/QI/SMOUzWIzzJKCZZfEVF9/XGCKLGEMYAroioqJAlCeWn\n+hvSAc3e65oW7vB69dW8UReMbLVsDGVRaXOlxT9izhJAL3GyMpC5VHGDAE7Y\njgYwKnWfbiZ+EBtOBvoFOss8t7B6gqixkDEDl3S0gU4MWyLhsFxNAQvHPyeb\nIQXj8iwQr1f8mRKEpOTkOgEqZ98VzvqooCpTcoVf8gaNcZPGEA4pQyORMv3H\ncvNQvmZVSs1AVJjMa3pC+CWyziss9XEZmP9FdoIEA6WmRF/x7gK3B5GlFQNA\n9cELW1HNXTtM7lBrP4kVwg45uXBheWnLV7Ancb7UBmTVQP8+JgGaa//D63Uk\npb+A371/qhmMYbs94WroyZQS6ZrJsHwCUeZjlxUp4UWez6dYbTbBFp/azccx\nJUaM\r\n=IqTl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a324b91ce28769039998a00879c6f441cb1159b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/rtl":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/shape":"12.0.0-canary.14767a8db.0","@material/theme":"12.0.0-canary.14767a8db.0","@material/button":"12.0.0-canary.14767a8db.0","@material/ripple":"12.0.0-canary.14767a8db.0","@material/typography":"12.0.0-canary.14767a8db.0","@material/feature-targeting":"12.0.0-canary.14767a8db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.14767a8db.0_1621543941394_0.8919544856087356","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/banner","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.22c6dcff9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c64ab4791f78bcbeca0b4c59e3854245b9d3a7ab","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.22c6dcff9.0.tgz","fileCount":41,"integrity":"sha512-+XGQOmlDLS+e29Ik+PGFJaa/woI77YVxYObeT8AFEc8xByOQzPCZ0IVKl0suDyeSfglyTMHRtv1SIHMZxe9xuQ==","signatures":[{"sig":"MEUCIQCA/qQPUTrMy0P0nn1pdWBWm3M7Jjo6vCj0mMd2OEMjMgIgUVvbAb33TaSw4E+zjpVFuuFoAvoWeVpYNi19rrWN/ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8QaCRA9TVsSAnZWagAAL6QP/R+fmb5hhmNxNLKOK8ng\ndRNxWWmEF8Wrm7pEBnbswbKj0PMyCYIe9ORWTvHVqnLRQhaLQU3sYqWfiz7H\nCc5veeVm4/KbZC4hXfvcO8PZzlL9+8eSBovnZKfSLflfWIqItbJ2tJtsZ6iI\nPU+fO6cf+aQmO9hM4AqbwRtkPIkYphwe3wIf/XeDt9zVeS6TAQsfPVoHKLXT\nJcQnFuc1giEUrF4X+Hs7HSwC6iqD71mFVtIWGlpVQXYOhunJ4sY4qMWNYdCJ\nESVueNrz3srGPt3uJxMwgNv/2yoUduzU/rHBhpgOaVOO/XrUfwE7lPNmDmdr\nhUatmUqcZRQmAxFfWbJdRTYEInPgL0MxyFQCS5yNE3Bl6olu6bMOKgV78Gm/\ntOFN38/8hjS1J6Vge12FdDkV0RIpdOWYXWeTBEWY5wHowhza8SQrR3soO50g\nc+mF3liN+gDhamO1VKmMlURaiDr9C4cNmISA5Rd3loJQm63bUmwMJl2T6oNP\n5+Z7Yl4aKdvjhBsGF0h13IzmyCa7gSmXDCYy/SlyExx93tZet0H1Om/Xbi96\n01PlFIPDFf2FC5YwIHhFgvPiE5MJExOu6A2gIkDcpyxnumFF/uMIxZprj2k5\nuUkw47O2pXtOwMvAluib0KENWNO8AEoBFM1vzn0JFBrS6zkexmF1bLMpv9AM\ngzte\r\n=7NSW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"74541e300384d800b9cdf492ff70ba20ffc583dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/rtl":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/shape":"12.0.0-canary.22c6dcff9.0","@material/theme":"12.0.0-canary.22c6dcff9.0","@material/button":"12.0.0-canary.22c6dcff9.0","@material/ripple":"12.0.0-canary.22c6dcff9.0","@material/typography":"12.0.0-canary.22c6dcff9.0","@material/feature-targeting":"12.0.0-canary.22c6dcff9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.22c6dcff9.0_1621869594459_0.6929361765450262","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/banner","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.fadab3372.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03fd958af1d844d5abdec00c4cd0cc2aadb1aec5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.fadab3372.0.tgz","fileCount":41,"integrity":"sha512-Cq3esVydCDCEFTzbLHxtXtIcUiX+51JNJrhgkYG4j43dDUZFjflT9gLptNrhpaUj75Ko2exPHy4iHCvGxXARlQ==","signatures":[{"sig":"MEYCIQCyk6gbGORcmUmg56BroLM3ffTvLnw8dQryiXZ5G76WnQIhANdmXV9nrr4oNKMpxLiT8W0qv8crsMBAVJ7Gvk0CiYkm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":485784,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88qCRA9TVsSAnZWagAAWKAP/0gW/K17TOvA7eEpAxRM\nu4XZ8CvyDgAb0/G+aZ/u6Qp0NHzMoGm/Mi69hc8CKlKDKMpiJDWpt0GcIwNE\nusyJZ51pcHQnHTpURZw6fEXoFr+O53WcRCbFxFOWh7AZFDwVM1465y9aAH8m\nKsAXRUVoFDG15nslfFwa5iwroRYB6jiEBpqC9PONYvNaSSqlK1FRnSavKpIb\nhG3VRJ+OSR5BwWvkXVHq9NoJasnIq1s+PsE/hVGOztRabF7NGxpH6i9FO7A6\njrFJ3UuUQeQfgGg/qkDpev3/3f++S1vHeXC932dDegjZZjsHR5dq9NKuqAws\ndHpgp/sFCQiapoo3dLMU7T58NZdVAkTkqJHBD+3lhn/ZhPKe02xI7QI1iQou\nbx2PAtcX9ktteFeGyCYs9TIsaUV86Nri7yPjc4M+mQZEfJEJs5ShauzthugB\nQbmBtDpkl6lnRofHQDnKyz3I9ppiWF+dj6JC0SykYidIPw1SoAax4agdG5Rk\nYRAopAl84mNxpcptEA4H1eYd2kHZmztU22ceuU7G8jVoiVh+m0N0Jf8cUdC4\n6NHQFnVy/D9AOcMYikCHo6v01k+6XwTHTiZJFEcLZS/EAQK4Nq4wDmzLwo7L\nxtvB4my8DKiLPRyf7TgUyEHhHHgZjve8kzn5ewCsiWfJSzzQL9Ezc2ZRF8bM\njJBD\r\n=TqxL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d76e611194693a7270b5e10fd87906ada48c7af7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/rtl":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/shape":"12.0.0-canary.fadab3372.0","@material/theme":"12.0.0-canary.fadab3372.0","@material/button":"12.0.0-canary.fadab3372.0","@material/ripple":"12.0.0-canary.fadab3372.0","@material/typography":"12.0.0-canary.fadab3372.0","@material/feature-targeting":"12.0.0-canary.fadab3372.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.fadab3372.0_1621872426029_0.6259701835544276","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/banner","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.caa73aeee.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98312be9664464680152b4b749ec6d4a81a804d7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.caa73aeee.0.tgz","fileCount":41,"integrity":"sha512-f6nXOTD8tM06Ts++Ff6Xi8sGFEq3MocHzZUrvffCPI+RO+xBh71fZ7jUtIV4peO6hNbBT55YOB7FYZijYMM2iA==","signatures":[{"sig":"MEQCIFlLHQz3RlpXCnA7GjRVesPDaIHlrPWRvT5QCdtg+m8NAiAsxmhwUANVS2RB0TNr+wW/BbTPQJdF/yN2t5FDll1whQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQaMCRA9TVsSAnZWagAAEJwP/1MN6IYyxy8ZFueIM2qw\nNHRL4XSr9cw4dILG3cMqFY4n7ZNakuh+e6avBie8wd8Iw8w3OB/EOSOXsf2E\nV/txqrDGzj9NK3Wq+I/LHEMXYlvT3eCl4ZWN02yY2vXaVaZgeVdNly1YF+RT\nId5MZAo351auv6R2JwmxBdDUKV1ncWzKcl7cWgSA24TaJKcN8/l358EfLg4T\nXbM+TWLRzbFuC/Ja5w9S0WdvHGE1P0yz5bPifATR9rJ+xyM/lCGdtD7RIt9U\nZ+mmhs7x11G7GgTENCNFklmZ6pVlbRyn/xYLHGh7UkGD6kXR7sTH4bEm5SWC\nzghXkxws7mQVHAB8vXYDaSG2aD1p6W4dWLHafxMppZDaAkXXLtaWH21YMBwk\nv+2UVMjNUn58T9qifc7HEfN+IrByctYeOUASKYINUazUZrspkijkvUa7D6vl\n36gs45MUsSFiSPuZGM6LrKxhS9UKO9jtyjyX9tU0l59x9iAUr9b0XWp3e+iJ\n9aLrpLVhmvsbpJ6yyLLV04JyQpEjGvzg4f/0nJ2/JvDi+Ml7QVb1R80calsi\nZzRQIhEqIjbhxj41bexHXqK1QoI0Lb9bT+ygkJEQoRlX5LoZANEgGLgIJga8\nbRuwvtIqmr+5HAa1xoSy6Q8P9KDNKLbghextFmD6nzm+t+KJ9Z72/asV9pF9\nXxKd\r\n=VGsn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dca5692fda23e55426458f6b0c56c2b6dc9e2dd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/rtl":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/shape":"12.0.0-canary.caa73aeee.0","@material/theme":"12.0.0-canary.caa73aeee.0","@material/button":"12.0.0-canary.caa73aeee.0","@material/ripple":"12.0.0-canary.caa73aeee.0","@material/typography":"12.0.0-canary.caa73aeee.0","@material/feature-targeting":"12.0.0-canary.caa73aeee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.caa73aeee.0_1621952139865_0.4150109953617749","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/banner","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ec31ae1ed.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9334b5c6d2ae13da2591a9e80618b52ad3afc7c7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":41,"integrity":"sha512-AJFhy+qgdvWgC338HJX88oCwAloXaj7Qmi3dz8aAzJ0yxjJqORwIGMudo4BHhR4vDGB9XY/DXhHv3h+zOQtmEw==","signatures":[{"sig":"MEUCIAuXhRk88zrRf9QL2BRQR+7xJ9JUEO9JapusL7nf3fMyAiEA7aG4rtXV3xLtujQ3NCvR3YGjH4uq6dJx4H7Xf0TNRGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/aCRA9TVsSAnZWagAARWMP/jphcIGskRAuo8+u1V0K\nZMm7C3wTAgE+zJrmY43+Pw/FjgrpyoX36EUgwXEPzm9AtA3wttpdoxMLyNJu\ny5XYE8R0NTR8oypY/5EIfCyQ5xHoDlsdPycD4NahU/V1gxAoB1mG8WHEaUJd\nNZkjl9VrbZa75cV/VMTQXRG+pYdcf7JRvmf4e3OsG1klS3Y1Vy1RthWyVVJl\nOAyEBqpOY0/JpH4mqnjLourG1MoMmYYvdCYOPxoWVSsv0M3q8/KokcG+0vOd\nO3Y/z7MEPzjJNR2WcOoDXBC0klRJS3K/cp/tCeWMzuQNi7qI5sGiQGJrw+5I\ns9uPVBOieR+OkEyQ/uBErK999qEVxs/pCWTdSheb9GXCuU5zd6hmK5AvJtf+\n6lZgJ47MrSXMmXe4+RAyyTwqn4BzMXrdyxgTxkkqR7rmSn7OOOba4ULhNL9p\nQSS+nnyIbDq3KMoEMHuVkBGkPHLRS4tvgjhFrsUWAE525uaW9zbue96O4k+J\nOOVsnU4115esmonGmqk9+9TRUKB4tFIZ9flQlkkE+7iDcIua+ZxiK+Z/bKkl\nue0g/aa7UBagoI6A+BUV27cMQxKg9JEj2oE4HNlDgqQ0L5E22PFEf0hIStih\n+HMyS5u/pYJuhw1tJEs6k+zgeynnWbHJVSnSjSM9lHZMv/yZ7gAGndbuLFuM\nEp9k\r\n=dbuu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f9db084a3aed73c844554c3b223d5185727b6d07","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/rtl":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/shape":"12.0.0-canary.ec31ae1ed.0","@material/theme":"12.0.0-canary.ec31ae1ed.0","@material/button":"12.0.0-canary.ec31ae1ed.0","@material/ripple":"12.0.0-canary.ec31ae1ed.0","@material/typography":"12.0.0-canary.ec31ae1ed.0","@material/feature-targeting":"12.0.0-canary.ec31ae1ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ec31ae1ed.0_1621975002380_0.15880543328737917","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/banner","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8530d3514.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fa5efce061b1fcc9a98a665345311a97ff23bed5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8530d3514.0.tgz","fileCount":41,"integrity":"sha512-EjaJBeraQb8R5u4lLa8nLAnmZ0b9Qfvj+DC4EjU3icTh03VBjC3Msi8hivkJLqQd8pabJWQG5ZkLAppVOPgdTA==","signatures":[{"sig":"MEQCIGxKSLEVeABqAEjgarmNP5bbeup4kg3trrW+NVDwjd/kAiBr8nChdkyZltYmXjpd/KV8YSQdQM1XZu8j6ZwGqVk4Xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NxCRA9TVsSAnZWagAAop0P/ivF3uhYZ/iFzvp2QviK\nxHgnCIyCY2i2H6+6cHGA++XTvKgcNTp+mwTnwi2NE5WjxptyTKXY4CMnYUNp\nkqmIyBs6fRFi4ZXfel71f4qxLvp/BmNuR5RZ8xBTzr/dEpEgFit/P5rl4UC8\nHws6WLT/MNz00CFbGyr91+pcbDdDe/20ih9OvzF/rpjOK5PLmZ6yMr2D8LoD\nRcDRVC5mcu2331FnU2VlUpGpSKtnwycPtoWUcI8QA5DcRCJamOtwUnNsnXen\noM5VjfUGZo+HHpJrh7vXz7OLRhO2WK9VW32Eo+FO+V99K9Uawouj89GopsNF\nTwGekfK2JyCOi/qeYhVVwnYygnK7mpQshcguZfD2IHoaB7rswpR5YbejaiLm\nLWTXkho0nuTfFraF5JMJkdBzfE3ezdoDxw6aPZd5/zhVKonroeX64oOLY/dn\nIp3vFuLln3rvs7ogJIxAkRQgTY3Rcyvlu/uZK1lEkT/WPf3MCMBUhYzxx/oa\n+4rGiagfeckBUogkV5eOR2cKYyGDXkRwriG1ZK74CcURcKguxTG1KbdFf2FK\nuaiLGwlOPhFJOzoyA7NzaJy7u6BpUpjVz8lWOUfAxzurjpr6qEEF6MDuoRnX\nLiAqlKXM8Eil0ZPAUkik9sSD8iyDj4J1RLKBC+478xm61q9prsarFvciBCca\nsrqz\r\n=5Mfz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e32508a69db8bd9ce4383a14f2c576d35950566c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/rtl":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/shape":"12.0.0-canary.8530d3514.0","@material/theme":"12.0.0-canary.8530d3514.0","@material/button":"12.0.0-canary.8530d3514.0","@material/ripple":"12.0.0-canary.8530d3514.0","@material/typography":"12.0.0-canary.8530d3514.0","@material/feature-targeting":"12.0.0-canary.8530d3514.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8530d3514.0_1622131568630_0.6359547302913713","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/banner","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.00b5899dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96e60ec171bb59895cb9e09fe2c4c6489db0270e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.00b5899dc.0.tgz","fileCount":41,"integrity":"sha512-/bpIT6s/lhlpiQj603WraRoCMm5O5as46WxCe4qFfq9YPNssN9cYTS2RzgNgQyAlbq1Jxl5TtKxKYBW02ZKH0A==","signatures":[{"sig":"MEQCIF8E5pyY/n1DefTdc2+OMpnK2iAPn8Uq0EVXf6vm3bsJAiAnKrzNaZvSeahdR8r53WLbuBWY3AyFBD2Vp8vU5unhVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjaCRA9TVsSAnZWagAA3bMP/Aw1z/+1wBVytofuj/TU\nSBgZK6z3l+b1u+PpXotw1Guz8orEfuDt6zhnl175FgkjJfOp5XEcz39Aa4su\nnn638YjkSNEC0XWW0Y357p2B0NvI204r23Dvpqbimv48XcHFfc/QeTYppsJz\nAEc/FTAwe4wLAJv6zwvLqp3byhwOflGHrn+IBmyBeCePHuwPA+lXBKc7EjmE\nR1APHXanau+gV5lUCAeRiG2oY2IjVCWoGcshW5wDEv4Fmn3NlDMCOgc+sgmq\nThPBzR50L98SzBJJ+S4xH83pxqBwE/a73/UmxHH/28aiNz//iMEISCZPB2Bv\nfljSL0AhELQUjE0e9CPYegteKTQmpqYoAOMzX5Q25n+UxqkDOBlLRJthTf6Y\novBwOnw6nqJ1iMhP2iS9upiJTBO0kTpaIo61mf7JHNDeBId2bS4mB7yYfmgZ\n55kzw4kk42qKDuS3n0P2uU3WgVe0fr8yKV2uZYX1JC0tnz91FF+RpSpSpiP7\ncnhwnDIoA4KiZZqLZ7NEL6u1n10lpdlJHhWSjx2mxbvcDO028A/tU1SF1+zX\nIbBKJRCWsX6ppIYjJcnj5QCP7r9LXZIo5CQ78Yg/cJmhDt1wvm2b6T+vx1eN\nVKBCYWSZRSTFiMHsfIhHjRRq18TBwMI8eGQNoXnkEwc/H5A19vx2FfeCgj+A\n8JEH\r\n=NVne\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"19ffd4cf15764c62ec7b1dfd76483a2919f6501d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/rtl":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/shape":"12.0.0-canary.00b5899dc.0","@material/theme":"12.0.0-canary.00b5899dc.0","@material/button":"12.0.0-canary.00b5899dc.0","@material/ripple":"12.0.0-canary.00b5899dc.0","@material/typography":"12.0.0-canary.00b5899dc.0","@material/feature-targeting":"12.0.0-canary.00b5899dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.00b5899dc.0_1622587610238_0.8658463762517505","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/banner","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.f1525ea3e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1e4f80c9bdce1c66f1539e97afbec2f3d888717","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.f1525ea3e.0.tgz","fileCount":41,"integrity":"sha512-lqNS4UTMpoQLwQ7/ZifMd1Oct88neIzzWWx2DVcgeLn8MR5oSI5niDaXaJ/iQLt/QDZROAd0y/9QPCELhKVd0w==","signatures":[{"sig":"MEYCIQDWMy8yCiSQfaKWmCgw0TV9FxmrHKkkErj4rAzn9mpJMgIhAPmb0nTWMquZp+NYgTzG1mJvJfwF4aw5/9IM1z+tgoxa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9dCRA9TVsSAnZWagAA48cP/03pKHfkSasfNh0vUlf2\nzypmn/TSRZWqZV8g6h9jJwHX1EqGSrIsRvNza8QgZvIBdVrrBrwkEk6DotxG\neUeM0sU4EY/6YWEPUsbD04HH9iyvlLOiW3ovElsFlFCLQGy/RR6THDpoDPT1\nssHGtBsf9elcNyzhFuy6zvpsXxxMhZ+sAeDglpV/YIgX933RLdMBPkuFByN3\n43LQbz80IIACbB+NB5uOLYYz+6O4BU4KC2jdiF3IIjnjzdyu0JmKQ+AsDH4A\nKTo/+ICEXVlhE7d4fxkVR5bAx2dZ7LtI5TaoP6N69XIpJjZHp4ZInc1BMTgv\nKuzhv5qB7e4z0WhUubikpMIb//Cy5ZP0k0jkdZE6UKF3ezmYAnVU4i4WtuJS\ntR8fjkNOPLzaXKDOOf9OAyBeQHCOcrZMsAEy1jclra/fSnsc4i4iqgMiJkHh\nG9ZYGqiDAkGZTIhFMTQtwzpqgLTqXOdNmpwzLeysWk1gbnufSObUEJr55NyU\nxCJyEcbP9vZKpjFC36ZwRyCQxYh5OpvOXqqZkVFduapFVtCip1GiPV4asEYi\ntnk5Beiv1nBM3gbkY0z4sSE6hJHhJi5T9/n98Ntl2UHw0XuP14n7/Bv5v1/7\nTQOMtEbCOAv5mg31L5EmExwC6LvLgwo3CSrxS8zXHmN5PFEuiTRqkEwRvTD2\nyZuu\r\n=Ik0K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"97ff3c2e33330849b0ca447ac6983126a385d845","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/rtl":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/shape":"12.0.0-canary.f1525ea3e.0","@material/theme":"12.0.0-canary.f1525ea3e.0","@material/button":"12.0.0-canary.f1525ea3e.0","@material/ripple":"12.0.0-canary.f1525ea3e.0","@material/typography":"12.0.0-canary.f1525ea3e.0","@material/feature-targeting":"12.0.0-canary.f1525ea3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.f1525ea3e.0_1622728541374_0.9619810083531661","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/banner","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.464a00286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86c6451f8be46c20ece05e99b74c891176026ee1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.464a00286.0.tgz","fileCount":41,"integrity":"sha512-mXgwyCYSRV4cKd32JjfoFrQ9O3+Hsz+SOkaN2cQROSrvtuRYhaq42Kztko00XM9NzcoTRrIgnYQDp+xviQXMPw==","signatures":[{"sig":"MEUCIQDPWk9e5gOo1xQKE/XMMfiufMcqE8Sjil8X0yO4+1/2JAIgP+PMsq8nzUbD1/OQ608E2JaFpdxO1VCjGbfNHXgyBF8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOuECRA9TVsSAnZWagAAJ8sQAJYB9PTWWhUKpUBr1/Jt\n1ap83AUkSNBAbe1UgskKZeovLSQ1AR9yUOO2HuEWwxSGu85ISDSABcSZ3OeV\n6fecIys2FEo+5eJIdAoys74OuJsbXfL33rsx45uglqU5vLYM+aF9B+0crHk0\nHtrur6CM64beePbx7qX3VnAsX2bSY0LB9C26uYlr8bI03du+ZMIJgkKH24WX\n7jjDA/izg4NIYd7n5DODUjNUzO3BgwykpqcGLaq0RVuGmBPHSmKeArQi5h/2\nzmSJTgeGSlwyI9vkyNM503GUPe3j+7oZZQcgziSeuQvUamH6zbwVGtnKsXfO\n8FD9Yz4l/9OByaCUPbSWJnwcsw84JdG6JD+pJwlF9oDPsMAI3SvguApFog1A\nwjyk33Gb/kuT/IevEscioqGyp95PmWz/yixtv985ePU1tzj/ZIKJd4ilEl+m\n1+SmDWe1Ds9NPbzLSXn2zqKejHPvPXJHGHq02D8SOAR4k2iMU6WyJlPYi2ig\n95PnSVLdUBtMXM1z2nO0l15BgkKyXFD0Azz7dUg8qFtwAIHNs7TOtHOQAVyW\ndQlvLkptChifbBfSv41hEa+RKUDhNZ0XYd5yg4ex0YGrBv8ddG+8RZ/LRc0G\nFh/iqXQ+66nKM/T3fhoYojbS2j9a2T+EHQ3G82ql+iYhx4Md+PNMND/NkLTd\n1Lr9\r\n=Xarg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ceb43f7f74f7db77edbe7a13d3b92e853d599d6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/rtl":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/shape":"12.0.0-canary.464a00286.0","@material/theme":"12.0.0-canary.464a00286.0","@material/button":"12.0.0-canary.464a00286.0","@material/ripple":"12.0.0-canary.464a00286.0","@material/typography":"12.0.0-canary.464a00286.0","@material/feature-targeting":"12.0.0-canary.464a00286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.464a00286.0_1622731651690_0.028564383092411383","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/banner","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.474de7878.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20ce7e0b71f1e3e659d6220fcf075d27563967f6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.474de7878.0.tgz","fileCount":41,"integrity":"sha512-Rl30u9MHPa4icMLxePaGHz6+AxEF+R0CGLO8q3u2QAj+V1hL1t97rN+dgCPTUHfPWL9rvknU8VD/tuChWgZENA==","signatures":[{"sig":"MEUCIF1NjB388Pd0z3E81DvSkq71OzQOLE78s+hEenQdTxgBAiEA2c5HEv8yID6trZQD1vY+7wqrj/HTvkCIorwZh4YCdTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPIPCRA9TVsSAnZWagAAl8MP/1XpBvXYpIq5DIaHU/1C\nhiBIpFE+Pf+928vcCpay5alehLWlMOHLCrnP1UmuYs++bfhHUzbUhHWzKl9c\nVVb23H9SAwZ6NnLxTrWJHYeInAkYBV+ku9ltVZME59+3klrByC8rOJdJicBy\nBzesz1esD17iDCD0nFa8a/3FIecJ4QhDSIlugFbaGc0jLqeEENxc5Uw+fNDu\nBaPZrP6PsqhoSM9TaGZJKRFrZ2d1bCETv6/7aILIWJu96kAq58HesbzhECMY\njUAzez3A+21k8QPeCmHxmUz1hljzBpkY5Y7EvJg4cL495FlVrkY8uo0eAij6\nS4XTSZ+8snIjySkq7T+tUhiYrJikViFh1W7fpHM6pPKPnTYtqAl41Owb/e+O\nYTcvTpkoNYW7VIVntylZbN37vY0ln2weWwFD/99eaVPos6M4qzxKl1FhkLMv\nUSg3C85hXu/xNQBhWACS3jYwDQPplONBWInBbKn5ySQwvdugE6zrOVrSkDW8\nDdLbl2LKbwJqoJfroOkenuzMwT2CCQdM0kV999JhFYPzOnnhtbqw2gr4z/5+\nnuxb7INvPbmgMzQQU7rRku2NZbpDgv8VnLyRtnyjVo5TFtvbPFmqvzxAp9UK\n2NCbVSJfsbbEtxaVPG/706UMDwM+4jStAhiuDVwjp1LktYttK271l11yw3Ym\nLa7t\r\n=EtPI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"67d604ec9cbaa0dc385eb36be35e0adfe641b244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/rtl":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/shape":"12.0.0-canary.474de7878.0","@material/theme":"12.0.0-canary.474de7878.0","@material/button":"12.0.0-canary.474de7878.0","@material/ripple":"12.0.0-canary.474de7878.0","@material/typography":"12.0.0-canary.474de7878.0","@material/feature-targeting":"12.0.0-canary.474de7878.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.474de7878.0_1622733327428_0.46977589581766965","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/banner","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.b87ebf74d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf80452799ec01d83c0ca5e60ee7e49ddad7e0c2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.b87ebf74d.0.tgz","fileCount":41,"integrity":"sha512-UBvoaialruJ0xkgxB9JI2TNCjisE9u/2/r3SCQAhDzZRCSDq/tgiJ8ElORrIRfOZzu2buy49lui0jBimTF5Vow==","signatures":[{"sig":"MEYCIQDxwx4TXHwOkARCyPxcL8JKT85wi/BVw8Gh2jExxdZF1AIhAKvssev21rwfxjdt5QAYQbYsr2vvEsCBZIzhFO+z8Yf4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486490,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWzCRA9TVsSAnZWagAATvUP/0Z8FepW8/v3KXZ3Gffw\nB8arINaYwbYod1COS2YD/nnUXqZ8CW30iqFcBFTP7jc+1COgoeORRg08IIav\n+Gy3pMz4t5d05rvluCBedD+nzMAMv2b92rHdnAT/2h5pJF1I6Z0EoNiQXVPQ\n9vG+mCDUqtfNOsUKz5KKvj0BUGx2z+qu/6m2fDqDc9W8BuF5YKIPbPRPopsM\nI0C1XcuRa3v0ejifSa0U6kjKmDFIPliZt+j8cW25f51tcwAfpQMe3l52nTMg\nVvWf4vlJ0I5CLTeVoqBiuXhm0e+CV/A8bc5ZWckoDg0CjRReaBcarSgSawb/\nRZ/26mZ04zuSS9HW3/xdCGUD2AWF9XcaT4ftQDTXOA3MZycppui6/K1O1Iwk\nZG8cRB38CJJCMVYaBWAvTDcl61JRsWyzBShS8b4IEiU/yMZPtS1hWnEHLHw7\ngr+2rfx5AccveC/c94aixre30zXDiOsSMneJf94BNtODZaawHD9gMXw14YUk\n2gT39n1i9ywESGXdYS9ihtCAsNsrxN+xmadyiHjHCkRiQ72XuIdiItnkUvEU\nRQkuChFHHyPpk15Bqxcj35Knwbz/MgR6D1Aev434ohz6wGe3aNwTXlGhdd8s\ndJnFZgjoY9RlZxGBGkf02g9ZkW1YEA+ZMsQNtB4h5wQtRG2tW/Hnm2Oqx/wJ\n8fMq\r\n=Bva5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d3567c6dfa0fd347d2141fb92460c63fac28b46a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/rtl":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/shape":"12.0.0-canary.b87ebf74d.0","@material/theme":"12.0.0-canary.b87ebf74d.0","@material/button":"12.0.0-canary.b87ebf74d.0","@material/ripple":"12.0.0-canary.b87ebf74d.0","@material/typography":"12.0.0-canary.b87ebf74d.0","@material/feature-targeting":"12.0.0-canary.b87ebf74d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.b87ebf74d.0_1622742450451_0.23014818869095044","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/banner","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.2daa49b35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aa94697ca709cacd311e04343e35366f9bf42519","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.2daa49b35.0.tgz","fileCount":41,"integrity":"sha512-tElQ1kafC2nAmeKgaMp3KUx0yU4OtZinc8Ci9jN9UkBYb04j6UkN5gdAXyJzvUjX2ypD7jNG1wFBd1tuIpPqlA==","signatures":[{"sig":"MEYCIQCUn6VNzKxwO5GdQzIgVMVqPy37pTCehmoiZn9Sr/K11QIhAMVpiISvb+RRS+gfHYyB2uYl/+2Ja4+pfEjoK8E8xsAr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGdCRA9TVsSAnZWagAACbwP/14Z8PvQAr1tAIyVjFw+\nloXIj1NGuVKOtCFUX69W6qSwxZc47kXq1dvBJfbR7h0uvhu4JHW8q6I4N56t\nhsFY6zOwUQwmh1mxYDjw+zolttICKMdebVMKeNmps48wd+l83sdZzRk+gLdc\n/8dAMfQF4PXYsd15ViNN5hbMwopN4EykgD2cn5oDQcOTVeSCX81fqiivxn2L\nhvNF7OQti1n3dbr+ENabOsRT2p3Va62s6pKNAvQ+2JQcY0CFYuntu5scrj4N\nPi0+mpNI1Gf/ERA5vXV6KR533q5xsuhq/qxfM5W7FHtGLchYv6VXFccD3Qnq\nsqi3qPQft89oM8OkTBVXVfS8ReNBIOjM1tYMBnBVfcuHUhdyyPVKKnAE+6kB\n8TUE82Dr0V5z9QQfxM1Euu87kA+T0hd0vgxPfcM5rR0JpvaQ9aNIHcIPIhKT\nxciMspjhQAOrosEY9d0h7O/2RndXqExYQilp0qdPlcFAyWmXhE0jg8/vqz1h\nXsFHd8bIqIsyD84qtJ5J56a637FyqmtE+Kcvra7Zb0OHmhRU1ixNbNS12j2r\nQlogp+oGVbekLHNY8FJWcH8WoGWZnxwn9kYPXbN5MX2QKzCbwvzapZRY7IBX\nmWBCwSV0I6TEkxT3QfcFGSF6fuSv11MPRq748ejvrYqjsyIhpy8ntpFpLCcr\nAdp1\r\n=85gS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3e759afe4116e5fb3941df918249b1b1348fe684","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/rtl":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/shape":"12.0.0-canary.2daa49b35.0","@material/theme":"12.0.0-canary.2daa49b35.0","@material/button":"12.0.0-canary.2daa49b35.0","@material/ripple":"12.0.0-canary.2daa49b35.0","@material/typography":"12.0.0-canary.2daa49b35.0","@material/feature-targeting":"12.0.0-canary.2daa49b35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.2daa49b35.0_1622823324926_0.7215380671003666","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/banner","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.08db3d737.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f24590ba1a05a9fa122fa7e332b05b4e074b791e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.08db3d737.0.tgz","fileCount":41,"integrity":"sha512-df63QStXGLDp97u44bNa1CNXGJyY3HPpZ6x0CZM3Fj4wsW+cr+Fy89Z1kBSji7G3N4iWD2VTnhVDLsP0GbHD0w==","signatures":[{"sig":"MEQCIGOvp+N/ayT6HS9Qry4zhsLBXmcGa5woYvWFGdoaq84lAiAT6qsUXOG113bxdh57DE26cYy+gR+qxP5X0qg8V47DTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoI+CRA9TVsSAnZWagAAE8QP/jxIqz0EWoITBPOMcQuw\n86pr7wlhp1msOq+efkTzYbA283pT2fVyKxln8srX5nOsbiY7Of/qK3V7Rdjb\nD/TY/fzERaaoNzKhc6cY6WTZhTpQ7QWZNfBbaMwglb1JnkiIE+JkfwwtH7qm\nWOfzV+5fQENs3lbIg4WO4465rIJcWjb/4X9QtP8abTI0vaeuaDmf8wUha+Xo\nRdnaQXI/dKL1wSbBX/E5I5Qkc0HnDDBu/6j16rFe70/L9syH29qSGGaTF5BA\nrBdsa3hI8AjleZRdpw8EKxMjkn8ulG9wiA3GSp2Lc+beFI1+BkGUW+b4Gf7O\n4Fkmfzh1OE6J1h2WecRLXb136AhhfopYgEFJAavrSuSTll8p5Zywv3Uoguz5\ngmCoOVP6uqHzo66VOC3KQ36gtYkIEnx1kvi2i3f+Ii9AVSL4uoapdEGOmp4F\n/JOxdEmFtDiKTkwmCXKXD2M3fx8s563o8KxqYbfs5Khz7CZirmfzG/P6h3zY\nmpeD9RG/I88gdffNHkLwKx6aSd9B9YzH/0VtmsIo9nz5CH9l7BPQVO+LhFPE\nCF+JQLyhiB9ICMPZMljfoUwLhb7BCeSIP8Dbig+SqdH2sM+muCWexnfPrENZ\n/HmWfxbGDkem7AI/2Ipn2BQ8Hh6woBNMb9EwUnmozc50nwTdz/92RsUo6qXw\nqMLd\r\n=OG7m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0175b9a3635a8e6c8c6690948618b55f39ca1ffb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/rtl":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/shape":"12.0.0-canary.08db3d737.0","@material/theme":"12.0.0-canary.08db3d737.0","@material/button":"12.0.0-canary.08db3d737.0","@material/ripple":"12.0.0-canary.08db3d737.0","@material/typography":"12.0.0-canary.08db3d737.0","@material/feature-targeting":"12.0.0-canary.08db3d737.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.08db3d737.0_1622835774559_0.5097239916379852","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/banner","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.5823407a7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d12a6741e71716443d1ab90f8f319a10684e71","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.5823407a7.0.tgz","fileCount":41,"integrity":"sha512-FguZBpU6L06tUb+6rcyXvH/eH15PE5Ivli1jv4ktWfH0i/DEk4vj79fbw/U0sdKMqVBhHEKmWIFjjPr6egxqow==","signatures":[{"sig":"MEUCIQDhiQHzXcwfd8XMM+LETdmN4g4gvp/ZMd83fgKfk2XHDwIgde93MgNaPfb1VxV6u+UILTZdbsJ9xrdKn0umTlnggA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr6kCRA9TVsSAnZWagAArNUQAIyPyBtIObEosMQgp8O+\nB/7wu4KQYSuIGX3aRT/x3fgSiGIRl4CdgVfCJgOG3ru4yrT+4lfWXQxco9Kz\nYcEUR2J8DMbWpP/8hQAwUpWm/qPExbK2HEt7Ni62QKBVoyymR5TTfzBsYo+R\nmlB68Hekdqv9JlymOg/voHSp7BADWt/ykdD4A02leVBi61R4SEizRkKHoXr+\naW0eW1+j+TUQgSvPBvfaX6hmySvNOPdoT42elTPGj+N4qSmNnZdfrEc3UDo+\ntxnjlK3ZjuU9h2UmCk9w/T+9hjdfiFEYjwY05XNbb/9dr3UPBKE7vxiNTKny\nkrw0M4a8RLLig5wh8ccgwIhlfNs4UzlAmwG0AEAmwa6fICtGSRZ4J3cHQoED\n47GXO51J2EF0PQcF5dDdez6RUYieBKttD76GuZlElXzy09fCGH9cKrotO+EO\n756FEH/ko3FV1e15lruCp6ovHWixF0E2h4ThNk4G+fYyjv0TTS254IS85eQn\nC+qQ+D6fgkOmEqmM3u0BGQlNiwOpnx1CU1LC2eFayA4D+5Nxl+0i64uLFE+g\nb4N/a8kj1t/zsOX6uJwCwVn4N5dHO6uBOqLBbjkT1N3xxDWfeWWJgccxytNk\nA+zVSeaGMf9N6FmaS26urjG2ORnoh9fdM4K5uKtrdQ0/0cg8FctFS0bPxx3X\nZ45J\r\n=VaAd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dd3ce4590e0d881d04e885d116e10e680b6c01f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/rtl":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/shape":"12.0.0-canary.5823407a7.0","@material/theme":"12.0.0-canary.5823407a7.0","@material/button":"12.0.0-canary.5823407a7.0","@material/ripple":"12.0.0-canary.5823407a7.0","@material/typography":"12.0.0-canary.5823407a7.0","@material/feature-targeting":"12.0.0-canary.5823407a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.5823407a7.0_1623113379775_0.7659651832617889","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/banner","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.23b0c5e22.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"707eebeae12a7e7541141e23bb118c126bad347d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.23b0c5e22.0.tgz","fileCount":41,"integrity":"sha512-fWuVfPXUu9JRji1kXZw4GFMpcCdb8kcdqOTqG8jVByRTuul38JeZRf/8oFmg+IdOUEnGVNvnX3fjkueLOC/d3A==","signatures":[{"sig":"MEQCIH8UbKG0QTpijloT4SpEUC48GZ3vaBfa8MniCULgy2MGAiA93Fn6LILGc8opFZeoKVMY7uamBuwsr8wt0JTdB4+byQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5mCCRA9TVsSAnZWagAAr1YQAKBuHyZUXNgdllzUU14X\nyrY7Q1lVRarmGybX5DkyAaeMjeAISLTf6HqcOFsAb7EypWwc/b4yT+6vcuNK\nL0WRhgxlaVH+eGJKtEQe6F9SdXcaizvhd+6gICwMgCxs/F3GF8KSxkJ1eAPi\nQ3Cs17Ion2fSXkbg3cMOcGTL3MGXVDfEWTrV47dnvfSlczlwW/urv1x/VCKl\nEFftxqhJs22HJGOCldHGJ7ZAFePSsymlbn7LfEdT+SbfVDtRARC2YsCdmkPU\n1vlFI7iH37mZutNayDUkOvXWmNO5g4koWXi0Qn6V+1Ekh3NLbLGi37p3dnqq\nsP/i6IzJAZxgLUHrAbFYNptogg2HdR45jr3VnJv+RNzCMzhJQ26BzJwi+XLE\n2vydl4M/lRo6yswJIrUXj/B9bAoeBvKUqYYq7uQ+a/yeCd9QxC8xUCtzp6Ls\nqEcUUujNbfA92lxj+lwV/e2bEETE62QbmhjSI4Dw5NpdolUcffT5VH3dYOE0\nOCpKjKeGKBHEiHMZe4Rhi5l6ix6Nre+WlI2/yLX5yQunK0dq6Xwwjic0iJor\nGxoaAJ4a7vs1r0KnA9/TLkb8RFQR6RppYNx8iMDy4fJg3vS/0ayfQIh2+udD\nbEeiTvpzoBvyqTpuK/xF1X+rN/RZnKsZj5LBVyxPzdcsmY63uuTz8g+n4F9W\nm3r3\r\n=2Vh5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fc55a497a3b0d48a691942de987d781555ef9d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/rtl":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/shape":"12.0.0-canary.23b0c5e22.0","@material/theme":"12.0.0-canary.23b0c5e22.0","@material/button":"12.0.0-canary.23b0c5e22.0","@material/ripple":"12.0.0-canary.23b0c5e22.0","@material/typography":"12.0.0-canary.23b0c5e22.0","@material/feature-targeting":"12.0.0-canary.23b0c5e22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.23b0c5e22.0_1623169410290_0.7160021916378285","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/banner","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.2952c6a76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e501a53ce422d1b61d399e1990e297f5d94f844a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.2952c6a76.0.tgz","fileCount":41,"integrity":"sha512-ll3AqNAE6KdsAk9QpgaamGE/y+hWFUO0QDZtu2XiJ+MM+Lnp2s0zpbWY5mZN2izz2deznJkbKOB8CTmERl19Mw==","signatures":[{"sig":"MEUCIFC7siMesvFfwzgNC3Q7QN034pIfs+LMBn5j9tLxOJFdAiEAy2maZnYbjHxFzwUHjlhPaT1HdI6D4RVrdVPBmtjKRUk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vtCRA9TVsSAnZWagAArqUP/jem6F55CnI9zg0dZaF2\nDfMtkQQmCZddvFTgskOgvACIM9CIqfekE3yLXSxtDzK29P6b0tVNdGogEjZD\nQk7Gj8OwE6VGG6Zqfus+cLTOmG45Q3XKvO3Qr/JeW7xaXF6TgmjKgfq+GbLR\neePPBlNPT1IHwNjD0jmp3kjxx6x1i8fh8ck+RepKZCUcZQSECDVCaMWRbLLL\nrTKFsut1UZTR42bcc9qXCd+rrmFCTl1p/CVx8Qf3x1n0PxSl71xA7FNY6UA5\nQacWsAAdpv296nDMx0RbfjK5JtxgXO7Ij6QVnJNVkHueiK9zarZj3+IgtQts\nIzFX4AdUPcL8EhRo+GrFDVOu6b69aEmsIcMbFwkgQwC7nFJ6tW2UUjQBn/k6\nTPcwd+Gukzvg/ZgPFEwrTCdKnb1j043eIUaG6kZ3y3gwXrBT3j6i1eZxcTWc\nUG3Q+tbwI5o5g1xoO6Zx/p/u8yqEEMNh+wXEXSaf0e1OV18/SDSHQz8iQ4lW\nzShfxAkApbV6F2jmVjTUu1XbhOYSm3Rg19mWjRgGjTFT815iZaoxMLN6bw+m\n4Utoss2+R8vvC83M8+GfHstBNElBVZY8gVWfrZY6Wjv43JtF3RzzVQO1iovi\nFmePgQI7KRi+a1r2fLKSP1MG8GPqF3Vi352JAHSmaTCGlu/FAYc8XpOY4YVa\n3EY9\r\n=Djkx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c1b0afec5d55ef54d74fa1cea1899368fe5c7180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/rtl":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/shape":"12.0.0-canary.2952c6a76.0","@material/theme":"12.0.0-canary.2952c6a76.0","@material/button":"12.0.0-canary.2952c6a76.0","@material/ripple":"12.0.0-canary.2952c6a76.0","@material/typography":"12.0.0-canary.2952c6a76.0","@material/feature-targeting":"12.0.0-canary.2952c6a76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.2952c6a76.0_1623174124950_0.859608274536279","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/banner","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.f12425f88.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c82278c00c0529f15edb3cb760b81d51d36b010b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.f12425f88.0.tgz","fileCount":41,"integrity":"sha512-x0lz9F1BJsZ0HaEE+BkQaxs2JwpbYGuaouenNcJn63SeSR9BIt5zNyQ3s88ugFhquJQBURnUNstWSoRc+evV8A==","signatures":[{"sig":"MEYCIQDno8XFX2Vlnq3MKfZvEPKt3G/k/O1UWZIA3x/2eoSr0gIhALBDulMN0m7WTsstb/ImVpuSTdTT94YceNRqGEMAiK3r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXdCRA9TVsSAnZWagAA4GQQAKTERKPDdDDG/af8dx8y\n6MhuNEIxUQihYxYHNNu3VoN5j2uKx5Cy2YzYxDZX0LL7enmquMAQyQyoPJEC\nfIZNb+l+w1MyzxxFG7TQStt65tjOCGWETN7CV7mLrZFQzUMQ9ddHUCScqxcS\nbmFyoQP6eVM4nTMCtsbplJJDEhvY+ke0kQkeke9V78Msu0PMq+gHyuFwgBZE\nKceBFbus9hiwzh5qlkqRAMvzsihGemNbhXyUY3w4xA0Mq8HX+QIHEq+4oBZ1\nGbrSWlFIDUMtGRw2LmzB4WvbCvdnqIc//WCRyDPlddAz4ZH9jRyX8nREvjOQ\n0jM525No1ZIRhUJ3FT6hQKDdbuDuTZTl39aU5f6xbOPtRCFbqROD7UsONfDU\nkgaWC3S8kIcMpsAqvVK5+SWGQH3rFizcafJAgoVKBV7B8Xy7ubSJOv0LfkTL\nyG/zJkwNfANRKhiyv+u/uydnWeyMIL9+Y3EUS5e6eR1+vfJ1kp/3urCqGl+i\nZ/5EGD3v7jN8PMOfWgB1X1WZGRrspFM+cp/orpkswcckVNbozTvmEKga7wpH\nOFNqvZhmau+950rNSKDAeQ6nAYMCOBekXyzGW+JetzAbCtoBmC5NPwIT0et6\nqD7k/7nF4ooRw/sg98aAr5U/VdCcIlbuY9QihUYdjdaAMo57CbJVnAmsYcZv\nT4ie\r\n=L/Iw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c8fa3a7d372e06e42b474eed4ef3e4105dc43301","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/rtl":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/shape":"12.0.0-canary.f12425f88.0","@material/theme":"12.0.0-canary.f12425f88.0","@material/button":"12.0.0-canary.f12425f88.0","@material/ripple":"12.0.0-canary.f12425f88.0","@material/typography":"12.0.0-canary.f12425f88.0","@material/feature-targeting":"12.0.0-canary.f12425f88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.f12425f88.0_1623287261345_0.8952773422437197","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/banner","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.e543628c3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6baaa7589a729bbed9d0efbde53059e5040a2e31","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.e543628c3.0.tgz","fileCount":41,"integrity":"sha512-n+TzjdkyOIwIdX8qBnwchC1XeW5s87lQXJBUHxPfQTYYIUSlZAuzEBZJqCDhfsOoNLXXa0BMB9xp8SaYYlRLIg==","signatures":[{"sig":"MEUCIQD0+eR/UnxhForJjY9K/Zvvu9kN1ylNmejQxuAm4armCgIgDdiR/Oly1BroXDfjtBljRezRWSsMS0QI2YtrG/ZJHNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYVCRA9TVsSAnZWagAAkREP/j+J7J1eyoREyhwbyCDh\nC7MP1kTObBeui152FUo9CKNuIebnYnJAsQHKUk6NvZdIJJ9jRIX9q9n5TIlK\ntnUG9ITlJ10jnWELFqylRzv/tCW0mtgrPcK6UzVfAAvwj74oHqozfiW1JmFD\n/GqyjvY4Lg3SoA6sdIyDDyQPb40M+arh7gKSY4v390JZRmecyD6nmPoqGJiY\nb9Cf9ouwiIj0TYZaANw/fMlAjc0kzrRUod/+G4eda89yzu2TU9tdLP0r8yLB\n7+n9T0kyVqvapu8V20WQYp4Lu2Xbdo16aNUBGT8WfWXChecR+sbM8VKgrLvc\nl7N/LpqK/voTYV2l3TiVqcmYxmbQWaAJQu4uYoakec19XX8Db0wnj14Jkery\nXxxS+iN1AXaEREaJPBY2pR0ieBMebUd9miG2Ko2ptbcyAoIzdx+jbidfV1ie\nG/w1XSB+mlJ3mXLhkbUu1eEIxLCMM406IetJngR6GtBwtGfymQ/rJxI0h6zP\ncOZ2qH5OX1mxMkc6ifgEFA2ectVYG6vVNiQ3wibTM1TiqC8HZKTToQ8B6RL9\nEVIOEE6Iy0ZPSKIp4XzdNQLbBSi0hyQV0PTlFLUtXQCJ0VKj+OxMRSOnPqJ6\nbX8Ss1x/DextdpAt66sVp7SBT7F5yGoE8rwarzvZHGcplaWavzInMl+zuiZA\nKDfl\r\n=g8yb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6e28195a46e3b2108c76ee1a6a9ea9416276ce52","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/rtl":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/shape":"12.0.0-canary.e543628c3.0","@material/theme":"12.0.0-canary.e543628c3.0","@material/button":"12.0.0-canary.e543628c3.0","@material/ripple":"12.0.0-canary.e543628c3.0","@material/typography":"12.0.0-canary.e543628c3.0","@material/feature-targeting":"12.0.0-canary.e543628c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.e543628c3.0_1623287316972_0.4823597751097495","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/banner","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.e0c346286.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c95644f563e38b765a0241fe660c58ef09b407ce","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.e0c346286.0.tgz","fileCount":41,"integrity":"sha512-nIXRcctZaRyGuaOeEhoHbqwdun24gTw8FJiDmShuOOkrFvp5UlH4NY7IMTt/WNJtyk3GnPJAbO6fFPlH145dcg==","signatures":[{"sig":"MEQCIFPrTdNEnxUdYKSa/uqAmcHFDt3s/j9HN3ek6yK0St01AiAgLOloREak9UiKZD6vIcXZX34kPuel6N6/LNq4IUEscA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+yCRA9TVsSAnZWagAAOD4P+wb7fW2mrmqhE6FZ+GBJ\n+An+EBYKLc5w0ybJh1SidF4ZvQ2xHKnr8x8fxjOxuM/dkHcKH0vt+GJ1i5R1\nrRLCEx0ceBTIiABnDSLPUZ4Zk+fbIH7T7JWjijdJj4FjbIhlY2k9XPg4baNc\nWztag+DpOVfgcj6449MFS5S6tkmtnSso/d6OUR8SE2c7Ld2LjJXFUOXhznBU\nCr63fqVhADkvG5y3njer6+qYf9IgebEhLoYfLLljyMJpcshI3VF419hF5wdB\n9S60/0Ccp0NBYJNtXDK52mzS1KNcz6pMc2ZM6CvqjMkw2/GYeSUD6TzZ9Ibk\ncBMFqDINkEvoWK/+UkqwEieoHuQCvWtzhP2fA9vVHrDKByUYzhbtyVtv/xOu\nOG7PW9p8I9489vou1WmCisrgrK5Ye+LstInUZpA4/lcqxThoFNanZLBKs7N7\nv7HpjCtdLifmDrtY7/VvuH4u/zybL9I25a8rdw30AmaCU2Di0VkIsXPchXEE\ncduJjzSePUFXnRdXG7bGn+58jHUzccaBKMVVajEjNfyD3BbmhYPXmfFPBmi3\nXd7SwuaUoSvod4S6fr9Ooxp3oQesh/nsR3wwxDsAYls/POpYrZ2Rec922t8V\na+oCIBX0gMR9nDpdr8gbe6QX7vjRhkKHJoo67jJTIN1wwhKaswXx2bLg44G2\n1Rh8\r\n=QcjW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"405607237a611d804caa0b022897b683aed90ccc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/rtl":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/shape":"12.0.0-canary.e0c346286.0","@material/theme":"12.0.0-canary.e0c346286.0","@material/button":"12.0.0-canary.e0c346286.0","@material/ripple":"12.0.0-canary.e0c346286.0","@material/typography":"12.0.0-canary.e0c346286.0","@material/feature-targeting":"12.0.0-canary.e0c346286.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.e0c346286.0_1623343025867_0.1841170638929972","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/banner","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.f43af5633.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3b36bb804150ff05896ed815cedffa8fee555f06","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.f43af5633.0.tgz","fileCount":41,"integrity":"sha512-i5dGD5gXKN3OPnexcfrYWcxSL/l8RRw7+4JMKSIse/j4Q1LKlmAYSDPl2aeAGPgswu6kOOgc9XVYy0p8sQr39A==","signatures":[{"sig":"MEUCIQC5gD67edQTYUerz/ynaBz9MbiOUkL3vOaVDWW6hOrniQIgcAFQA3fn5jXbew/814zVLHrKnd1FUWCn3tAV0aH4SaI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfoCRA9TVsSAnZWagAA/5oP/0zann/abOvNwe+5VGJR\nrdwt8WeHnEaTOrQyvXzciEQ+j5GBDqLIh0QblL4ptKtNuRLr1/qKFP996Ew1\nvntl+vNxQfHbfNfBEJEadIDeTj/VUU3TiPuDmGFhzCAUb9YwDeWSz2dY8YW2\nQF3PmfLx4Ql93Z/zTpGlUyqM5qIbW9FMVbLKKQmWwlRMddePvr4eSIM5eDtT\nyZZ0L8YYNXnAVIuGbKzrYQxmpbr4+y6gGYK66FS/jD2ztU7SWXdjK4Yctql8\n69aSYc/q586StduMEpvhJj87q1c2sHS5ChM4to6LNspigsaaGrDVcGUweVkD\nKMad5Fi6lCD/VnQNliepCv745AmUG7bacTGD10i1pLre2VI7NS6rzd9W7TTS\nT7rEzEXW2V0dbZMLkSYmmz1MWq/cyacBJR+ioosEsADCN3Huu9gBaMUrpahg\nJ/+T74wz1caPnK/A+kprnoC8f5ihxMkcISXyW7+g175VnokRscZHO4uTY6lR\nnmKdsKfpHd6gGnqPHRrJ6rBAOtsOxlL1UKRGzdrCs6mlO5FfIoXiitm+pnMx\nk/2ng4gt2ATT4hFXjtCd1L7vDF7cCT8g9UUrb6AhDt0jvRJwuO9a27/PSSjh\nYeiX81v5oBHbN4shAYJYESn5BIqwHWWcEuQ1zskUOTcqGOuRm+ieM7crAnV7\n3vJR\r\n=5ab6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6889f0098642c4b4f3987ba353e17a9a22de856b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/rtl":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/shape":"12.0.0-canary.f43af5633.0","@material/theme":"12.0.0-canary.f43af5633.0","@material/button":"12.0.0-canary.f43af5633.0","@material/ripple":"12.0.0-canary.f43af5633.0","@material/typography":"12.0.0-canary.f43af5633.0","@material/feature-targeting":"12.0.0-canary.f43af5633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.f43af5633.0_1623357416799_0.6477148093182235","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/banner","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8415ae585.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4d3bf0bc34cef9693800694275fff0141e9ea9b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8415ae585.0.tgz","fileCount":41,"integrity":"sha512-8R2HCoF8rHyAtAlhVp6uTzJ92G7I6Jtgf4dHSO4ArjYCf+1SIB/qLvEtqLNnco7zRI34t3/EAIDeiFLNk/Rulg==","signatures":[{"sig":"MEQCIAO73Mzear3pRIaEyHAMMRsWBokJKC0/dvbkIQppKQHSAiAlil6nhxg5SyGVk1gULkecE3dEuXrRFcZEObyxG0Awvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4omCRA9TVsSAnZWagAATtkP/1vIPEk/KO3V08ycuK0s\nNmks8budBzULh7JLh965h/fTaqjBcdkyzw2CD/A9ab1V97UkqahNBQoNZNro\nUX8+b74DpWXFgWz4q7rWO203u6QGS09j6xXkfSYOE3Vfb039hfhbuikAHcu2\nJ7cir808kbfFb+flx6kb8ZoWM02LJ7evxTk7ZN0VAUJsA8qda5Vn/1/t5yuk\nc/u0m89L7rjEf2L1TSfqEmLVzD5CXxfg4mE9q8yoWGXG04xBwxImnAQK2eTA\nAX9o6fu58e+QzDik0w3GQTuvFT4nF1M7pDVl6Iazuqp5a6zk8R9hv66jecr7\n0EXzsuOfxnW/8e8UBWR64UArit0rm1SUZsoDOeBAQItGWF03AuT90fvdG4EC\n/fX9dXIYiHta/jpU3QEX8ytqXbSGHn7tic3tVeCtfDf1m1wZ6ZE/iAv7YcN1\nU8RNvCPejrpk1oLqo6D8uUkDHfGMfyowLrWbUr6xyLFanDuL0ATK2ApFYBiP\n7DPOmy/mWTpgx1dWn+HWHZslXzQeDIupD5uewvoXF6abIJBwpr3KHntVghiN\n18DhZTKq54vItdJJ19iLHT5vFCBjBI4fWXgnD6vqMXBAW7DzTpXCRIl090Kq\n2RaMLYw5tusSGlVUDMErOdcAd1P/YWHHeCHue+Py6h7PYunQD2VoeHtau4k4\n2Smm\r\n=IZ8D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d00f19e41330e3956e7355a23ea132e5ff37403e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/rtl":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/shape":"12.0.0-canary.8415ae585.0","@material/theme":"12.0.0-canary.8415ae585.0","@material/button":"12.0.0-canary.8415ae585.0","@material/ripple":"12.0.0-canary.8415ae585.0","@material/typography":"12.0.0-canary.8415ae585.0","@material/feature-targeting":"12.0.0-canary.8415ae585.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8415ae585.0_1623427622798_0.2811959021315984","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/banner","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.598fcccc8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70e243c79a137238de158ae237570d2b10394b72","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.598fcccc8.0.tgz","fileCount":41,"integrity":"sha512-GhyYjb+L2xlMhibz/1o6vZQFt/f053g1f+cUmAlibJy8X66GACBQDoCBIQwgrnqlyvIRhywxVvrFShSwFKpIeQ==","signatures":[{"sig":"MEUCIQDiuYeuzSqd0RHXf7Mx9CnwNzL6jMHOS6KLLoNJOk/8EAIgFhwABr/0sQQMcxq24dnuSmFAd1ESWyq45g25nLhMjd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9n3CRA9TVsSAnZWagAAoQ8P/2eALL5iR4BiFJshfjsY\nBXQjGDkbK/6+9zWfNvEwvyfoLp3KrzGpCDveZgzDG1f/JzJi1jWwJ5DvXyAH\nkX6uFUzJNYTO5awEqMfkGuqyGuB2qwp18bVBRvShecpDj6vpo9tVaKYjGn8g\nEaDnWcPn/kVLvVidmCigrJAlvXI52TDdZyrtDC0cVI6A+zQwbOGHI7LOuaCd\nmQVRKpBbihNSJbB9awuYR8QF/bYESdkjtbrEfROLdj1QYAwpzsYSzch3Dagf\nW8oiBpE7ieGi3yIAse9HIDMvA67XU/NQVMkXLumEf4KFGI3+3vIESt9N4BxL\nieA5vnWjQ4J0wNba7Or2iZ9jDUK6yZTGY/K9NKgH+6eEdWSctOTrn3aLj2ZW\nJoyFJHZxDjMTW4f+PjxnfEIzvcmDUWKtUnlwqdByqNn5IRTKOgL5Bndha8OA\nNmawx/Do6KFpd8sni8DilxGUE/AIKzs8SPVELzyQFu8V2kKiSNo5jguCAYRv\nNDzkl20g4uRvbV64xYxR4A+itohicWDqdZTQt/fH55mMQf3peql+RRnmp7BN\nvESv32FjTybnvhzySgJhQtoGSOEResUvJhqQuMWQ1FXmwVQr9DG9JnFw4Nls\nQXoeMRdfa/YAquaQylRgkQLvUtKJEuZaiNY5m5AxEfxn/keF8nguSr6KGPfO\nE16L\r\n=xDV2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ccbc9ce9b0bfd89a7b5d57d3e0d6bc2ae297f66c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/rtl":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/shape":"12.0.0-canary.598fcccc8.0","@material/theme":"12.0.0-canary.598fcccc8.0","@material/button":"12.0.0-canary.598fcccc8.0","@material/ripple":"12.0.0-canary.598fcccc8.0","@material/typography":"12.0.0-canary.598fcccc8.0","@material/feature-targeting":"12.0.0-canary.598fcccc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.598fcccc8.0_1623448055223_0.24037048976897002","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/banner","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.5d0605188.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a03ad681252be7655d52c2547c7fe2ca8e702184","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.5d0605188.0.tgz","fileCount":41,"integrity":"sha512-Vss5mOTAwY95WT75R9vJc+Nz0VnKhKFoilj4m9hbmyQD0A4tZfMCGpuvYVjM6InpuBaQ0kXNHFx0szrqDs32Tw==","signatures":[{"sig":"MEYCIQCDNPw+Tj9Ch6V79lLv2nfxKTMgOOizFMbVYygIjwHwYgIhANtaCrwL98zPD48xmmP3dHbGOmarqzrOKSnnFZwhpU1H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5SRCRA9TVsSAnZWagAAXl0QAKT02EhbZYrN7D6Oa/sz\n+8lP98dUlhwwGDk0cPXUAY/aCeh1oiHdcmIxp9tAdA52EjO0iYMV3OqS2FaG\neXQgFOYOcD9CQOJ6GUujPdwWpyNUR77C6O2gNQEi/EW4Qg2zoK8ZrasyYpus\nKiVFOXqqiwBz5nYQHjrpWlWhi+4EzOcbasYIi7iUGzmxLB1fXETapIOFul50\n35Mg5a1iKkRAfdp8DciCp5Ow5k6HKmwk6tqI1qX4qxXT33jY7QQ+6GNvuimx\nACLg/GybsGp+GAACk9eQYHqzsoI3EqGfe9Fh36veQ7gwvtnytNp0QsATFK5Q\nGkTJIc9L0WKWb8NJiqyG/ubFXe+E7q3LKyQIHQwCcQ+sDADXznEMvQvhrQVw\n6RbR5jTGzA6WbSBZxvvl2uazB33o/ge8QcI5544UgjP3BwKwA6ahy+yb1HUV\nvp6OA8Y/KwruvWKOqbt3z1ecCQ60aseHdtPE2Kl22WablfbKQxMVvKbOOtGu\nkfRneNiQMSSw/MZIr5xBvQD27ci+qPBswuXfDPcHpFvpq8FNcErJ7clEg9vi\naNfA3VtKd/RuAyx1JkPLNL5yFIgGTK1f2IQLsVQUh380+YmBj05FKzCNqyBN\nT7vViq/j9smRVsUopJtHrD3T2Isc7l9NObSEot2vXp6TzOW3ZJEv2EnnaQau\n2A8H\r\n=HiqF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0ecd220c6043621c1d471242f32f317475b671f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/rtl":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/shape":"12.0.0-canary.5d0605188.0","@material/theme":"12.0.0-canary.5d0605188.0","@material/button":"12.0.0-canary.5d0605188.0","@material/ripple":"12.0.0-canary.5d0605188.0","@material/typography":"12.0.0-canary.5d0605188.0","@material/feature-targeting":"12.0.0-canary.5d0605188.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.5d0605188.0_1623692433703_0.38352539081517145","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/banner","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.f147a2271.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3100eb60d855ef191c01eb2f5ada5aebd95b388","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.f147a2271.0.tgz","fileCount":41,"integrity":"sha512-5U/DDIdg39RVc4LbIPEUhN5ZjvhRNRi0GRHKpi2t1+i6Sgyjx92PyJie59e5fJSQwZ9YHlbpI8oSUVxMuswybg==","signatures":[{"sig":"MEQCIGxUW+vvN0t3Cn6NxUqFSNmx5cJDV3przUiuOL7vnhyZAiAgaqqh0vnda3+PgdghBGkgkGWcCrhjwCU59FONRZXGEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6u6CRA9TVsSAnZWagAAhcIP/283AZJ0O9Y3vEyfrbI2\nwERaI4K+gC1+Be0HwFt7b0x1mKKraC9nl43qG7ZyqrB7fJdzifYuyKNeBGct\n84ln7a7KgXN6sQ8CjahmUX6L5/dbS1jGP3cfw4/JZ1pnJtQSLFqawMlS5emu\nx8F+c5CRkrMYjHgRPCUnGpvN09xCS4y032CFbDkQRSH5XjSty5eM+/S1Qnog\nc8LNiqiDkT9mCxBuaA6DUIDF+ny76w6GlQQ8epq+1JJPxqCs3vv0giFiaCvu\nJY7zO4fXyV6CoQq+EYunoc63eFbJAXU5joMZ/FMqqU/aslrxFISCEHgeUCob\nfvh0D0aM6ISCsmV0hiBFZTMYsOs6b7pnqXlRL3GSWviKE+97u6ed0Tj/olk9\nudOn+4SNC0UBjiGrtAb7YHATlDI9ojy+ndzRJhDa8g8QdY8GrTkjmFYlQHsG\n5wDXePLJQm3eQuf7nzySHInu/wdoc4sroIpHsdHhN9ZqXQj9xLa+AiGdpzYC\n5Ii0VzfARmkLu5xMVyiW06EgriVbFg/hSJqKXiBNua5wMUkFaL+xXh2g7cJT\nTiGTF9LeGk/BzUAMCADJOEwDtpG8NUMDzfJVkWTjNf92VJDxFzKgYpRpIKmU\nVoHPHoHmML4EYK4Vf2hG6E7NmXOfXNbBibyt+o6J/at3krndriTeNkAD7iq9\nBosK\r\n=xzyQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"70b871f06c34302277b9eb3064110dd70afb181b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/rtl":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/shape":"12.0.0-canary.f147a2271.0","@material/theme":"12.0.0-canary.f147a2271.0","@material/button":"12.0.0-canary.f147a2271.0","@material/ripple":"12.0.0-canary.f147a2271.0","@material/typography":"12.0.0-canary.f147a2271.0","@material/feature-targeting":"12.0.0-canary.f147a2271.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.f147a2271.0_1623698362506_0.36614562756712177","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/banner","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.33579e00b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89911e67549430c605f589096e5982861f267dfb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.33579e00b.0.tgz","fileCount":41,"integrity":"sha512-cA2G2ZeQ6HclaBVQb/vGLZ4SbCYC2URmvqNscfirVq/MJ6uEi8+ZT1jMUuvjhETwr1+cQF6smpxc3s/sQ3T1Ag==","signatures":[{"sig":"MEUCIQCGL4iintsiBe4abl7fAiaBNIhexU17+a5g9nfK/0E34gIgDhOGsSAZkbjcPOfqjuF3otOcC1AwGG+CSkxGyHL93sE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LzCRA9TVsSAnZWagAA22EQAIDkIG3OxEQZ48bekcCo\n8p47We3lOp/49Q/d6tgxF1cjHJ1VO//9XhIGSmafvU9EXQa/9yjTTqZYncSI\nDK0FUx1LALmPyR4KyTlvBTHD/P3x5g8w5E7qdKr2tHAyCzr2WB/AePKPVGq7\nW8xG9Ugv14zQqCVRYSfFGqUIFLnR+zPcqiI6MQrwjiAtzFbydyxPNchQS5Pq\nD7RsupSypuw1S+cb2fi0IRqEKGQgco1omtHoArdaQSm46EN9uBZ0MiQRQRE6\nex014bibwSeUKdD49STWIc9avrJXLYuGqeZcRRaMzFzkKQbVjXYtZ5vs/X/f\nPqtJ/UT02J0vUrBf9K5OfLKXNWwRDVeYrqGcjScSoMnWs5PhnANzrg4+QH9p\n9aJ4cqfwI4ceWCSTzJqSUxxfl3b/2YNhoPZFnbyNhpOlW5pM1QemRz6HAcyv\nWpPRAKpiIxaAgduh70eDU/1zcDozbJtWY8nZXNONnT6G8OZoEFD++hOAWD4Y\n4GIS3AzocdX2I9Ikkyfdkaz/HYquWvSAmN70qpl1+hiDpy35tNeSzbBH7iCA\n7KootOLZU9e90l9IwUE4z7oyCCRwTPnD5ZPFBuQbPNOCfZIZD0IWQ3gLtJS8\nDdXkMUMfErHJDGA1cgSgIONiay9YP+nW3gYrJuXFm/x3WWdNjEXyDV7i9fYn\nAmJV\r\n=zBta\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"13a815cd8b945d23ba7ba2ebd6730088fa195237","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/rtl":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/shape":"12.0.0-canary.33579e00b.0","@material/theme":"12.0.0-canary.33579e00b.0","@material/button":"12.0.0-canary.33579e00b.0","@material/ripple":"12.0.0-canary.33579e00b.0","@material/typography":"12.0.0-canary.33579e00b.0","@material/feature-targeting":"12.0.0-canary.33579e00b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.33579e00b.0_1623716595273_0.09110527828021286","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/banner","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.a6909c0e6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe74a292fa491f30b67f0a308641c79fc73edbb2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.a6909c0e6.0.tgz","fileCount":41,"integrity":"sha512-Z5jwaareS1aBpWUTA7hKdlsGOj1seV6SEDY528Ix6Pyta2H2zRiKIypkW0MeVO+ogXYKR0GSP6kC8bMciIrEyA==","signatures":[{"sig":"MEUCIQDedCO9ySUCzsnRIotknqKAVPeKnnK/S/XbaY/DmxvwoAIgFUPC9FxFArgRCBgR/wv1m8bHby7DDCdYj71qktgFl0k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPH8CRA9TVsSAnZWagAADNcP+QGdeFGQQiYyHOqBoPiq\nTcHOyBxQ+mU2CrGTYfwc/vwgjsyf381wmaje+9uf4QVe+Nb0gCwiHjPcwMEn\nPqIDU7/jNkBJCWKVdPA3nW9iX+joG8Gh/EkyGIV/T3A9npKX3X49XsjlDmFa\nYpz+6/LPywnn3d+JravHL33Rcqf2MaEfAmIalrpnC/Mu7rlupxPYdhf4ZHqW\nGbMfLyZ/U8cNpH/c/F+TxDXKBo+75KUpSTA+EvdGuVko1Ip0OTRxEqlURyVO\n1zi4j95jM8Vo0bMwt8NbR2jLqJjVsnkQ+jBtO0cIh6sv0PZye7hdWzdN03iX\nsdy/Kf584VCn1J9Y8N7ialmE5LTjqCKBxzTYkHwUFTpgN2mBw1MxLCYJeuOm\ncLPlXuf7tlVqi+eWRnAvIK7RSxDXVZbFXHgNz6qF6wCFWZYyZZiGWA7wytXT\nFVmJvEKWW7nsiBVq+AewOBaFcGcr/KqXCLUlw2PpLKr2858YXs36pVBdW71G\n6gVkr4a9SkSwTx5DgNdjXKac2b0G0ETiot9KyOas4RVqIGdWHp0bEyfo222N\ncBsoV+VFwHhLL4dt6wPQd8IpzQLvm9jnsvbh/nItFuBXPydwC9QSEccPwHo8\nb1OO1m24NNY8dRXh8os9xLWIW+cSAh8P+pehYkRvY7SCrmPdFOVhlMUnxru+\nU9EU\r\n=cLx2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f4852598d008bc1750e5e9d2a0e828aa8804f87f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/rtl":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/shape":"12.0.0-canary.a6909c0e6.0","@material/theme":"12.0.0-canary.a6909c0e6.0","@material/button":"12.0.0-canary.a6909c0e6.0","@material/ripple":"12.0.0-canary.a6909c0e6.0","@material/typography":"12.0.0-canary.a6909c0e6.0","@material/feature-targeting":"12.0.0-canary.a6909c0e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.a6909c0e6.0_1623781884236_0.7804505095802035","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/banner","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.c18b5925b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30ef470c932056c7e85866de720ee41f91eca812","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.c18b5925b.0.tgz","fileCount":41,"integrity":"sha512-10JApMpppVFByujd/6jEHj46Rg3zqJLBvix/1vzW163ckfpxP9WKH9w08yVKPEWEYXpHgOEiczRVA9BeEBZL0A==","signatures":[{"sig":"MEUCIBxLMtISuHHzXuyQDM8EtLHXxhuEGEvS+ZAgqeZBm5ieAiEAwnafXfdDVbTeoaC5XMuYfYS4iZ6kId7aQAg42OT0JOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":486636,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXxCRA9TVsSAnZWagAAbuQQAIB4kM8or4Akx11/2Qrg\nGKDk5VC3dPvP2pklwnnm41KLWbJhY/vMTrUy4P6+RAGUub5trxBpqh66YXe5\nGkk7RV0q1+kDjWs+sEdBvI4Ur1vjOQ5QdynFj8Q7T9nyY9cbYAGvKbmCc4UA\nr5YhfSKw0870z2w/mDwMin7ylDo+nmABTrxH/7YLxcagbN6FXaN01I9u9nIm\n159ZUG5TP5iNPucW7MzC1NHD50HrWa10J5lf8U0bxnGvqkpXZQiurPq+T6PZ\nuTyRLsg1cnnAWzXSZnAIMsS05hexjvFS2U019B/k7nYP6gGaw6lxCh/yvpi5\nYso2tt0qp+5+zbQ2YEp6sJDRz+teXPsFBoaGVV99gFAZ//zJkTKWMZnyQpN5\ncfDadiFJJckAvZWEj+w34D2SUS/d1rCJQNnjD0xg/0dQvTIqa6t9yrHiUOO+\nESRzjTZs6+ZQG98rXvGDCcfl6/op2pyuaZWvhgm/Z5FqvZDVXqzmMFB+/CvA\nEwqqHrw9oH4cjwh+jHxDa4hCohNHhxvvNrChBjqJBGLcb16uZTwEkcZ4vSxm\nWoxt/96GrbwGn2juurB/mFIcDNYmM50sPArnoQpnAtzg8jmShhVXiuRMNh1t\n5h5a1lGM7UKpFOmK7OAl7XHtmG9Dij84s+ZO9a9ybmIlJY9JtgRpPWP3gjhT\na2L+\r\n=mqLo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bc767c077b93ce415f2505e54f329042c80b0d3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/rtl":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/shape":"12.0.0-canary.c18b5925b.0","@material/theme":"12.0.0-canary.c18b5925b.0","@material/button":"12.0.0-canary.c18b5925b.0","@material/ripple":"12.0.0-canary.c18b5925b.0","@material/typography":"12.0.0-canary.c18b5925b.0","@material/feature-targeting":"12.0.0-canary.c18b5925b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.c18b5925b.0_1623791089631_0.4901958957413475","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/banner","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.271fff902.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82437de3cd8a67d349a162d7c8a49dd5070e21ba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.271fff902.0.tgz","fileCount":41,"integrity":"sha512-jx8iD25Gl3oW3ejYWc3Rxyg4LfuBMk1FlXPKiUHysQgSi9dDkTp41j5r10jumYCrzIrxF/xKTdgpV4iBEMLWlg==","signatures":[{"sig":"MEUCIQDU0O1M4KcVRFfRIOviDnperNs42R5rPMJSBZeSS0McPQIgbOPgq3BhlcP/1sqkI5A1Mg+b3sb4Zfw/5NRB8DKmF18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8gCRA9TVsSAnZWagAASCAQAISZ/fMHtO3CbqIz+bS4\nBPe08bSbUtSKy/RmvM5EEaJ8fghbtRdn3HdGEsZ3otAM9jXxIN449vfwVlMq\nPARmSXf62TT5Ryb116FXeeicdJH+esC4boa36Rz0yfx4vy2Nze7wLJ55vlZR\nW5GRzd4i9xYsJMUbTXB34+i1st6EwrJqoeeDPxM/pIRG6ukKUpFv5Sm5L/3y\n2uvd8twIgBSqiCPwhvIpg4F0l7eFlrvuQIS7mmXnfkv64r32XbRmKsrs6hFE\nck+5UHNfqxvrT+BOdFFb9VadT6CE1WBP3rpog2qw8CiYyvnEaQ2RBF4qba95\noKfJxy20857uh55PXIhZmpGWXT5GfkPd0zYyVyV0V3H3YRNrlESIdYBA1atY\n1LDsZnrtMmohjKTehdmhg75Q+DeJNJ9/vkTKWxwLXu5ZJ5Rbc5TZRvOaLR0T\nq0wJScNe+lXtgz0Ivaz7TksUgb0xCBzvJdoJ1i8ts5ioLv0R+QQnZaCgI/EM\nUk1+zFh4ruH4n+vYUvmjJZXmK83mAbedjOWMGs9b5Bt+mpiMuejdkaP0LD7U\nNHC0FndnU8AzwMkk0nmlIMs9wJ35k4iGW4Vf/DiHwaBG9bhjV4A++AjMhE7s\nIWSEnIBwllaErssqpjjBUDVKcaZADhGPt376dXfanX5lArpqkpY0QVNMvLF8\n1sOT\r\n=8suw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4306227bc7e5f014c5e961178b436b394f0dee6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/rtl":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/shape":"12.0.0-canary.271fff902.0","@material/theme":"12.0.0-canary.271fff902.0","@material/button":"12.0.0-canary.271fff902.0","@material/ripple":"12.0.0-canary.271fff902.0","@material/typography":"12.0.0-canary.271fff902.0","@material/feature-targeting":"12.0.0-canary.271fff902.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.271fff902.0_1623797536538_0.8712132158109913","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/banner","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.7ea2e830d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df559ee391b5f8be33de1994bc192c72a7be8767","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.7ea2e830d.0.tgz","fileCount":41,"integrity":"sha512-zGpqZAEEHQ5r/v9p3x1QCfQoA7Gli4m3UpF0CcH84lBdQ7WkStz9P06qsvaVSdCFt8UZK4r5gPKCvdYxu4Ho0A==","signatures":[{"sig":"MEUCIGq77gBHhOu9bGXvahp8iPrAoMI6V9AYgwkavCvSotVzAiEAjoVt+5vfETvnFFUZ+lrBYigBBvo8AEj00MkjLfWWjlA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS9ZCRA9TVsSAnZWagAA1WYP/0Y5T+7VqSDEFN5QKDZD\nXnIV1TlIUyq028VLG1T/UkmIpH4TPmUKGeAnd2220nZXC+Utz8NOnn648xmq\nC3QSQr4qMLam8YNFDkqfXtppFY7hrR5rQ/dcjaz2xdK3d+LWIES/p4sixvWX\nrurRIcElJ2De5OgFK+bq3EEBJ0etkZEJ57svlvmPYvj+99100G4iHt322Gla\nW3blZVpfnOO6yAKkR9e5/CjUlxYJGY5bJU9DXeJR7e7WnlgSQFtAMG85vTdu\nsumXTHO+TdIouOADloTnt8k6SeE+F9vuMXetTZW3JMvAaPfAqdGFaMikHlig\nNVigbpm/NnuRU8ao5kKBJdUG+WvcwYSZto2S8x4XMnYF9S+um++uTg6ICanV\n/7EeYoN7YeYvW09abYQwh2lBB/G4URBZk+bTxxtF8U9dQgwZvhlJR1iIV002\ny6NwgmZqudNI1regZ86kuesubCzf3V/tynCozdXMUDRDUcrK/2yW/UtR9DxS\naei4m0GVG7P7vVjX8zX/6DlKuII9SgxZPKc8vHKQA5WnXl/v8M8QvTQZTVqC\nOUzUgztofK42K4A3QV5RQPyBjAa0jfWDFgbp1mbzaD0xpB3P4vvGWws/6Tz/\nGHjNnWw/a6i+0BgQ5qei8C9phqiVDdi7ILs7sXmMgjZxgyGPv2tW3WEyZt77\nIltA\r\n=ToR0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e1f3cd5692e7f4572664681a049ec1ea1548eb15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/rtl":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/shape":"12.0.0-canary.7ea2e830d.0","@material/theme":"12.0.0-canary.7ea2e830d.0","@material/button":"12.0.0-canary.7ea2e830d.0","@material/ripple":"12.0.0-canary.7ea2e830d.0","@material/typography":"12.0.0-canary.7ea2e830d.0","@material/feature-targeting":"12.0.0-canary.7ea2e830d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.7ea2e830d.0_1623797593639_0.3802618207230921","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/banner","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d96f0a1e0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d51e75db52d8595bdefc979e4802d7fc89d7cda9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":41,"integrity":"sha512-DcoEAuIIQzrdeOKkDtfXf1Csy9ulx7HaxREQoZmiXm+3MfoLwB1UV0+BDTBR5xT2jQQl6BrJYlbY9VbrxP6QFQ==","signatures":[{"sig":"MEQCIAHuRPqJUdE3HKUAJttfFhEtkEwphA2oNdhIPHgGf8oDAiBbcoJUSZqUm6lUPdNIszNtks37AJT3DwAto50AXBQuvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymgZCRA9TVsSAnZWagAAkI0P/R42YNkYEhj/WMw7mxSD\nsfqaBolmMkJeCRYsUEnXRZY8ktWuxDBE0cDwoNqvoRkIzHjbpwlx7twkBdVF\nHZxT0Y6C4BUQ43QC8TRQLg8ArrrdScbp0EEbdwopEcsAt9GAnHl2YefR87s4\nmsgdFAG0M//CMCIPo5AVBMnT1Q12kmsXWD6oioj7SrWHySpjQ+elEzfQvvoP\nAT5m1Y4NA24XEvbfab4Djvlhyu7tSi8PpP8H716LzV7hXD4JrGo6TZhjzU1K\nDXSfUl2+1MBhiEK90lLoXL190Myf6+Xmm2n5Po7fpHJoMQJpH2ynwEZg5lkO\nMnYGrL+5RU25qRwAtNcp57L4S8tAPHxT2AgRi5Og+nbEA1Mjkz/dvssSPHEr\nT/0zICdjeOKe7st/wQvPRtCzEo9KsT3RfILQR6iNjf6IIJqQGPNBZsKlflpZ\n4PqL+R7cgqaHn37eRjNfSHUklmouFUgSsRTh7fQ+7Hba64vKncmLyTKi1GOE\n9tg+IvwCNvcjtcTORm3P1LQY3qaMZfntJo79ON3rOQARUnEdqaH5h6s8FWJe\ngRcC/+QYRBT31Q3Qtes5LhYm44l4TlFraWEDSkO/sc6gfdf/nXe+83KtVrxp\nGZRTyjxpm+lMrrBR8jrhnxCqUlTYptAZQcNZqlegyBRDvoqRrKUZ0K6XKqLS\neivG\r\n=b/Cx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"32470ff9121448fb2599b2985e276f51563ed4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/rtl":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/shape":"12.0.0-canary.d96f0a1e0.0","@material/theme":"12.0.0-canary.d96f0a1e0.0","@material/button":"12.0.0-canary.d96f0a1e0.0","@material/ripple":"12.0.0-canary.d96f0a1e0.0","@material/typography":"12.0.0-canary.d96f0a1e0.0","@material/feature-targeting":"12.0.0-canary.d96f0a1e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d96f0a1e0.0_1623877656530_0.5887303940917614","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/banner","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.a6183801a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"750437d1d9ee372cef19495c18b2445387779064","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.a6183801a.0.tgz","fileCount":41,"integrity":"sha512-BH9rRp61HbtysFK3+3c0vuEg6NOvVrQZ1L3wpnZuV9ImUDww6YbWPPfsmGk9QuV4FVt9LXFUgVG4eeh9qPOsZQ==","signatures":[{"sig":"MEYCIQCqbWXUJ8HjOk7lbaIKDE5Uc4oOSvKcUF46sXD5NHuJdAIhAK5EFj+eMUNUttd28T1YNV+v86rebIxV02xAs44dUtA1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXxCRA9TVsSAnZWagAArkwP/ic/5iYkyIOVJc8Jymio\n3oeFRf8OKSOx65JO9o1u/1OZcJhCqq26hSLDdNlxmrSzjsakDw3e5gy1crGW\n+B/isRR1o52cSKsh9Asg6QXxoF7A/VOH/j0c8EmKQx5rnXH7NdPypc/HYsUG\nNav3e4hHrWFA0b2QIbXjOSJ2ZzhvY6UD6aNvH1PEhxvBlozUV3yr5FfnF0/r\nogWmWxhDH7k0EC3//fKELoVL0PnVJ/L+8ddpceYvandSAmtVBtdZO9HHL73l\njUtlpi1oot1Lq9a3NJc+hv5pd46q+B5es/kAVhCw4Nwl5DnESIK/JFY6x2jw\nOuxMkhp90HofhIcn85tAiHiaUshsb+tzotUDsIBdmhp0rtzEeBRcz7XWrzh1\n2Bu2zjwgtp501e7EEIqfwtA7fSburUCOsTM3asAXErs5F9ghu5P32XmqhZiy\nY0GzYwhw+nRctaVAQHu3ck8h3ZbmCII7F8MGvz9IK/WidfEA3xrX9p1BSQhc\nVBwDRovqxqDmxeM1ZUdH1yrpTRX3SnT7qtQfhSxDjFIET2PacWOGt+ait0Rc\noP5aRbYgPalmSn++rgmbHjlwNUdRsuiVqoxYyKNZiKamY5Kvz71cZutD1g2q\nnky3y8+ExL2Q0f8sRhy1LkFak3Xx9QK8wrlNiRLOKIZWUHlMm/h7svK48Xui\ni19B\r\n=DsVR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b5eb42f66e2a670e1f9573b4feb1a600a95b49b7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/rtl":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/shape":"12.0.0-canary.a6183801a.0","@material/theme":"12.0.0-canary.a6183801a.0","@material/button":"12.0.0-canary.a6183801a.0","@material/ripple":"12.0.0-canary.a6183801a.0","@material/typography":"12.0.0-canary.a6183801a.0","@material/feature-targeting":"12.0.0-canary.a6183801a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.a6183801a.0_1623881201185_0.25156265386869614","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/banner","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.940550232.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81c315813612a8d8b86f11043df0860ddb706f90","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.940550232.0.tgz","fileCount":41,"integrity":"sha512-Ocxm9IwcrYCSs/3U/qkMVjVsuJVc4ZtWbBptOj1VFDrL28jrAgK+LFEZ8RVezKjP8knKFVmxX+VhufvfWxwQjA==","signatures":[{"sig":"MEYCIQDdnL2zssWQteA+/hrXEZzdDXIwDpsKrMp9pZa17pZjsgIhAM6aMLSm+Hr3vPSoD6lluECGqN/g3aAapgIRijxCpGbu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VoCRA9TVsSAnZWagAA8IIQAJJ4L806rcx6VnuPcIt1\nRUpy8Zr+imq205XtZOzeyYEU11b0m08r06dkVxaWICiq7LrkLzJR7ED43LRH\n7/v5Yvi+nTnYW8hq5Pc4Lc9xoY0Rak9PAUdzNv+i222WGWM5MDXd7/pz91Ih\nMYmSKlsxIZofOQXXz4gaFpy8nIkA0O2TCOBbzcS8HZFfYbX5zRb/ifKO9pyl\nWAbthLCHDSiuA3y04UMM/w8aWNEJvnMGgmJiX9dob9xqg441hIQyODjx6tea\nDGwfd3WlJseuEe/UFbFdbfVBn/bSideyodU46dqOztJFQwO7SaYfcdZARBGs\n8q5KcxlV1BFVOsV+DjraYYo7GvBYzQB6zKBHOD5Nl+04wy/H29M51H1x+h91\nX7sw/YEXTnicgQlhye2lpVJdWu3dgi10k6YeWBQ8XAZVhpMjQdAWA1cS/SE1\nfwHDSoTIVpsUXT2ViU263fBhf30RaBMoXqKUkAPi9sFlMpdReSQ1YJHl/nBD\noLEiwiG+9JcneDdTdL3KxmCF27Ac3kZMy2ezIKJe4svgTbz1pClD7UftLBYz\nnN8bP0JBAdkmtzbpZKMsnShpxBFGmzDIXnc9iXcVMmcFZvI+PDtGO8hmULhA\n4w5OMlGEwvO8I2RpMkcCJ3Dzs3LmnsabbzNpH986u0nRzU7xUPo0zhFwrGhi\nKJxb\r\n=vJBY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d6560428828a2c7ac90d050a744265e63c8563e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/rtl":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/shape":"12.0.0-canary.940550232.0","@material/theme":"12.0.0-canary.940550232.0","@material/button":"12.0.0-canary.940550232.0","@material/ripple":"12.0.0-canary.940550232.0","@material/typography":"12.0.0-canary.940550232.0","@material/feature-targeting":"12.0.0-canary.940550232.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.940550232.0_1623958888223_0.1540610835199263","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/banner","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.f705e8048.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0afd6259b8542b1e0167b38f3dd9a3d341e7e84d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.f705e8048.0.tgz","fileCount":41,"integrity":"sha512-sDJjGxmSQcVVj+8oAgPZUm9JJhIXt4Bu0rcyANk0TXjPmBP9kNFMAb6j2H5SMBABpe8mIA7/EuH+d+6hDmZxNw==","signatures":[{"sig":"MEUCIQDioNOnXYfCJkjCH6LHWCmYhGGXcTMVWtR744dp3qyragIgJLKAU+jV413ndpkXOZfBXGoHGYjy53PmBDkBWroc01s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLr6CRA9TVsSAnZWagAAD7MP/iG8Rasovi0s765RxRik\nayqrnelIdeUdeUgP9ojznEOTGQB9tBiEGquu7dxw17fUSJ/bifDh2jT3vlLZ\nQIjyseAL2/dGA50eTDe1xtEimDTHBdPD0VpEn2zhzFuNxZLJhGIQ/T2YAiWw\nBd2Yruz9v9UQzsMtbYinFb5TwmybyWlrG3Jr4ujEW5xeNpJ2avUNMNDNqS29\njUK4PWsEgE1ndjzCdV3PaPhrxTMrcXR5IENJ92oPYdJBm4v5adWf3z21Rjx3\nt2uj/vadNvVc4q6BOe02AM7p7zcIbiDEKrV4ZQ7DnAW6YgfVifo6qLF6gRYU\nMAnSnHrRcC9cug8TRPSYsNdZ66mlkiFniqtP5q1k094kDFTRZfM3nUfW+PoN\nGxLFKxa04935Qox0+0QCFWry8i79PVytq1Weol/VqC76x+jFOeAL9lLn+q1z\nw3oGLIhJFD3xiZ13FQi4S3WNeACreub3QVG0o8x1KfKbov8GEscM6skDu407\nF5E0oM7NyrcZU8hTQ54TDNF1WVVSAeah/3jkb+aihzMCgkZyculZP2Vr2KnE\nsb0WATefZuOOg9Afx3COyjIKPgOiM26cObZ50OKTSN3+WSnBzOxcFqNaqVzH\n9571Z6jyVIzcvW1G6bDydaiPvDY3Tc0aJETqmgGJVaDjwtOughYuMJ8CY4l0\nihCJ\r\n=CIFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"65fc1ee152f3abef35713b70962e3d5b848a5e78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/rtl":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/shape":"12.0.0-canary.f705e8048.0","@material/theme":"12.0.0-canary.f705e8048.0","@material/button":"12.0.0-canary.f705e8048.0","@material/ripple":"12.0.0-canary.f705e8048.0","@material/typography":"12.0.0-canary.f705e8048.0","@material/feature-targeting":"12.0.0-canary.f705e8048.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.f705e8048.0_1624029946476_0.3108520602576774","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/banner","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.08d791f37.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1f7004cd95a049a4246a6d0d166eac658cd0975","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.08d791f37.0.tgz","fileCount":41,"integrity":"sha512-No8qJchtdrCcp4FaXWccIoVikyP5I7OKVICUYPLdqBmpRvU5kGFjJA5koWr+yh7wUfD1+1j+DTBMzW4kfoS5rQ==","signatures":[{"sig":"MEQCIF79RskOEREXGuAdlEWa83s0rxE9YNqHQmMO2zzDRFGSAiBHeFnnNCDp1iKl5OJrEtYZ8SXZIIydqoSTW1YlXBGFGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxYCRA9TVsSAnZWagAAzDEP/RyxDG+zahog0Xmta7Ad\navPX/3/OcFDsHg7rKw4b0jxxw9iNkxaJjiJScfaKivhgJseaYJapMwhX51s9\nXpDND6tcxrlJWPuY49RAiMXDKk/s4X6WiH1ipfP+f1fvEoTKV0L6LNCFdK0m\nhqu3/l4rob0YD0OE18QtEIFS1Ov6zxYuz750rfcozWzfEZ5xvUTlWhsNu3lC\nGILzrBHgMtWSEAxfY2oYKKafJogYGCaQ44cd1N0/46HxHfSv1WuLT4HSl2R1\nk42x+aMh0lohvPJAGCOivUhkjvpXEW8tcyMl8wP4GEYmIyrMLu1QDqh74yox\nre+5uQopVaHmCSQxiZGz/d1nJjvY/BI54b1fMcKMtI2uAOTUu8hVYrxoGLyJ\n2LudVKktLUC4zjhIUVOiJNm7NMIqNcum6GXhgVtyl2hPsQMIiNX/A/EjteF2\nssKNH2Sn6Pu3LsOS5nz3gmoFZxmXAmEExt95/uzNobygF/clf5S1vINS+gOP\nwSlyuTchC6myo7Q4ZK1/l3/rIKzDcZN6/TxXE59bIYhtPsWSKZ8zfLB7GQ/0\nq1h0ilo4VDw1A7858e3WmB1y/9r8G/5GDMAFX/Oqpag5WXIjKC72qNmWhM0M\n5KlQ5c8udOczvn+mAHlhdHnoC12m9NMUct9x5Rli7/N8EYgJ9Sr9rDremtnK\nL/kX\r\n=Jxra\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"854f301ec7183c3cbd2e62f9ab541f21aa6a459f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/rtl":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/shape":"12.0.0-canary.08d791f37.0","@material/theme":"12.0.0-canary.08d791f37.0","@material/button":"12.0.0-canary.08d791f37.0","@material/ripple":"12.0.0-canary.08d791f37.0","@material/typography":"12.0.0-canary.08d791f37.0","@material/feature-targeting":"12.0.0-canary.08d791f37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.08d791f37.0_1624050776317_0.11202116438624721","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/banner","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.e38d7440f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2ab1f237905f7b7dcae28779dc047c05bddf97","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.e38d7440f.0.tgz","fileCount":41,"integrity":"sha512-oMgilvt3TvzuxQHNZR7ZKnSoGxZQOf7F/xLE8Qif+7rq1dh8ElM66P0MJ5W5lgafT8N8Fm1cpDnziGfL1wtSbw==","signatures":[{"sig":"MEUCIBzHQU2uImjeY1bo/NXniQGBiWQa36BC0AaeMGxprHYPAiEA6wB9utaRZ3WRpQ2gwU8jovzrX5+uFCddAwOlsppVBIg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9dCRA9TVsSAnZWagAAxicQAIwPq68a2uLU96NbBZ4V\nDUvkIjdNX6t8ko6nMri6SfAAur9cW3mXhPBFq2Pqc//Xi54Wfm5qoz2YKVhh\ntM9WlVbV+0RGt0Rk/6Vh16gpAZSALhyk20PBER8TUX3drNFCtaAZUiRKkAQB\ngLDNuMeNWzjJB72oQMYbtt5pTRxXH+UX0kvl5FNqU+PLpwavgJC6gdSESdGD\nJUo8DL24RRQYStts0j3NpJkRJWXIHfT3n09Y2m/jlXM3u0wJy054Bgm603X6\nWndvKGp+xSX5HtIkkcjNGmk/kzHeJc7TcYtRUDqBQogVNdqejJsRsQOIidyF\nH4YpfKmmHTgtrlGGLDcpdv93w9EhpSZi/J+ZNYdlsZJAvmR9HNjOVHoQC9Ei\njGq1KF83z+X49x30sND6ZvFwSSK3laklVN5TNKQ+mdR48Ru6Q8ViwtTxSet/\naeryvg9M7dUw+5o2kIZMEH6s4O/yrUUcTTNu4d/IyYDro5Xv13CAXXU0vf4M\nXJJvi1Eyu2IktH+OOTI4XbVSMDYSym8Mr/+/gjBd2OEh3ZY5fquKo/ytG3Zk\nkZL9dKjLHcNrKekh6dTtascCLlwppX0PiyxgPOq2j2FRWY2tbwtyZugafXWo\nEhhAQyfRJH+g1FePJfwU/re7Lu1pXnKe6gRFmJRZw+5WfaYDDfoC/iZ8S3xV\nmg7c\r\n=rAf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d46835e968c827eb3b359624ebb85f8e3ccf528","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/rtl":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/shape":"12.0.0-canary.e38d7440f.0","@material/theme":"12.0.0-canary.e38d7440f.0","@material/button":"12.0.0-canary.e38d7440f.0","@material/ripple":"12.0.0-canary.e38d7440f.0","@material/typography":"12.0.0-canary.e38d7440f.0","@material/feature-targeting":"12.0.0-canary.e38d7440f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.e38d7440f.0_1624297308521_0.04274976307890599","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/banner","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.75900a5a9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c3e450fa3cc1a21fea590a7c0b732e4d9cd6dc93","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.75900a5a9.0.tgz","fileCount":41,"integrity":"sha512-iPIy7X7bi0a3BTfXILK0/2vmkA+O8KA8Vql6h+Xk0m4GZncF8RNW6wQsDlLOD2eGZSfX2X3zaVRpxnadFSbF1Q==","signatures":[{"sig":"MEYCIQCy20f30YnES6DSARoqDjI+56/wyUaPvxEPMyKmtbUJqgIhAPvA0zxRJsBez0uGJOFJ55UJ7A5zGJbxshkrtAFPfKO7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NydCRA9TVsSAnZWagAAOuMP/0OtpE+lzw32u//cU7e9\nAfhynSMaLb2WIVaJmcj534p6u3w6bVFN7PBhSvNQWo4WVHoIXbCp0sqczsGc\nt3u2IJpVqH4Vk4n9LM19d+Pwq+XajOwRQXib/OI07u5YW+ubJO9inTswmSwt\naCZVZoVLeMZytOB4fAlEv3Vonc0GOOdJnXdM7VCn8Hx4EAyFsIDxEUyByLGG\nbsVxaNHvwB6DqkjuYC5JuaggYz5r8GG9yeLDexDpb61JHHokHVyt1CVMOU7g\nD7gyy2FMDRZbCrvfjSwV16ftO9R9/o/Ednm//oAW4jIocCuua+SAhw0Aj7nQ\n7QgFKgsM6r6zD+V3DtCM3zcb0ek4yhchOnWPG+uHHKOzcBhtzRs2ZtLlw2CL\nQHRqq6t2kYGgRFOF80+ouRF51J2yyJZ9cMVBLvRWSfMcaEX+HkcLgo2zFDwj\ne+OvMnsPEJ1oIsEQk7Z3ImPvWeBjOb7ze6Hmguqs2TkxcinDd8tHpaEmAzK8\n86MvgMkeQfCPg8vjZkeQpEgt17rijqlNu5hvQO+H00X18gGM86TEHCF0d5WP\nf9+TFPRvpYBKS6ErQ0+4/IgC+daBXG17HoiHQuqQ1xjLBG2SD6F4UkyAjVTY\nfcGIIz2V4QqZdAtBZdmPZ6rLyPv7c04Ml4a8JB+FK9Zy75b5RK+kvmD1Hohr\n1r0Y\r\n=LUpN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f08daf05a41f44cbb5e5c07039e1e165d123c405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/rtl":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/shape":"12.0.0-canary.75900a5a9.0","@material/theme":"12.0.0-canary.75900a5a9.0","@material/button":"12.0.0-canary.75900a5a9.0","@material/ripple":"12.0.0-canary.75900a5a9.0","@material/typography":"12.0.0-canary.75900a5a9.0","@material/feature-targeting":"12.0.0-canary.75900a5a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.75900a5a9.0_1624300700834_0.5740330492833856","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/banner","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.33e6f50e9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d7a91adc3e5339e3c9ccd9878ec5ce6788c8161","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.33e6f50e9.0.tgz","fileCount":41,"integrity":"sha512-TBOOUw4N9n5YC1PRohcwax4W5SAFDxiMxMJ1G4DjNg50Qh4GiZDrZRazyyqP8jHSnwkqZ+sA+BE/g8ViilZx6g==","signatures":[{"sig":"MEQCIG7SXZbAq/ZuHhMZtuhgJZhuCaIIJQLlronCPd14QspnAiAPxqAAf1oIjiNt4tLqTQqpmEJPNHkR7lxFP8Tw94t7Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nydCRA9TVsSAnZWagAACVIP/R5ErC402duYU58b7Tan\nXetM0vqS8WuXAtK1r7clXXn4QwYEvOs996UzCYIUFroIIS17PLZSjMWW7vkU\no8xZmwWWyDyN04YKg9OWheyF6gwRAyMA1cVS+29Z/AIandUwlgK3WtxGUT0D\n5zJTtWZOsJIoAS4/EdHWWl0unIiByU5V3juA13W3QqEC3aNBkYWSCsbf2/oW\nYaIbLVs+dkkmRmkkyJjKkD5Fd+ePVkZonaHvz+Mk0tQ8p64us3i7b2Bfd00B\nFtSNoOj3gjJx+8DFTM+5JrEsVqHCS8bBdg8uBSNqkM5WdUBlmhrY7X4P3jSv\naEoz/6eAhp4gGqafM7HHNpOcMplOR97FdFQzVyn6TGCTdpHw0smsh/0ch+OT\n767JET8lyDdaVHP1YR3h+HYdgwhVg0t9Q4+rSdsZ9iyYRMSkj8Hr+udmj4zU\nCEGgRHJki5MTV3slaspDGh9VgvV/H5Ijj2bkumQR1oMPxgxXax68UpH56I9+\n1OVezjKa0YiBR2kSZqO3lHGUoRj/XQLNa7XzBxvbx6+5GyDu4vPnVspI1+Cq\n5Qc5bAMQ6SWqzs/FNIPScwUyl+uTXBPZqDpdChzrbaQ3OKMjCvT2ZZBhYzyn\nCBON7Cypo8iRcxvxfBLeTCJ2Hk1wQ1YE5+XHAKU0+w8ne+NJdPVTy9VA/szt\nd73+\r\n=aBbx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fb208c22fe558f863d851b5bda74038d5a3b09d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/rtl":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/shape":"12.0.0-canary.33e6f50e9.0","@material/theme":"12.0.0-canary.33e6f50e9.0","@material/button":"12.0.0-canary.33e6f50e9.0","@material/ripple":"12.0.0-canary.33e6f50e9.0","@material/typography":"12.0.0-canary.33e6f50e9.0","@material/feature-targeting":"12.0.0-canary.33e6f50e9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.33e6f50e9.0_1624407197000_0.8443612979277024","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/banner","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8c685301d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6546b58fd5509ef98c6ca81a0bfad5ed9fc38ad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8c685301d.0.tgz","fileCount":41,"integrity":"sha512-KKQn4BLKX7ltOI+Y0ok2fA5TR2O8h9G/TcY4urN8FKIADO2335DGPPmdk8pTCpYKnKMw6ba2ObbyS+UqzNwYLA==","signatures":[{"sig":"MEYCIQDrrYINCfjI8pTRoHKzPzW38niA7d+/vaVVVaf47RVSEwIhAM0qc5AqBTF+4gxHAokXB9nr5RfCWNr55XGouuXTfmKa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03yuCRA9TVsSAnZWagAAN3IP/0URI1N93KwyJthHjDtu\nfP99U5IQ54JfpvZ+/oJynHgoP4JoRFrBgy5TwOeth4OJNTg/iI8Ev6ldRWyf\nCvfMHpES7rw/ZxTVhaqmwomDJFuxb0lUCg7NATkAnRI9ooyNhDmw5pqD5Dga\noGIpZmSNLMXqU0kUOXcuPW1QBmTvw2zAF9Co+zlEKumbWDPWuQ3ClPmI4m3k\nOawFlq8s8fQR4bVGuKRshP/ptsNxfRWFB+bQQR1uf+ziWq/ywOnkAWQiOI3M\nKRCvXFC4TBU3fzXhJvV8olIUb8R2CQjwlI0oA7i00lUyzzN9A6nlD841p7en\n9JZGjZQ2BeQVlEz9TMU5/Bd8wM40zPgsRUJO8NxiKc0ZsCy5z8nO16b1iLEL\nBOctbdrKY/6Er8MKSW3yg65sr4G2VkLxFNCTITknzgaOTWFvuDaW0MugQdn2\nQGCHsGM6c6gvBjtWz3O3ZvT+aH1ct2CTLEJ0YJR+ebe8psMLosAO8+neA30A\nQqx/sQD+SDBrB/oDDnFWObLPrqnZ3gvyzD6oUW0jMneDMRLDqVFKpd/dUh+2\nnvYtevs0dizLVKM9173cF1i+S4DwAJjBY5wp2HHSXOkTuZMjbh3DgC45Ij3F\ndIA2aPTqk70a70u0vv9NokURYUy86D3eleaoWfmpFBNXUeL8oJRvHWGR8sGP\nE7ju\r\n=74O4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"43d0ab810254e565375b55ae118522d89b7e9254","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/rtl":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/shape":"12.0.0-canary.8c685301d.0","@material/theme":"12.0.0-canary.8c685301d.0","@material/button":"12.0.0-canary.8c685301d.0","@material/ripple":"12.0.0-canary.8c685301d.0","@material/typography":"12.0.0-canary.8c685301d.0","@material/feature-targeting":"12.0.0-canary.8c685301d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8c685301d.0_1624472749594_0.9189341396940129","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/banner","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.8c7d994ae.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a8657d5eb85f7263bc5f867fb942569dc99bccd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.8c7d994ae.0.tgz","fileCount":41,"integrity":"sha512-igdLGbaVd6wvj0mfA2pHZpYjyFimN4UEtkMBBBeprv22Ljzv8SLdiLE7ys9j2sYauT7bkByYVuLNqLqqryJsPg==","signatures":[{"sig":"MEUCIQCEnZDb4s8rQigCxmImXGuO3ckKHCDjsPbXGlglNzxkEgIgC4xhMo5mhbXeFyuEkl+Ci0I/MRSEPXzBlTr/v6Oewrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04tnCRA9TVsSAnZWagAA9OMP/iR1xMw1288tofbBRokO\nPQOJ3Axa702wUCfjTl5dcMpspR63oU7GqzUYzMAwutpA15FiZz8MOKPnVE+y\niZ+Y8J6xG51zGz+Ho1FP3LqQUxnDr1cpdsxFdSSQvMxNtGAZM8feNauKf9BH\nO73gOzLaU/K/jDYQtl+yecqsSCoEwRS4BpbUKgfykzapNHAqIIEqJC+wiwIh\nxvws+S42eB/gj6TU9TtDiZ+NsAnhMascfNBwXOX22SMWoRPhYW7GCDkuNwq2\nCneCf+hthP0TpN6pMGbIdntTm+YuxcczyefUIEiktIzsmWroNp5linKU5odR\n+X/S2LlJaNi3g/48PEJMrErawQaywO4wwwWvmSjkg41r1T1/6wZIdm4ne2Xl\n+3Mts08566jneigyHJ6YlkXy8cGtv3PRRiqXMYEsnGrCJigRFYnTIjQjJuHe\n5B1+k15F08AqkZk33iFPpXgCsVsFrYu2MM49krc4cXIVTLWVJxtH/tbdQilD\ntAaU110Sd1x/ESRqG+Iy/MJHCidnebKWHQm/eoTOXXmU84SnIuPeRA+BZKTz\nLat7ZbEysSL+WcSu5PQCiGOYiSdJ5UW5rJYDc/mNEwLRH83ldm+vGtZgXzu0\n0SEHEflaI2gnXcVYjmm6DD6fVQP2ROFYBxQJF3dVNUL2HMLsW2Fr4u2Ctf6z\nAbWX\r\n=HZvI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"85693f86d68563f451e95113f3d03a29fedcf142","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/rtl":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/shape":"12.0.0-canary.8c7d994ae.0","@material/theme":"12.0.0-canary.8c7d994ae.0","@material/button":"12.0.0-canary.8c7d994ae.0","@material/ripple":"12.0.0-canary.8c7d994ae.0","@material/typography":"12.0.0-canary.8c7d994ae.0","@material/feature-targeting":"12.0.0-canary.8c7d994ae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.8c7d994ae.0_1624476519296_0.2684530535432035","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/banner","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.4ccd39bdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"89faaf8e27afb9e7c81e536f30f3ef8246d7cd4b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":41,"integrity":"sha512-CERS2KMN1Ogvm8I3ICEeagOjRhiEQ9Fk755qUU7vMoZZqNA7xgEmqQE0iCLVoCR6ARmnhFYuG62O92oqSgzeVw==","signatures":[{"sig":"MEYCIQDScHlWZO0/smKHFaBgmeBoFy4sO9d6nbhNQnIgTWzWsgIhAIQTyD7CzZTKbq3ODAB4ozbCHThz/oCCB8jRo+vN3H1l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K/KCRA9TVsSAnZWagAAhzwP/iVMbRocpfqxXXS94/9Q\nExhBh0bPC+vcZlOlZ6M4gc3kcFp+nSlu5I2R155C3godukImY4YefmSeruAL\n2NhyYjXNgu4KiyNFUDNym5O1fCfYd+0apwtGYqtKltz79z64rlTuQWpBX0Ug\nx5EWxp9jsKCIAw5sCZkX132vuGf2L4xb3gJyQi01JeDUDs9WZm/S/kMQSgcy\nM3GKBG9OIyNuRAQbzTVq0wsyG/cDLB45Cnk88nC3DwnjJdfY/sd/K0n6xTpk\negChbtCU7tzepXOrdQYyw2KHt8Y9P9IzIh6mGudoO646eZPAxaLlJZXdFHID\nKte/pvyx6FfMRvQpR3IjN5TeeoFabzBZ/xsIvKVrdymk0NrUcs3WwaRym12G\nI+OfmaUa9jzShw9s4i2+lHBXKjs9x5K95uv4NT4gNmgyN1yU4+Zm+C5AlxGU\nk/lDQe/7wRmE1XzNg8KsBf+PredzNcP+/oVgrfUkCwpqqW7ybUDhurkzV0hy\nMTv4CLqEcMQI6W0V8hOs5Mv4nzV7zhhN4vT/nA2AjAedMdM0ovoiMk/f/XN+\njh2+Q/BWbJTUqScKmJBHCMK565XVd8tcxu19DISLsspL00pntcd7BWiaLqNb\nLFKdMUIqWAAf2R1KAVT/JvMUrDMIt8HCM4ORCqvVCSHJS8llEUmZCgY6po/h\naVJP\r\n=NNdY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0954a36f2cbd31614158e8425662a4969ce9c299","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/rtl":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/shape":"12.0.0-canary.4ccd39bdd.0","@material/theme":"12.0.0-canary.4ccd39bdd.0","@material/button":"12.0.0-canary.4ccd39bdd.0","@material/ripple":"12.0.0-canary.4ccd39bdd.0","@material/typography":"12.0.0-canary.4ccd39bdd.0","@material/feature-targeting":"12.0.0-canary.4ccd39bdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.4ccd39bdd.0_1624551370436_0.8503689371640435","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/banner","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.17553e9f8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74446b6924b81dfc856cec7ad149502aa965c5cd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.17553e9f8.0.tgz","fileCount":41,"integrity":"sha512-rIYOeF0yZRGpDX6eMs8jzTlp8dZ8qi8wbClnSwhB95hFCK3npD2nCYMgUAa5lj9Va3SdKU4/7JdtyO+5KSsVPQ==","signatures":[{"sig":"MEUCIQD7kpmrR7rc6eUYYp2MjklOrMiFlmrvpN5zBOqibnGuDgIgU/JxtyUL9TJGVkEB55ObP9fGU7NTH14o3vn3BzE0MsU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lL7CRA9TVsSAnZWagAAZH4P/ApBZ9mR8gGL1JwKi3Pd\nZjrnMx2EIj/LD3Pd/dIzm7bDVLxcNtvpDnyXLt9F/fRwQwog1D4paMj+YAct\nYdXu3Iu94k+6NTiZ/IeydDTuylXHMChuqAjwUO1Go/yOzlIqTJdDAYOLF8K9\nM1h5fq5SIdKV2mU89uwNc3rB2Kh2enxG33FQlBWup3WAlRKUrBjLJAHHLRFb\n58Wv6IU+OfMcNJI0pfmTjB2dGTJdIvDtqMHYzWpzM0Mvwb/yXu/eEPnWBJHT\nAvI6FgfRyJPp56gUdCh2GhkCGgd6YqGObO5v1014XmrvfVUw5mILi+8V/Lq+\nBuRCIvKalZ6DdPMm1UMstTpFvbrgBa8PlmeZyMfrNNmJYwBGKKpyamcI8iGw\ndvxpqSOJf/syGix6oVjI3wJeujvF+QiBH6utSdje+CDBzz1ot92yyGz4wGdB\n4Wnkcw4j8YtVe+y9G0w1EW/IjNiqhOX3zcRIL96Dltobm+jbFZxlte611aBM\nwmN8WcxUocq7tSIuReVokY53ZtVDUjs/hxuZx6S0GBSmvm9/XIVHDbgmwlYK\ngFw/Ly5UciPhHJ9NItbTkgeFRJKR2kyDGhrNd5VtIrqzuw9T4ycf7eQ0L0iB\nGEmQ3w/Mdty5vDl7qEuM4kkHZR/KPpB7O1ZhjD6Yr6FirrtfPQ4VlXz1bpn0\ncEGY\r\n=I4kX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bbd7dc5fbee09c82081517ffc14264d4834209ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/rtl":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/shape":"12.0.0-canary.17553e9f8.0","@material/theme":"12.0.0-canary.17553e9f8.0","@material/button":"12.0.0-canary.17553e9f8.0","@material/ripple":"12.0.0-canary.17553e9f8.0","@material/typography":"12.0.0-canary.17553e9f8.0","@material/feature-targeting":"12.0.0-canary.17553e9f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.17553e9f8.0_1624920827287_0.05434613444350167","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/banner","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.4c80072fd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc0ad69e4c3afa912333e5367968e80ce30da8f2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.4c80072fd.0.tgz","fileCount":41,"integrity":"sha512-xQFsQ+KoqiasGzjv3Y5ZEzUT+af7HyJ4YuEb8N2pr1L3KSVGgqx9yvqDaynehB2td/JVtcUuEp/iOIt5z/MBsA==","signatures":[{"sig":"MEUCIQCkWRqIr+r3hCZD0R3uHj+YUoH+/fd47Aoh1cnGpUYB2wIgZPQioXBcc4KQToZRQJ9jIiWtW/0TObfqNJM6o2VTm88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22mBCRA9TVsSAnZWagAAwPAP/3cFBZv3zP6Z0wpMtzdl\nVeXzmNJwpQ9AvsamuRUEYhqdA+lV3fRkFt30EsjOdEG7Vrv0pw//3dxSaL2q\nD27cjxxnZhV9rb9xYHT0Xzk+1Ncj8ZURW8rZCJhkrbag4LcvF/e0YwXOleUi\nl4+azbS3tAhkoasAVAcUfc35w9Lilt9TJH7PTflJ/8NgUlsfw5orTbUqtLBr\nfdTyCn+eLMDXAVqyD0JLcecFZklOcnb79KwYcxXCUcRcVnMDxaqxpIri4rCz\nk7d278OeHri53G5DFqPUZf9zvxo35IQHbIRIDfqHHeNVYoyMLk5PVmf8vHP+\nXfHDI0tyFsU2RqkDEinf3ID/Iyxww87OmyGuRo8gK6J3omXL4CeKazNYorMm\nKOpU+DlIVzAHMJaY7u0fgVtVV1+OezbVbLIlsUEFiOnpSKJRdYHFSjXCdTH8\nc5eg3gWSYj+6D6ymoLZ94Xx4t0bMe3iNLTueVKqNassGVgi/qn6SZO17cgCK\nwGjtanhdOwiRiaaxWfnpzUXRXcaZzaW1skeW4P/5rUXFn3CtlTAQU9tOtulf\nvrg+MBB7CkKgZT3Lki/TAD+8uXAACk+pOo0L9Qg5kd6jmsHZhlGoIThhu6UH\nc2MJO+erICUqdq+934S54VHtYGEQ4FSFYNhXK9XX0c6sD+DYO6U0LlYK/luj\nVEEC\r\n=MEQB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9f6d10da43c6e0fbb1366c1e37fbca58ce00dc12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/rtl":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/shape":"12.0.0-canary.4c80072fd.0","@material/theme":"12.0.0-canary.4c80072fd.0","@material/button":"12.0.0-canary.4c80072fd.0","@material/ripple":"12.0.0-canary.4c80072fd.0","@material/typography":"12.0.0-canary.4c80072fd.0","@material/feature-targeting":"12.0.0-canary.4c80072fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.4c80072fd.0_1624992129188_0.5544401558375189","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/banner","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.796811db7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17f49ec6e2bef483b614e172f2e3309541a12c2d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.796811db7.0.tgz","fileCount":41,"integrity":"sha512-aOPpiUuz4n8pCJHBvo/sQHZ27Cm236ReHAnIWj7riRnJjO7mrjoIDOesQCgFXIIY2cHsP1iGJDEMKyI2g7zVEQ==","signatures":[{"sig":"MEUCIQC0wY7Msr/vNp0Kn0aiot504SrDgTE8T7iEBrzsE9JKBgIgDIgvsxB38OTcblRMITsAT8qtA73ExLfJ48L45odxAbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QaYCRA9TVsSAnZWagAAD00QAISV6+iYL2cVjYFMHkRq\nH6q0zf6vSBR1TPEt/0dq970ivoiersomFkYCNes76agkNwzBZTEh0oDhbyFV\n0BO7em/Ql/vC5e8ddAtUttrgVTW2w1SBiLMP7cRMeeIMMlVZDM6YcRLcjP00\nOibIfAovrIHrBEdN3icokgw/sVpPTJgjSIAYAkfI0ogBn7qpoymIV+VqQqIy\nFgFgqVWYNACTuoe8jZjq9HIP1//W7TUMu1ZOJucHH5Py0J3zYC1y6Sau+0Ls\n11AsCJI3GxM53gHGjh8HGcavMIQpntuD/9ts9D1zC1cSJi4wPjgWxFdA+Ju0\niWA06+PqpL1WYRGnBpG28b01kKhyhUImB04aQfHMRWCJj9G2Ey4eT4rzPI1y\nQJv0xtakYH7pD9WT88al5dT9mDCFnew2LdetZFzMyRJJ8Q7kLj3rkAWHBxeI\n08O3eX//NzVUsCV0YPALDYcDnwljwgnZkmWhZE7j4YKr/ppp0Sj//B12TCD/\noKxlklq5I+2EUaP07LtjR9GMMDLWjoeHpFWf9G/dpTPJ4e+KWN8TAFOzfK2Q\nQY2z60lH4tD5qO4zOp2C4FOJDJQyQ4ZbUWNbLbAuRjZLznzdWTNunzCZbAHm\nZ38K/wB1EutnMGa3I9Gdrfa+VK9y+jqFLS4Xe0niQEeNbZ6fws3fbEsj/97U\n9KvL\r\n=7Sw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b02de77dcf32bdce7d23406dd395390b35e386e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/rtl":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/shape":"12.0.0-canary.796811db7.0","@material/theme":"12.0.0-canary.796811db7.0","@material/button":"12.0.0-canary.796811db7.0","@material/ripple":"12.0.0-canary.796811db7.0","@material/typography":"12.0.0-canary.796811db7.0","@material/feature-targeting":"12.0.0-canary.796811db7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.796811db7.0_1625097879715_0.23241043183169263","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/banner","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.70e1efdca.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf371d1211f90be15185814db49e28846d373e63","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.70e1efdca.0.tgz","fileCount":41,"integrity":"sha512-zG5iFbqt8wIdvcOfdRot+DmDT3/50279SJw+KGGmJd7tGULVmuuS9gh0WOSuvmx+9zJOqWr/1NhmSLhtunOA4w==","signatures":[{"sig":"MEUCICZC/piNTV3nPolh9N5JO2pfy3Cwyw8g0KTz1UeHGqP9AiEAz5bc+vrgci5pScF8uieDXSPm7sJL2HubG8qQ3Nnpqgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZoCRA9TVsSAnZWagAAzT4P/1h4P2AZhSvss7KvvFW6\njE9+GCpG8CFDJled+Gl7TZ4B9/4uaj9VJO62xEN9ajatUkG7JAJuebSJDHbx\nw72brtp4K14NTahuTvb00l+mmRQAoLRZnJXAy/udv0sn+m1sO2pWEUnKVxEm\niOvu6T2CiQ+O4OnWfBJcd0HEFBpBKLj37CZ/uwiTugFdrYiz/hEIec6VxyvL\nYBccDDfRrz8dYCIYIKw8p2rQz2kiI563/hw6zv32jeYQfYcth+u0MRuLPcK5\nSS0kcRFrUqwcK0VmeD4e0/W4RYxeA9DnT9Y4zRfPO4ZdhhdynYj/K8DPqWdc\nUG/gBudIdjWpS2LzyWJ6R0TfLC9TT8fuEAze5Kp8NBj2M8RqLoX/5TT4d8yH\nu5UJ/PyuL7SDq9UNer29FkG/k1Ak/rHPmT9hXJVH0AicMaxI072xM8ovUUo+\n6uBLN5w8RsDHGaYCurbmBuDh3UPTceaY+1VEZmVkDdjC/G+9sKSPDIn/Vabi\nAhYY6GKCx6+0o4m+bhwJmWYeU0rVUmWaeXzvi85WXrlZwzXzT1JTV1ViDnYE\nvi/OTURnKcE9Fj58pA2/kTYvFiEa79hNJ7SZ0dkjUxRS60QBhuM9uF/EAE+D\nlZhxmqdJkoZwX6uLxjsiiddqkYyS922Tn4E+3o6yI19zD7XTNtTW19aTWems\nXgti\r\n=NFVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ab5924ae38bb3ce40d3b1c303e1ae6d175b844ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/rtl":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/shape":"12.0.0-canary.70e1efdca.0","@material/theme":"12.0.0-canary.70e1efdca.0","@material/button":"12.0.0-canary.70e1efdca.0","@material/ripple":"12.0.0-canary.70e1efdca.0","@material/typography":"12.0.0-canary.70e1efdca.0","@material/feature-targeting":"12.0.0-canary.70e1efdca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.70e1efdca.0_1625159272311_0.8916639549834853","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/banner","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.435866d32.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"362e0af3b0a1571f06601bdd080b79702f60fcb1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.435866d32.0.tgz","fileCount":41,"integrity":"sha512-RIJ6fAxoGaRq6nJhC79MUxHzVAXHIw42ugGucZmO/jqhy1NCi3r2N7STzpJcXWwzWqXOTHmHI4Nd1G+raej+EQ==","signatures":[{"sig":"MEUCIHOPWCCY4lxCdGF16YlpAHNr0oxOA019G+IH872La1GlAiEAt6vvJbKeDoIQyYs5QaVZ6JBOG5F0t1gIs2nFX4JAoyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31lhCRA9TVsSAnZWagAA6l8P/iZG2VAUNPTid9FDP/NM\nzKya3nRmyjynFo2d7Pp7SVKx5oubgz6UFcfEv0mzU2IM2OV6AbxyKlQFVcwu\nG9gTIXBjAPquuq3yB9ddNfuqGD5oy/B74fVVw8OhErjWaoADqSwaup/Fu15X\n72kyW8pcuEb+shm+L/eptYvrukbOwJd4/wozL6Xdp2BEpuKG6/L4/pnwYBZl\nNmh9dbY8VCa3LQZQo6mZeifo3o3Gwkre/N4reX6cTsPC7MbcZwHUpZFFAiUB\nF+bpPOyIiu1vh1eVK3fzPChdstlNDLytQTOpaX9Wc+3ktPbMioZr/5h6s2cO\nU6vaxuD7f2RcvUuq6DuoIRI1vnTxz7fevKORgVFVQwADMEYUZyX7UyAhUMNU\np4LsUUMtUQ0duVvfoKChCNlUSDJO7ylqB9cN82ZUI0CKJlS6G34mwaKIduCr\n8CDZy3gEPq3YXIIWBnLCE0LF11FM2zpH0I8SrpwmQQZ+E+EMdYY2d/C0NthZ\nZhn7onx4Dl73Jqcx06ZpUW1i2f8DHCf0vKdUfTakoP0/yAWyqVefA7nDvfAA\n8xzWVS27cjKLbWXotm5egLCj6qtCZDut/v9RGRCqVTUix6cTVLEPVP+h11HI\n+zWMtlSWPswFgCMqMQChLsxrjSTSQqDJVhj7chwNRyOlm3kYU3tLtRVIdAUT\nrAlR\r\n=kE59\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ecf68c368bd1ea5571aa4da569d6fe6c4b8b8caf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/rtl":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/shape":"12.0.0-canary.435866d32.0","@material/theme":"12.0.0-canary.435866d32.0","@material/button":"12.0.0-canary.435866d32.0","@material/ripple":"12.0.0-canary.435866d32.0","@material/typography":"12.0.0-canary.435866d32.0","@material/feature-targeting":"12.0.0-canary.435866d32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.435866d32.0_1625250145231_0.22414745307734396","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/banner","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d0f9f3f2e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3106538199147ebe1d47a372dd3b0d704deba46d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":41,"integrity":"sha512-0WfmJ6r04J0VYPaogOnwKVKaLBwqdramplt47JXfpLIKgy7AjroJiBS7LfjjvC+3v2KqhTeMtxTSdHjzOHGIqg==","signatures":[{"sig":"MEUCIGj39m4jyY5rUEZA3o4Z6uJL0Bm02rNGPzufJfBcywNTAiEA78x1hxbWCgFaF0MFcbMLbQl8plY6VORhLvKZZqsQDPI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36jPCRA9TVsSAnZWagAA7GwQAJwP1ACG5MlmpAzUH5sG\n2SuX31unaUoiKbnU8y686dbrv1PvN8GkGvCoIhHO/o/cKY6ES8ssZFVwPD0U\n51b4mez3ymdBRwePbUatcknFcwWq2hnnUcxqMEAegDEbBagOJK0om6tTpGxN\n1TUiHUfi3dUAtlt/TBE0i0oQiErcE+j+WB6KvNHzcbWkxYhTHLiSD2ZMmW8G\nvU2lLvODKJHioeymWNYfXH+UqvycsbDE0jZSnKPRp9D+Jwd9o5jS43gAzSqF\naMb3LSpR9BpCCfgckQYP6XvlZ6oL3BLZD1x1oHUITt9H717NlwvsnS3+dW1A\n20HyK6tQejXgDKqmejwSowiQthUsukjDx8XrSB/hi7ASd0+YQ06Cx+n5x/xh\naQqL5KL1zE0rUH7ExY5c0NPr76pH0tdfwS1ORnubXG/AjhYFYN1TzI2+AkJ2\nZRMyS3rz16XA8xa5vmN+YNwZBQvStizZidETKPnyFrF4U1ZC8haTUbBiXrOf\nwG3XgOwJvl63cUhFca6rDGId8GfzN9DeaIVyCQnHBXgOPH0Pn82vXgHwriQz\nk590a7qtdvGGJ15ZjjBGVy0bWwaENOconk14CjCEeUcyDcejCmAipUAWuv6X\neRwF9H29FcAh1v/1Ei5RHzBV8nXsOWUwNz6DCTcSiGTwQts6ACidhXhAkHBv\nRNeu\r\n=pikM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ed31c78c6a84cb24353ffd1d406693496f090e29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/rtl":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/shape":"12.0.0-canary.d0f9f3f2e.0","@material/theme":"12.0.0-canary.d0f9f3f2e.0","@material/button":"12.0.0-canary.d0f9f3f2e.0","@material/ripple":"12.0.0-canary.d0f9f3f2e.0","@material/typography":"12.0.0-canary.d0f9f3f2e.0","@material/feature-targeting":"12.0.0-canary.d0f9f3f2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d0f9f3f2e.0_1625270479237_0.34027721703121716","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/banner","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.adeac0549.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"83b3b2535db3c70062525be9a9f3fcb7866b8c87","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.adeac0549.0.tgz","fileCount":41,"integrity":"sha512-8quorbJgezukd6MVT4subqVWsZ1lSwpmwJ+6HDVX7WWQuTxVjyEYrjaVlR3ajdFYoO1kRzKrIOjRpJsJOBfxUw==","signatures":[{"sig":"MEYCIQCwRDU63aQQeWSCLnHKFGr2EVVnykIzL0fQEEeG6NwSfwIhALEEd2rmL/j6XAV6iLojx5qBFGS2tDLmG76POFtuwkUN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xWBCRA9TVsSAnZWagAApjgP/0O8/HQNCeglDEjsIgKg\nVLzu+dj9LHiwXk9oH5vPJsZJAuTnk5JrQ/mGhRHDW1Kozi4T4iDNFSsz9H3v\nCgkL43ZAwA+6UKZ7sHGeSDiegUzwfMYOTs3lWwuGhlzSKLRWCpoHVSHXlhlr\nhqADVTxCnd7KL+b3kT5eZsgdqopTfXrieRFcJ0IX+RyUsdnCp52xN0IKYU+w\nzveE/BDbnPkgzc3PzIXz9DFepsu/VgZPDhHYBcSGrt2R5HyWJNiX8ZbhuSYD\njL0igsqRSAA03+HR3q2+/s5mMi1VhN7XOLu+G66L/YoyKxOkDnJZvIh18qsE\n65wCbUGoGPsN01qcpiqH6nBZb+njK3borD026qpor0Tb9fbCFOWelgOlJbkH\nY9qd6gI745vT+d8LEIaSq4lM1jQ+uzXXjck1zge4Y08GJyePeAi4UaYajYyc\nlwwiYE1mNBz2NpoLUUz/fDtQpMRcthUNt7ASKYw7yXz7vzfnqC+mjdBQmXqj\nWKqKm+VxabNCos9EgGGE73EsVFbMcBFYFV3lduii1ESGTeWffxcAg45Vb23q\nqZ6EMhKYkhjZ+Rq7WwM1bDCVPklJaPjZ+BT45inFOID6vyg33kXILjrbZI1l\ncxvXy7B+FJNORpTFvzv5wV9StdGCQKEaLgwrUHoxlyWOILtW7IX5fWVWBHju\nsmYb\r\n=f/C8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a189bfd7e13b17660ad97870e074af0ee245e36d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/rtl":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/shape":"12.0.0-canary.adeac0549.0","@material/theme":"12.0.0-canary.adeac0549.0","@material/button":"12.0.0-canary.adeac0549.0","@material/ripple":"12.0.0-canary.adeac0549.0","@material/typography":"12.0.0-canary.adeac0549.0","@material/feature-targeting":"12.0.0-canary.adeac0549.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.adeac0549.0_1625757056561_0.1588669446375821","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/banner","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.068fd5028.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29ec8be3534da17662163a0503534d70cf209bef","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.068fd5028.0.tgz","fileCount":41,"integrity":"sha512-+ecza70NcgCwrMkk6Uvgn+COX3dpSVMFDW18Ukn7eMPxHrOJrbNSd0FJaCPuNfhkDiTS0kIW5eAfIY/Vutmvdg==","signatures":[{"sig":"MEYCIQDiBNfmAjYcJFT4QADhhJ6qgN7PyMeGvRkp6Wba3iy4KQIhAJafqR+gAQ9/NEVaujQ444tko+H4AsyUan66zCLR5jeZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xeCRA9TVsSAnZWagAAQiMQAJ2bti2dQmtNG3K9G5LS\nGOj9u7PwK6NXf+jbyVIKxB2IMsSKUuQG+ONaMCKJF0yxRU08NDJgldfgfLP3\nicHbplaVaahyfBtNpY8a+BfYRj2kJTDSpoljY/bqYV8VcY1hkVptqWimh5y+\n2LU07cvYgn0Z9zMPTFK2cLHT3zYCuLzXxDx4XJ1IkbDGBXkh+uAs3hW9PciV\nFKNYwLYGR1U6Sjba4Zr9WYvgw9r2+20mgXSzsJgP3cxem/fLZHZutVcT/7hY\ndZvULrqUV1bhOjnHhxN2VJB1Yv8ou8axaalF3vVZm/ct8QtAcQjmW1rTY19E\n8Z1z80jy9kXEMSEkqWhp85x4X6u4a2SpmcKQjlN4IAKaP8kJO3aJvvSyXsXJ\ngaIKnD9HWes2qZKO4eRGu9qA2JrM+PoCrLho21lgIFuBovrRSXNA5vZCS0b/\n6M/MBaQ5ymzHdEKhOXczUsogcR3oYQ3lcpFM3SVWP0VXgJa/XWa/lp8QG6fR\nvHn7iOgp18FB0wgVHUlrB7exVFCKEi22E2er0CIHghDPcpjbGEOZPCB/LHA9\nxgLT32Yu0o22LHSjQZITIVuG2UVPY/EyQ/1qpqAeQ/hxU3w5LcFG1lcnSrYz\neKlHYQIhvsuSQSqtRXHgffvsuNFJWSbQbfuKjaWFySCEOJnbG7g8VO+c8RWy\n86/I\r\n=rIGi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"daf6a798ec3c54ddba492f33c939c41a8d88655f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/rtl":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/shape":"12.0.0-canary.068fd5028.0","@material/theme":"12.0.0-canary.068fd5028.0","@material/button":"12.0.0-canary.068fd5028.0","@material/ripple":"12.0.0-canary.068fd5028.0","@material/typography":"12.0.0-canary.068fd5028.0","@material/feature-targeting":"12.0.0-canary.068fd5028.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.068fd5028.0_1625771102412_0.9522086011644042","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/banner","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.5dfec7a14.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33506f26bf150d60ae82f635d68c1d0d29a43658","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.5dfec7a14.0.tgz","fileCount":41,"integrity":"sha512-cBaKhI22+SXilh3JtmxWlOfbDBrgBGCfEMBgVxXESLugBd9Z5PiJbSWH3a1RBseqjE5PXGxZEwggtn9d/mAlVA==","signatures":[{"sig":"MEUCIAUl6qrh3Aurkgjl6eKY/6ha/7NwbHRB0FnbxsUhn2eYAiEApTvMQ4T4KdIGYwUxyfGCtQGiC4cWC1A83ZSPLCGAglk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KCFCRA9TVsSAnZWagAAxTsQAKC25QsPnVVVU3QUtMZ/\nFPCoxKn8o/TAubPu1X/Rqk0t5+c/h3nIzcW/kS2UIos3xZx3u1nmT6EbycLd\nk57MtX6xPD82jdYdkY/cJlJ8HT1so+yUCsOmaluJ1cNRiB3JUqc4m5uXpYdT\nPWvPsvss/14aHmb38AyxIaHjOUGXwY38rb/BnXYtejnBOsjL1DJATB4o09rW\n7b0AlwpPGvNKoBRtiklngrgEZVUkLk7kbXRvlF2TqL1awx9PB1E3x1GDkf6D\n/Y9xYWHBUzDz0fStgnNRKF1ydzZCzsMBbuxg/obeNGGa3LbFyuiFhV1wH1Gz\nWpN58VMbOHTU1aBdgiKaX7c4bNpPW6LDNH8wwc8pCN8gzw6S20XpioDpiFEg\nwfR0Uz419xztUeQDElnra8lRP3k9K/vc+RsdEOolZcOvsvzQciIKgNHBXDii\n0NbfdrjZ94237JhutfTCSbBicBpaMPF+rhJAZTwkOc14Bbzb6aY9BdvFZJv7\nzI+gTtVNXWv5EIuRT2vJyq1eoN+KeOK915n9ijBre8PcjcOzT28qtTrqYlPz\nS7aG8v/4wuSTSaeDoFITWTvoC/S4+uwiq7/BNNViBMJAdc1CyoRNS6AHQFuF\nUNqtFiCWev/usxHW+2oteUWVH57Th2cbPEdNv53QDzeKg+I5Iv//QMYS5rwZ\nm2bu\r\n=tJti\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7295656b25be2c03cf7ca7ca800e7dbec4d9b531","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/rtl":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/shape":"12.0.0-canary.5dfec7a14.0","@material/theme":"12.0.0-canary.5dfec7a14.0","@material/button":"12.0.0-canary.5dfec7a14.0","@material/ripple":"12.0.0-canary.5dfec7a14.0","@material/typography":"12.0.0-canary.5dfec7a14.0","@material/feature-targeting":"12.0.0-canary.5dfec7a14.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.5dfec7a14.0_1626120325313_0.4451871954267206","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/banner","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.07a73750c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f5c9aacbaa4647786e8ccbce89a5486ad6643d1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.07a73750c.0.tgz","fileCount":41,"integrity":"sha512-ltCxslHGTC/DXgQqDwub1v8MxyOP+r1Pw1lbNkJR7dU3/evAcfGShMk9P3kkcdGZXvKkwIjTw2LMG34ZuMFTDg==","signatures":[{"sig":"MEQCIEF/eh8TWMhlMxFPcS0XnRr8HURihoRIXde9+C/2dmMuAiB2KrdiE49+KOdKTA895JulXpXeXKC+ZLph3VHRD1d+UA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KWECRA9TVsSAnZWagAArRIQAJFBFgYG1malCmINVCHl\nLLu56LESMMPrbUn1qftSR8IS3IBU98SBWBEgMsD8tXwEVeAyCtP+i+zVMh/m\nDU7ClrPySTCk0QsG4StFgM77YB0u+1rbqEJGrHR6f1VlTLemOWylE6SMfcpn\n6RxI5gV3A73Xo57C68N/4W0H8RmzOsQFz48oRSeEz9VT33dwJgtQWAb2TXkg\nmNGFFglgg1+HVxsGZuxA9sv1LDjdsmamP5fI1ZeBt+zbcbW6u0rGrse8v4gW\nvNBq1QJ9ItW42KIBvPjvA95RROov+rzOq5pMMEdc0ASUue6hUwEwSyW1sqes\nBsBF1zyfCRb64rjC7vXVDA0r+haH6KlAuGRF5BQFxpizmN0wZhD8Eq9/Pamo\n4smMoffnaNs0SJPX+PqIJfBcQr0gjta7URsYdTpo/FlkYgBmDwe22pSCSaJJ\nmVqfOp6qyc12tfHd+/5Zy2Ea391X9+ZLlVyulKhDf3iejWCw47vVLG+wQHxi\n2A+hVNVNQv09EhrtiiiwamikFc/8kEVvqQlTuQsTgGO21qYTK0j0moFQYreM\nsRWuRbZOkVBG3zU+PNdbVO44ltcj4h67/RbIQXwl7MUzusvSivTf0ZupkFTb\nb0G3aipQKTv3S1gIzVM5xRTkNspmcWK5BYsf62+lsrjWQLjLIC1wMOFPIFIU\n8/cg\r\n=BFNS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3534c8199752b92a52696d2065e73b8e4a997195","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/rtl":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/shape":"12.0.0-canary.07a73750c.0","@material/theme":"12.0.0-canary.07a73750c.0","@material/button":"12.0.0-canary.07a73750c.0","@material/ripple":"12.0.0-canary.07a73750c.0","@material/typography":"12.0.0-canary.07a73750c.0","@material/feature-targeting":"12.0.0-canary.07a73750c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.07a73750c.0_1626121603300_0.43066844168403606","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/banner","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.3e4c6dca1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55724533fec97a9d63f357a4643b1dbe6cd8426c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":41,"integrity":"sha512-3S7GFKAGr4itFsW1suCXjaYZuLnJc+4QmD2aMivhzNnyP3rNzgl2Q2ZcIEpuSCoUdJb2Wpdk5ajv6lHugXD3eQ==","signatures":[{"sig":"MEUCIHtQGKDQsf4zch6E4nRC5jgiUHySFmRzaKdQmhaAFIvpAiEA5lVApguPMn40ytxJzggyPqM4+OEJZUKJkaSaHIgUJqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PHpCRA9TVsSAnZWagAAXc4P/1mhtFooNMZCH5+ioR/9\nb+rGIUr6qNSSvfKHi4luStC4WLojrzvHVwSO/dciR9HFIEDj9ZfbZDR5fRea\nyUhmthpjN1kD/hIMV2F+9W+KWYBLCyibyeW7Sh6QJwhUWqheDD1E1xrpa2g3\niWxmTaukm8tZFJVeOymxEz1vaNSGTAbfpt31JCnFHLVt5F8UmTFwP0UaL7s4\nMHAAr/NzgUyDRe9H55R1Vn8y+0FgWNzldw8VJaKyuy/X7I4DdpUtsFrcPaS9\nUiFKOnhG0JuRoZ3XTDWj13HvKYwfed0QPvdnzuLtzOQi1538YXITLDVWMzLZ\nQWjCCE46ABlaw/kBUQ0YaSdt+J2OzqMd+X4KZkdV4mVNXOoNWUI1RROJOP2g\nyPmK4MnG8PNmBtirIHTcthqsczBYdWuxiCXiEBuwbVCNhtHItD0PslXXf79b\nHaJdKbSH5fp2aGjK4RDXU7Hp2R6eDMOxhojHMNedagIiTxPgDTI2WYPMjEt1\n9ZdQ2ewmNFJ/7XGsxp0A1ZEE+ph4/p1IQXPiimyHcsYPvN61B6n3J/TbYMEX\nEw+DuS11MzmDKXsAbGDKafC+H0DKwbpOTcRQI1v6Q0QyXcafTZ3qHOlVm7Xy\ndSG3GvT5BqdelUrzbLrh5brY780gsFUOqKQdZrpElOvnLFW10KMqXast5rNP\nRYrs\r\n=Fcev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1a6a8bc529062b0303c0df830b36d3110a389f4d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/rtl":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/shape":"12.0.0-canary.3e4c6dca1.0","@material/theme":"12.0.0-canary.3e4c6dca1.0","@material/button":"12.0.0-canary.3e4c6dca1.0","@material/ripple":"12.0.0-canary.3e4c6dca1.0","@material/typography":"12.0.0-canary.3e4c6dca1.0","@material/feature-targeting":"12.0.0-canary.3e4c6dca1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.3e4c6dca1.0_1626141160749_0.29138166990765146","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/banner","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ea77795b1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7b712c51369208704473d79cebb11a795dd1b1f6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ea77795b1.0.tgz","fileCount":41,"integrity":"sha512-G0EEYXC1GV+bugpu+CtVCkbX88d04gLLYiPhg3z4t4o8QB59X+cxhcmV6BXiNQmK1rdZR+18jF4adG7gug9hkA==","signatures":[{"sig":"MEYCIQD3BiCA7ChItj6PTEPlCM9QEv21JMDOVR80BlAHqevpgQIhAJFmymUG4TfvhXBJ7gBu/AysV2tDdOkVNzN5gLQXA+ql","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bZQCRA9TVsSAnZWagAApbwP/3FBrT3smXQIZJKZTvGU\n8Af9XokeF7N7oQ5niw2Yxi188CJHRg1kG1WfZLCCXZEBICvoSB8PTDvyyL2D\nYnTMhRZK/wakytoxRgn+MmzpLms+ebWVtqv5y7QyQnsLplXwMKIfU4HDhne4\n84ZAOHtMA42RyezRwIHWnli5ipB5uaw9MCHZcRBO9D09KSnhBoQl5czVEBR2\ncGYVl4psoaU3IIeXyhbx78TtLkNNYG3ROdZguk/nSwyi31H4ZG5wBMszLy0t\nuEPN31Ohsf97sOIsCJc9Ksj0jYbIfkeCQ9nh3elAp+OKyR8d7eMKekYWrlJ4\nbDoseL7tTYrcWYqZ0rFhRgAo5Eihe03PAvkgpsmxMCwUvu6mX1z+XpDY8oDI\ndsOy0nkDmyA9uR1zKgYtOnGRwAGRnWXM+/nuIg7wdF7R7WC1n5uCUxGKbmpT\ncv48+jgSgDRq6ShoN1T46o/Uo67AF4ii7IXWJ7nZTIgVd78RVo5hDHRtnWBK\nUl2LFkq2lwwWkqmkn3OxDue5SFHkujuae5aK5frX51+6/BGAHbDj3Jw1K4Vx\npKibKfsKT2WyS/KlXrDN39vw3SbPTFS2Ar73KXR9rxaJndkvvJnL3tZ6Q2pR\n670F1iSgPyO1OqeYnunwXfNxPVpjND5/677KiwdiKoY075EhVjHkHFMZxeRg\n/+wr\r\n=yD5u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"830444e6567decdb85bd9b22a92d5f85b103f107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/rtl":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/shape":"12.0.0-canary.ea77795b1.0","@material/theme":"12.0.0-canary.ea77795b1.0","@material/button":"12.0.0-canary.ea77795b1.0","@material/ripple":"12.0.0-canary.ea77795b1.0","@material/typography":"12.0.0-canary.ea77795b1.0","@material/feature-targeting":"12.0.0-canary.ea77795b1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ea77795b1.0_1626191439837_0.69177574964182","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/banner","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.15a179fad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"081069724e65907e209459481ead2e04977e8aa4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.15a179fad.0.tgz","fileCount":41,"integrity":"sha512-8ZmNi+I7NLzUBD7nvlAs1rQeMZQl9k1hfUy4gs5Dv8KYUlfb7iB3J3xKLg73BIBPcOuF5kmd+UMJJVBYm3pPmQ==","signatures":[{"sig":"MEQCIC3OYj3CS7xFLRScFnfCJgoOfqpQxir8nGAl+bVw/9kAAiBa5FUuz1Xqh4VWlSI6oRGwPDD/iZiqdVof+wWEFB+PZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dcpCRA9TVsSAnZWagAAs18QAJJTSykz3oIg2zqUyCPv\nyT8rJhEJR0VXgf8EpsyCzr5mduRKulF6nCtJwy7BoK8h3zfxRRWeS1g1N14C\nPYaEidf6WZ8XV+sGSq95IEiLIOCiu1U4KLbIuSEJ0CXBFjWzI3LYP3wRcO4x\nb/uQSIA3ZK0fyX+oeVSdovHM90kHomW3Nwh0sho219+9hfpUf2xq0t4l1DUl\nTmf5My49xRQgT/3a9usir0apvsG5hJ1uEN0lCbcJQWM3bbZwUS66i73hqWte\niL5eNpjAKahkcJfAj5TK1u51Os5PVDw2k4UNtqGt/1rTD7hJ74XVSj8F71wa\nI2qcKvGDHW76ZadtI132uJzOD7k0DzeMBtSRSqrRsL1rJts/QYuU5klzzP8k\n2iNbqXlJAPoia8c/7tR4EogRd9K5Ke7hoiBDmjfQ5idjpQb5kZv3gux5O5oy\nxJjRLyWtm5djUwPtDcW3ejJV1QQ2tAB29uA4yqIvfyyuYpReCLsRPb1ckoLp\n84QVPaWpAG7ZzpNIqg9xbsHgH4fWvTT+6g+qurXpJCtN39nHdYSdAITleUs/\nSEYJ9h5g6QYf8z8Bi8eoNFU5LXIQX0H2b7NnqRivu9f0aTOyZh2v7lR5QAEN\nJXsnd0ZwF1cU7ngyzZiZ705V/PMc28wfnONM4Mc7cEceGnL6YlgPsMpiPuA3\nxs6P\r\n=j8GX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"eb659691c3a77be825ea082c434c0b24c53cd610","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/rtl":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/shape":"12.0.0-canary.15a179fad.0","@material/theme":"12.0.0-canary.15a179fad.0","@material/button":"12.0.0-canary.15a179fad.0","@material/ripple":"12.0.0-canary.15a179fad.0","@material/typography":"12.0.0-canary.15a179fad.0","@material/feature-targeting":"12.0.0-canary.15a179fad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.15a179fad.0_1626199848562_0.6267194996490986","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/banner","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.c73142a1b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"97c929d55badefd249bd95d61e17ca51e9046bc1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.c73142a1b.0.tgz","fileCount":41,"integrity":"sha512-tns1IMuXeqmnUgdLNE+k9unlljka73JaTY/+3XMaJIz0NTN5O8E/v1z45CBKDaYvYhRpMGWxUuhwTe+xWEi1BA==","signatures":[{"sig":"MEUCIDrc+ZVrJTVUoqzwePSM2oi8OAZpc9pSO99x7rmyJb97AiEA9FIOJroCoRLh0gweBbzzAR1kq5YtWgl1f38pRNorLoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d9RCRA9TVsSAnZWagAAAvkP/iB62q99obZHBi5dy4L9\noJGwJdDx9/2ZTxKz8glca3MRpOskZsqgaMEdwEbhZFaEmDbOKny4bac3sZCI\n5HNTjTdsqO2VVm/XqkU+1ilWzT11ADb8icrQAE2MQwWVQxiFOpVN+sapJt7r\nc/8/qwyE+am+qvHwx7lvrYJ6vA2TkfsKd4qUYSAs8rrR4u2umz4WLU4uWRVw\nhINPK8vEk4h7YSzBf6z3vcNnFRGdxaZZnwstyjQVRiOT5hGUOtnCzRAGh3+h\nmSOELn6WPG3qk3waEPFFoFNILOnnQPR48CDLmeweJEKBTqsTbEdp3/649prk\ne0s3Xi2UecDSuyvTjSxjSjgP9SVNC099Q7M62apDxPUz5Po4cWTgRbJA/NhM\ngK4PJYydUjZuJLzEwToSvPAtd06K09wnc426K+uzmR3eNHLcMVMlQilUZV5S\nMtf63QKmyhypU0zwDkJp3KjbYGa8voAl/dKqrtQHEfIJou1QSyqfNnKrn2yq\njFE39TqnI2PksDjYtCvK5kUOB7pa9DeQG4iCyJo7v49TYm0RmvTpFMqoWS1C\nuTzw+OrNg70ai2zsnoemZmxdIPS9b5Sz9yvy97oecUYSnRR2Ru8oYOVAykMG\nqUwZ+aWqgZI1xeT8lBkSZdg/hA/FKsKL8QTnb9WAvoi6HXzxDLuyssffN0Nq\n7iG4\r\n=eGwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"037ccc3828bb7b7c6f3375754059c10c231a6b60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/rtl":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/shape":"12.0.0-canary.c73142a1b.0","@material/theme":"12.0.0-canary.c73142a1b.0","@material/button":"12.0.0-canary.c73142a1b.0","@material/ripple":"12.0.0-canary.c73142a1b.0","@material/typography":"12.0.0-canary.c73142a1b.0","@material/feature-targeting":"12.0.0-canary.c73142a1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.c73142a1b.0_1626201936676_0.460037222844633","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/banner","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d923db73a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd9331c2ef76910f482684f358db1f6ae3af499a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d923db73a.0.tgz","fileCount":41,"integrity":"sha512-chZPBwxzCL74TZNkTQJfhEICuwq4B+2LH4EvxjnR5ND3Uk3zRMal6tqWdI6VfufqQ7kNcbHYXMiPUOH3KzC0qg==","signatures":[{"sig":"MEQCIDwoxF4b/7nzRG/FgLBPZcklpjOghzOAZY+OJSdY9n9bAiAt5OD3rnt+jJPieyi4DM+05KJ6S82hl1YWlWtDlIiInQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2vCRA9TVsSAnZWagAAXccQAI/4BsN3k5359NiQ6nZI\nKa64FrjrV3jKDaYI86i+Li0lvYmVnibhp3NXToIKiX2d3H+21TSTlDlnvgzq\nghnu8EdUBXppzaUAEv65ij09sZf4aZQjUI9RE/ECHN4DNTrhQuyfRMXCNVp7\npC5yVL7dG/WJRnk4yAEGhAH+JPptI6gsFWVsMtihpCP36A5msX5ECa7mJwvV\npV1KeYiDfPkL4Gg31hjv3NRMsoy9oG18Z7w08KegPUqFpCppgfneUchXa4YL\n1qbbo8HD5CUiH3e7uopP/kNdEPxkA3WjOYX8SV2izjzC/k2IyFG6z5W3fL+t\nfhmY5fgE2468UYB6ykObG5T+JQmZ29VXqWhmc5+TdwwT2mTvQvzH+e3zoRB2\nq0GdgtjijcqjNtjquq8FT3ME7W8rxgfvNms8E2m4XakhvnBcNi6UenS/E+I8\noSBxegJohg5uWa5Txv/mnRmC5Z9XHQGSBkeNPyu1PYl+pI53JYsNfOQ1gmvw\nN4l7zjKO3LDSGquNrQ9H9qeHeZjmPl+B3MTQeU8iIAwob7bZtLjK5c6QaYrg\n1IOk9B2hjSKHzRRHH60ElSq7870WezXGnbpWqkYB88cepNMI8SjjnoTySo/u\nqRcB6l4sGi6kYQpXN/DdbNDY7vzSDU3G/6Lcj5YHAkUCFG5dF6iyx2PCqc17\nnCP3\r\n=Ci3E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ae010eec116ad324d7e442d7ffac5c8ddcb9edf6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/rtl":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/shape":"12.0.0-canary.d923db73a.0","@material/theme":"12.0.0-canary.d923db73a.0","@material/button":"12.0.0-canary.d923db73a.0","@material/ripple":"12.0.0-canary.d923db73a.0","@material/typography":"12.0.0-canary.d923db73a.0","@material/feature-targeting":"12.0.0-canary.d923db73a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d923db73a.0_1626209710559_0.439047474909249","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/banner","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.22d29cbb4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c406e15286ab7bff2fdc8cf1d076f452cd87d432","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.22d29cbb4.0.tgz","fileCount":41,"integrity":"sha512-DGyRl5INhDe2y8aPSJa0AN48DqElby8xhPxqbf1hO4rhMjAbi5BGM8mMuA9AOkJqzzwJyPwHKRlcJfFE/oddbw==","signatures":[{"sig":"MEYCIQCCfKB5gz/TALbd4fLxSD7AYJFCB5y9NHbCmEAgAaNV4gIhAN8x0gyPO+28jq2muVjYQ/Ly+DtUJ0C/gWAyrTYlE+Ac","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hkQCRA9TVsSAnZWagAAmPwP/1rIafZk4N4PShzADMrt\nf+ld8Qf4SJ0IKGi7S4Kd3jgFH69lj6+NZTFSu82aFzfOVx9iOAIMiHJariYc\n2XPMc6bX30Ey9Afib32s4r8zAEQ7BJ4YPe9dwAPxsL9EaxAtAGxdNLsdqaG8\nC5h+Jj6GBHHkuVaZ49nVWJrYJ2HNFQc1jLW9r5JWRaBNcXHxxkLU1P9QYoiJ\nUhLQFnTftvNpBHcj/EJK7wuuMPRS64eR6MwP8yZ7zYtBMB3dU83IrPJals3p\nJ12x5t/Yw0vjW51kJuj9pfsgJn+4bTpwCdB+zTD9UMxJJdtp4B9Ag2wlkago\nVz6M2CRCTw7xUGu0Zqnc5GlYjE3cvNn0h2s537kR/BxpDxrCeWq1Uk6OcJVM\njzgYzd0MU1ww+KfJMN1rsHfTp9q9hZrc1vqyatI/G+lldS04L4auJ0rWH/LU\nvuCRIuGKGV4IYsDKAvI/WjkzNJ8br0P21MXIjTzdPZgCbm4x4Ub+A+UW6qOg\nKqPAuRo0Z3DOEPn4hd3YcwhQaGDOZW6aG5Efe67Hl9RCI4k84daATUbr7psU\neHRUTdEgPKQCvwZ+2UlD/gspCtIDeLhaHkh3aRuvkEkxqkGHBzQdhrRWcxz9\ndig/If3E1cuN3fXzqu2tl9SR8vzzev5udlA1CxnmU6hclr2UoBRCOWFmVXti\nzKyI\r\n=jHnA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b37054450964af349924b81bae43ec6b3beb2808","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/rtl":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/shape":"12.0.0-canary.22d29cbb4.0","@material/theme":"12.0.0-canary.22d29cbb4.0","@material/button":"12.0.0-canary.22d29cbb4.0","@material/ripple":"12.0.0-canary.22d29cbb4.0","@material/typography":"12.0.0-canary.22d29cbb4.0","@material/feature-targeting":"12.0.0-canary.22d29cbb4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.22d29cbb4.0_1626216719711_0.17958679157960344","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/banner","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.2749604bc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ba1cd0df6e26894e4d066a6d559c7688b254e91","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.2749604bc.0.tgz","fileCount":41,"integrity":"sha512-Uo1hl7rY0SuKoClhH0So8kaq9mhuly5FWK7uJ865llDlJSoC0lZ5pya9nhmReh4zsD8yW4KbVhjbQpMMPup34g==","signatures":[{"sig":"MEQCIQCHBCLDrxm1HowBNfJTk9CvTq9lORKmg0ow4ZAp2dGZnQIfIwWxVfHTBdRgcZrQjPE8dqsD/+pfBcVbsU+w504BlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+SCRA9TVsSAnZWagAAXyYP/0twKnfIcbOiDNMi7MFT\nUScYSj2/XHhHqkkWEXYTiQC7ZguEpWLQPVY3+OspkivUTwCq6jfMrJ9WUs5z\nly5Jq01hxJzBYxwrb/7wFq9mL4O3T4r2xsZRRZYpX44qUOJ2UEFkdVMMxhqJ\niqwVV108DsJ+SXJpzGXfyU7yVzTX5RxhciLJhrEz9TaqzKoBxY+KF6Ukm4x7\nzclbTcAkjUhN2XoOAXh0+3HiChY7ghJNQvVgbY+KcVBMnXcHs5XN/oVT3h4d\nuXxAx7EqS2iF0hPoc7Cs9HkCgnVmNVLKqZjy5wFExxPT2t28HTNezbYn7y3H\nNwgnR+bRl5p15gx9m59jSlBeS3XyLmXOFgt/DNh2kblqMLMbMIIGLgYDrf+U\nruaBHXn/rAF5DFxPkZNUG8GE2QLdOt2RbgMAQIrztmlSDX453kwUu9lFulBg\nhuhyhcuBsdH0F6Iqa49WDKdIdUomaf640rxOyGGWxnRSc0DGRmv/GyRIk/cC\nKvgCbovlkdLgx4dz5OVwMcFF+/4CUyKaPbmj+wjaW1Yzk1sLF4UQ2ScLhMwV\nzJuTzzV5Rlt31VVSgvEBUsZoBlePqCoWHxuykNVbUykHjNXtKgLZCrNE4qWr\n2MWNLTZlBsk3o+f4WLQtvUMtXwgpWp/NizJTUswEmupTh22Kps7ZtyTWJZ3J\nsJ0l\r\n=kRAA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"58ae4287239fcccbe4c5dd9259164a0660c76f85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/rtl":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/shape":"12.0.0-canary.2749604bc.0","@material/theme":"12.0.0-canary.2749604bc.0","@material/button":"12.0.0-canary.2749604bc.0","@material/ripple":"12.0.0-canary.2749604bc.0","@material/typography":"12.0.0-canary.2749604bc.0","@material/feature-targeting":"12.0.0-canary.2749604bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.2749604bc.0_1626279826491_0.653625063518648","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/banner","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.e1703bed9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e66084e3e22fca51285005d9a6c33f5e76809650","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.e1703bed9.0.tgz","fileCount":41,"integrity":"sha512-ehmt6/0WibmDRk5ils7TQJW3bmA38ChBttD8EcaGQ0EJuw5UCy5iKYt3cA4TXLRSQeAJvUaELFXplm/uktn0ng==","signatures":[{"sig":"MEQCIFZyFSY0Wt/dSYdosP73AK9M1eCN+4oTfUaVLJGXj3FkAiBiVofX0xqIsmMaBt+DCGzCB5gcq/uCJCAyW+u2UNkvdQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71vwCRA9TVsSAnZWagAA3p0QAJqsUPC7bcz6Y1AAiuHj\n0L31dsgxTncGa9qv0sSF5KCh12+b9ekmmVI6Ll8Uf4G7ALQ9azV7kZ1yO3Dn\n/uwZZCqW8qRGNR+d5FhvyUxi9/1zYeXz7gWvPwHeVx5QysZruilSJK1W9bAQ\nVy19yZX6lUncaCRkAxk2yB5GN2apAnRL0t/ATTC25dG7sBBGAoGiImWCyz7w\noplnWEuYeqyGgPEEj9gANFj+JZoXHPggmtufkWfOYnxlCXu0BmKxeW/NfMRP\nnQQqyKAMWY29dRb16NJtVKu7jDpmVR5K3k6NNwZDWuMf5X/iiDGDuTJLqacJ\nyGuIavrmrgxP0o6+vyZpEv4qgWXrOHi2HkpXvoXverE/x0uz8jFQh025y7k9\nh2AgVrmfdA+JV34kTy2UoeIr7PYB17kJPFgc7ywT8AIDyY9j45PR5UhWE15r\nloORr8AshoW86FI8mNtQwF4LSLT3KERGqzKXF7TVTMLERFiYgBz2J63eF4bb\nt5fElGj/XIUBillk/jQVZtl3oaWiHqfYRhfFGym9auUmFN+aUcIURVThW5FS\nwm0Ehb1GZfEDSUCniTxuUn+Jdd3tixHUcL5LsiwUXd8o+ZuqzOsgvDIQSqSN\nQqB3TEtgqq6mA46eete2ZqyqNJSxH7NefDMoi4xrLlKMMJ0xfWgTR8XvspZQ\n0IYn\r\n=cnRG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ca9075f939dcacc82290fe2b01214639958bde93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/rtl":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/shape":"12.0.0-canary.e1703bed9.0","@material/theme":"12.0.0-canary.e1703bed9.0","@material/button":"12.0.0-canary.e1703bed9.0","@material/ripple":"12.0.0-canary.e1703bed9.0","@material/typography":"12.0.0-canary.e1703bed9.0","@material/feature-targeting":"12.0.0-canary.e1703bed9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.e1703bed9.0_1626299376443_0.8213086501739388","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/banner","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.de48eff0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"747ad9ef91fb38d69fa8f3ecc8fd7538316c409f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.de48eff0d.0.tgz","fileCount":41,"integrity":"sha512-DGnfYb21cEzpbnmADxnvQOPZkEnezGV2W3pY8rjDjZdnEME03kYOjbLOtiQleZWyHhn6mj7Y0D2VxBeaS6FtAQ==","signatures":[{"sig":"MEUCIQCipCLIpTgUKRAnJZ+tHn6yjOQaSCvLKLmCPW68qjUM6gIgR7AispvKyiujsejMYYL4/DS/pU6pGbz3Et21XqRwBgI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GvICRA9TVsSAnZWagAA1B8QAJ36HIBaLdajAi6PqDVq\n/+DRCcx/N2stYE/ljPyQw3Hfhxp05lQNxzVSMlHnim7Dvc8Bj2KEsZgAi4YX\nhD3FmP5z0g7o89Bq3bgMYDqwM5H/XhF0VmIOwEwSKKRW10RLkVzXxon8My7a\nn1TpvQ3UemAN381oX4QKegdbwD9Yf5X1Qrhol9ttbgMyhP2VCOH03emvZhRa\n5hCgfjwQ5HpSqgL1Avslx6Ku69VyiF7uAeNe+oEurvV6VDjTNK3bEnom5vQk\nv3xPgXSgW63AsXhkStXQUmJr3jxughbl13r1g/Soc1dKKBup6CZcY1/mEqOK\n/dPpYqpw9oyG2AIITBaW7oIdUAEsmqVV61xgoJWP07MBR9+hK3hqx0BS5h4Z\nZQtqWs9Xct42ji3CR8A4x5ZNu6teVjqOVzntyXaCbRL6fOV2R1NxyQqy0YBs\nc5A05zEVKC7TyZwkJS1y67D3xMxRiAuLXy2mXb7VC99dO3tV/zg61s02bUjm\nf6wo2v08F6b+fH9baCQeF+5m0gSKaqPW45drViq4XifNU+X+hHnOOi9KpVlJ\nuHOXUFhUhiTMAUf6+vzNHXADGdHVTdbsSb1IQG5eycUZxv5F1ozWBVTe55+3\naswj3CmKYgDUxwTM16V6cqtKzqOjixaZNNe/exIyN0FR7xBQdWnrg405aU5q\nrWWp\r\n=xN9r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"121530dfc073c7b24dc1cb75732a0d4c0e6a3f28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/rtl":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/shape":"12.0.0-canary.de48eff0d.0","@material/theme":"12.0.0-canary.de48eff0d.0","@material/button":"12.0.0-canary.de48eff0d.0","@material/ripple":"12.0.0-canary.de48eff0d.0","@material/typography":"12.0.0-canary.de48eff0d.0","@material/feature-targeting":"12.0.0-canary.de48eff0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.de48eff0d.0_1626368967859_0.20502588617893558","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/banner","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.4f060adc5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fa2351191903985e3060c5bca099389f969b60a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.4f060adc5.0.tgz","fileCount":41,"integrity":"sha512-Vcm5RLzmtspYOTarNWDozJCvG2gHC2qSwpNHc3J16OO8/SiVaWW2/5poQ0wDEy4Yk1Ipvv1pOuC1RA/E52MzFw==","signatures":[{"sig":"MEUCIQDkSYsntqlaRRhRgy5y0YmQFpKTaEpf4Hn3Gci8/G4g0wIgJ4Zs7eCyIEu0xw+rDcyDjX6jts9wmI9v/3vbDcAvIiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IsgCRA9TVsSAnZWagAA1kUP/Rgm0xgkaZmQ4FXPsbAF\n1KMez7LNeqHsjblpavdkb8SMmCS6iyEV9aWnWmnSkYYENs+f61nRle98myv4\nH04hsU+T2vL6iPCpthk5RTPCuzWrSenEnP/eg0mfZ1YYjH4wCGSAI/xIrvY0\ntckRiKovK9ETrn0mUog1o9GJ4lZam3bn1Ecehmx7zOT5nqpwW/5GJsfr0X8E\nlBxerskBcPZ7FYOM0lOSF5dLpclCMlBYTcUPc1mM/2FxsORCepslYn2oZX/N\nyRvjdRr6I9XfnXFEQ9n7Ui0xUWxcw9IyR5jR7wUt85GuSJZOTtxVCnGlcE6l\nnykDiPEjhY9EmD9V4QBQxfQ5bVPZ8AMfMH/mP+jvcFgxFz96kbsM+ogDBq59\n2sTRdwlgqGXgKG1R9g77jCiZvgzyAgeaRYRR9hl+pbKH2qUdtV+x/nfoSapL\nXZUV4CM1ctsGeuJw0iN/HeF71ecC37dzI/sV8Rn+rDO1dzSdjh3d2Ztwob5q\nRYBPkwi7KofQ+1XosnpGUJyNqAK+kNZB32NNu9m3gTQ9Kxjs4S5ohUyPiEnH\n35U8eYd3GrOs+YbZ0z6sVt0PQk2X3qbozqr1zEhXWAhEvrcNKo9zoI3XUAKm\nSfhyr5NXmt7bbfOLepa01NYIky5oDmsS/df7Rx7Z1IGEv677k/TPk34CDFGO\nDbgF\r\n=G8G6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2e70b8cd653f195a01f93c3e9928feabf39fa87e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/rtl":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/shape":"12.0.0-canary.4f060adc5.0","@material/theme":"12.0.0-canary.4f060adc5.0","@material/button":"12.0.0-canary.4f060adc5.0","@material/ripple":"12.0.0-canary.4f060adc5.0","@material/typography":"12.0.0-canary.4f060adc5.0","@material/feature-targeting":"12.0.0-canary.4f060adc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.4f060adc5.0_1626376992056_0.3456351924988925","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/banner","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.bd25779b2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bdd33ee72d4d5801d52c739a96afb928a6641ee1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.bd25779b2.0.tgz","fileCount":41,"integrity":"sha512-y3y7TKndTq+2Lej5rKzbRvMmVlxvzAFXKHy/qJZpHifwCE2JMyA/mRbVmxbrNph8b0Q9Yn1fn4zAbGi/WD4EEA==","signatures":[{"sig":"MEUCICfZm4WV6IDDaz5RRvqAfkBAvTEJZ3x8lJucv7tZ7C6mAiEAk5ZmiQt/NzhC6xNkXx7pW3dFFjgT/JgmicoJMg3STd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J32CRA9TVsSAnZWagAABnkP/iPhVbT6s7hoQ0h0QeCX\nd+79FBI96ZGJbud0sTrJlas+ZskeS1N3B6knE/FXkAflWzZ43qEIw19xPNwz\n0uOGzegbVM/trm9inAVn4J/dqgWd7z0DsKCMcS8xTV6H0i6wZF5/CPp+942+\nhzUP7rKO9eATDTCXJ/YtB0gkD1Qem8/Fgr8olpbfBWVqUoiG7fqhd37Razub\n7516qKMf/2vwST1ahUxCtaqVdFbyakcvlHTuFhYXk1jNH13WYRgBxSecOVE4\ne4pO1reH4ld9d77EQp4YZKV2vsC7adlWkKCcoInqW4gZdFa6+nJB9AxoDJyM\nas8byFzkgOlbI+aWVVJ005h15QbSQY3/Il/BlCwDdfzezklu+OyRlkqzW8ij\n/EH34X5zxBU5y+cFsQOWgK0wV4T55ymPBj//rkwchaHH+ZhSjgXQ4SO7i8wa\nfl/A8kva4vMYjIWyiweIPQjGGIM7jpCZx+Bx9MDO1tWc5fadCmDc68SuMvE4\npKjCRpCr2kX926CqxwIhKEeV3JY1xKPomtIpfPHXA1smkPbzwtbQibGSg2PG\nwg73Oz7i2j9HuU8r1gMyTqQocsngQwZjpvKjB0inVLSVKCD8de0Wjo/E17Hv\nP1OHMgpPTYZO4naRZ2bKhY38wQIEP7e1Hb3nJmKZ+Hc0dF7muQBUUIDpcJrf\nf+Ca\r\n=rngp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3ea8422325f9bc5f9a356842191da47e282aa4dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/rtl":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/shape":"12.0.0-canary.bd25779b2.0","@material/theme":"12.0.0-canary.bd25779b2.0","@material/button":"12.0.0-canary.bd25779b2.0","@material/ripple":"12.0.0-canary.bd25779b2.0","@material/typography":"12.0.0-canary.bd25779b2.0","@material/feature-targeting":"12.0.0-canary.bd25779b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.bd25779b2.0_1626381814503_0.02047963378044737","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/banner","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.9f68a932e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8f00e4e1581d6eec31717c87a52e278fa162de54","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.9f68a932e.0.tgz","fileCount":41,"integrity":"sha512-D84ZSSmWJErBb8JQb4fGqZufqOILlOSwbdnJOytatb0/I0xAwIbgJS6Bd8vNN1kK11Y4YeWRuC6dJHzEMo5WLQ==","signatures":[{"sig":"MEUCIC4Melg1hWhSNjDKCKNMz2Yb6QdSsBEhiA7tbJ5bMKI/AiEAyyxo0Hqi+rqvGngSMQp+/HRuvv/dPH7J81jOAFbggF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHaCRA9TVsSAnZWagAAlMMQAJzqQzWWSpeV/P60mrLg\nmAJeNmFTACJX2wecTeLB7utTarYuxAcUQYD8yyfhjrcQPOSrfkKbS1kUqF0w\n2Xj4FZxDHEEBNr7SOgXwZT8qc0JN1VFQX2MXvYc6bLwkH33dbHUsvEyOFgyu\nQdbJt//oc6Wy3oQupbOf9NlbpPL/9w2TqsRZkziryUAGVS45RZqxlqRXt/TX\ncHanqWidm0CO1h223tMS66usUuR+J2UhtF/ZMuCsH0P2Tt8yaNXGXT5SESg8\nnfl2xhYEEZJkITGyASRP5fPQYKlSNST73MsWwy1TqWVv2XpWz8ZvHEOHiiug\n8iDkOeRsDd5sVidu0yZt3bAlSxfF9RwuQ28nANlNKu4invL7a2lddtJ2VDMt\ni4i1bx4EHo/Hi+0IhG95zXYNRNoZMuwAqflZF3nDlmNVp4IaAChAhnKFVmzL\n7ehrdPUOiPUKpM09BfUIcKp9v518l4V6+/1FhGjrsAqZAOa08jaKn6v40Dc/\ne8HOQPeQNScszVpM77i8mE8tZ3NunxdOCmK6cI3DHjL3DlGKQE//EsYKM2qt\nindlS6Z1dl2hfK4icDrR24jf+YJEwv4iYU8RwIUkAm+dDLoNAC4tsgfqg8Zp\nxYRp6HFLgcDDgd/9P9FpXZVs6U9h9GEpJdhyiJNEiXb55xRCXMkIlWfYon9u\n/1CM\r\n=QgE7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"34b4e5801eaff79707e9f2c769df2c1a34bbdb11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/rtl":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/shape":"12.0.0-canary.9f68a932e.0","@material/theme":"12.0.0-canary.9f68a932e.0","@material/button":"12.0.0-canary.9f68a932e.0","@material/ripple":"12.0.0-canary.9f68a932e.0","@material/typography":"12.0.0-canary.9f68a932e.0","@material/feature-targeting":"12.0.0-canary.9f68a932e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.9f68a932e.0_1626386906517_0.3248915662660612","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/banner","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.4eecdeaf0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0c85616cbe3f15793d4f9d6ed15c40c5e3fbc69","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":41,"integrity":"sha512-//jc6mf1jCbsheQRmDga7IrPzS9VPUt03rYCcDm7EEVVbBeVawdXaqZjMGFO7/Bx7+NmbZRsJNvqCFBHM4bdOQ==","signatures":[{"sig":"MEQCIAuguX3JvND8SBpWIOIuRV0B9mDy7jx3WutB6KytzjsIAiAfuyxF65k3eNzAXP+Ex9UqBFTKUMe+FMU3TkWCjnfxpw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z7ECRA9TVsSAnZWagAA3FUP/RgSEtcIynyEltRv5HiJ\nUarFjMPk36o2mNgCtSLW01keJV0IB7+q61T/TEkN0iEEBS5oxuCct5MXWZD7\nfnEgswWnsTzg1LSHYbbeRWcdRny1zWlBYy0sSxAPE4TjnlmN4wOznCfaVXQz\nDDKO0imDRf4yFV8kiJE2IRAoyhe/+fKXimnll7MgQqCCQ1QvoPaifeCCjuVU\nxAJtcQHITpCTs2tWZ1pxkB8TeJR7GRN3Cc6ZxDCBBA58tNP7QBnBFncyw3T6\ntdrIKmwKy+8FiAjJBVtlxD/ES1cYzXhvCbyAFFP7cpiI9CdzBLdgW54FtHe9\nrcSFhxJgOoiML1Te5BUywc2TbVqWJ1xXtlVk5Q+cppJWyldRWR0C9PgRUzOI\nlopoV03y03LKiVrqqhFrrEekT9/Rgy/br65/fzna93dJtV/PRXa2Eq56ADvu\nzuU75iZK7fpLzrS4UIwTgYQcYIFlf8sVlR0LseQBK7qzsucv6/W8ovjUSreq\nWUnDiNrHSTnN8vN4In8xzosZ4LzIu9ASQaI+9mtsSm3nm82aaOAjsf2t+EnP\naveCO8SDssam/n6a3WkxqVgzr3pecquxMiWsyfX+aG+f6bSCr3/gV+aLB8Q2\nstp4ujbKzMyl2YCiKyIQc+yhr2XAQNJir3LdB2/OyGxahe69CTuejQXaoDey\nZlO4\r\n=wUPV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"89a3faf78d32cadbed38135c9ae10ab1f3c8e9a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/rtl":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/shape":"12.0.0-canary.4eecdeaf0.0","@material/theme":"12.0.0-canary.4eecdeaf0.0","@material/button":"12.0.0-canary.4eecdeaf0.0","@material/ripple":"12.0.0-canary.4eecdeaf0.0","@material/typography":"12.0.0-canary.4eecdeaf0.0","@material/feature-targeting":"12.0.0-canary.4eecdeaf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.4eecdeaf0.0_1626447556719_0.6095668767145679","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/banner","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.7239684d4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90afc7c2f6e51c2aec194ec17dd81861d41d5c12","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.7239684d4.0.tgz","fileCount":41,"integrity":"sha512-3cMGoIaWmsRixrVjv1hCPQCl9eyiqc/RjGQN0l/EGt5tF4mhQCxk7/UMeyo/Ye6tzUlUVUs6NpWEOxbZXHqEZA==","signatures":[{"sig":"MEUCIQClGJMJct2HIw40vYHPF7H+v8DfjQgi84vK4vNAwoyOSQIgPyfQEgwcZd0jThRWp3K11mtzwXOqPIYfObAChYQwBNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0VCRA9TVsSAnZWagAAgswQAI3s5mvsFDJd5HwpzIqM\nf/wOKYNqphzrtiRBGSWsonBl7LLhhVLHL/3yGEYBFI93BFSpCBVsWBykda/X\nXQiwzO2sAGfCFgf7ERCZkKu82vmOG79PQ7nuw3yIFfOgKSaNTa1mmHKhSgKx\nOaxeWm8ajcH1fdvIAQPG4hRuJQ+G5sKUttUtjEBnVGTyCLMAPk68ZCzWTFp0\nrZ4dxuzYEJh1vjQk03yp/vX4fRxelsy0JyRMirQV5N/imTayMUn8iXn2x3A3\nVtlPPRiSFikCYaxChDWoCk5PdxL7mOGNh78Na726IqGQLo/Wp8T176GWrT4d\n5cXbREdWVxwO77qt0zGbopxxGYYbgMC6dW3ErWSiQ/h4vG73pJ9GurZTQsT2\ntF22XwPPKCG3BeyWiuq1kSnoGu8YlAW3FGfL75/92AwBFwWSRvgT2ff7EVHn\niOMDnKS1NtXYxMsIbrmV/jYMgV+Zut3k7SM2bhFm123a0DZaatR0dhWrtaVd\nM137j9orO3JnY3LArTXymkj9eRpa7vN/u9bmehguvq8J+9FUQuQBRER0gZ9u\nZLV017rncZSsx4aSJlOSMr91jQ5zQccATNgioy7eeM+Zjm6AfY/FzgpnTYji\n5d8cWmSyZ9EmxLoeGFUwJ1wLswHayVQ82slJ1mAB4nnE/+4tbQRxcMhpFEAa\nVXzi\r\n=HqvC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4b35543a488bb22a0855f6f0d00b047fa76bd623","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/rtl":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/shape":"12.0.0-canary.7239684d4.0","@material/theme":"12.0.0-canary.7239684d4.0","@material/button":"12.0.0-canary.7239684d4.0","@material/ripple":"12.0.0-canary.7239684d4.0","@material/typography":"12.0.0-canary.7239684d4.0","@material/feature-targeting":"12.0.0-canary.7239684d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.7239684d4.0_1626451221124_0.04913902347589283","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/banner","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.d5f1f7c72.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"048ef20c336799eb7a98c457e2079daa1ef2d72e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":41,"integrity":"sha512-I+den+o/djk8zfeZb159SUq0CKkrUh9JMZT0p+ehcayo4kU83TrUjdQF+adXaUnOnwhuhT/M7UFNX/UbWiC1ww==","signatures":[{"sig":"MEUCIQCZDCngT4f7IQEddWVsl24mldgmDCkEQ4B1LMgG+r9MKgIga3VbZyfV4gQBJy4+k6JSQ33jWPLYo2ADR7WkQqEEa+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bCTCRA9TVsSAnZWagAAGLwQAI5TWWs/qZ9hTBkePdIO\ndkaFruBqS4C+pMqDgRdbRHOStepRYd1oV/t1GKhC56UHOmlzKojuGxJXmnzs\npkuV5E/qSrGzXx5c/1aTBuxCyCllTMoBs3h3DEkej/0292yYG7RXHAl2dKIl\nyo0/FJkvYzGQGrLN4BODBj3nS+jnOJv2zq2/jgXuTxog6itTQVr7qyJwuayt\nlZwbYB8VLnDq2WNLxSwvppZwGkjvkUdJnrYOMqxltG/pz+ifSVBk6Uni/nzA\nPyUfWwBzkI0b/S1oUZ58MMXfATo/OUyAjQ7erKjcGMkm9Bb6gFzykhbu6vJC\n7caocRF5qLO69SF93seh9w2DqdOFWVrhmwhS4vY/mLLXj2e4JPMddw1HoXJt\nTrR+m/Nam0W8yvMuy/299S8K5ZE9l8Lxv8Hr/L0VQqGhu+s6QstIqjNmyUDW\nmL7YRoCVYeXm5r9+9cd4kUCnBSAFng/N7Aw+Xj2o6/H52JQDBRpAvhDm/4RF\na07u2X3t8t0+ja3ECNKscOKXWMb+XOM6w4NNY4aw4Q2lFcH1X7hyyc4rip1V\n0nX0vrtptPf+o5r1wy9ROXTueajbbn7sj2TYC2CLeR2ghqB/ZOK6D1JHk3/K\nrRv6Aehm7TWgh+CoBck+MERJSMPglprOExh1KitziCpAX+8ygHeY2n1eSqvd\nNAd1\r\n=q6+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ef327d93f5a591e88ce5af94a2bb181d97b58472","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/rtl":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/shape":"12.0.0-canary.d5f1f7c72.0","@material/theme":"12.0.0-canary.d5f1f7c72.0","@material/button":"12.0.0-canary.d5f1f7c72.0","@material/ripple":"12.0.0-canary.d5f1f7c72.0","@material/typography":"12.0.0-canary.d5f1f7c72.0","@material/feature-targeting":"12.0.0-canary.d5f1f7c72.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.d5f1f7c72.0_1626452115683_0.3590280923988822","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/banner","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.4d95812f9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e44b62007dbbf50e86076e17fa0a7bf60028970","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.4d95812f9.0.tgz","fileCount":41,"integrity":"sha512-1pila5koHPSiQVjeQB7OgF2z3t6pSecxOLgo5Wgh46x6DDzNb1kXekJkf85wQ0tzGFEFXALFd5uMoXmk+HZ+vA==","signatures":[{"sig":"MEQCIBFZ//pJWP5L21m++X7vGr9WlubnSPHpnw0LYNek0j9hAiBlQMqTrofdvLDP1LxU+6xtcxLmcqhm7rljIAq+wO4o/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGaCRA9TVsSAnZWagAATKMP/RNNly8FoE0RNdn4Y+RO\nfddaOyT5OQ1fn5iJqmtugM0n+Gs17AiJcrUCJvvPMhdo3qOW6toi99jSkRLW\n44OlOVwrPfNMYJK2m0/XpMhBltSpIDOBh7JDk7YpcYJ1XZQz+846mf5ID1gi\na8MK6bdPH40GI0KDOFIqq56PmPZ5vjwS/2Xk4+sfsJ+3VykoGQMbuvwkQbWV\n6FJARsRRx0I18m766oAJ87v+UBo5U3xIQeTmiyjWvs8SRRsdCx4HZVGsLSUz\nurfJe97Pkw/RMQdPemQRosTHs5nI6cv3qSBblZzn7QZBQnFfjEnDAGQ5+0us\nNae61frioWFNnWzAPA32j0rBI4unXZpfCkAJoRPI9vejXMhIGEaLrzT4av80\nlhv/BHcKrxD84lKxngspvTRLOdDEh7VpDsc5ZLguATtY0iQfM3LkQfyDu6lK\n8cWf2ygdufe0CD3+j70Mu8M1W6XIraEQceEzYvbFQ2Lyw4iSgnkM0Quzqfoh\ng03ajqFEhkpL2703SYU2G7fIRQHWKPo13hhU33uWC+WJMGTdrWdVuu1KUfyS\n6veFl6KrgC3oSo3p4BKWy1vk/HKBTjOPdT2cdjS6IWL+/TIXTIKE2zQvLnrE\nCF4reJIixnRNvVLcL9Qa/ZfGukv0YkXGq1npMtqX6I8NJOh9DCdycAfYMRPq\n+wSJ\r\n=TRRd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"34bd44726ccda77331fa29afdc1d5ab7ff0879af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/rtl":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/shape":"12.0.0-canary.4d95812f9.0","@material/theme":"12.0.0-canary.4d95812f9.0","@material/button":"12.0.0-canary.4d95812f9.0","@material/ripple":"12.0.0-canary.4d95812f9.0","@material/typography":"12.0.0-canary.4d95812f9.0","@material/feature-targeting":"12.0.0-canary.4d95812f9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.4d95812f9.0_1626464665906_0.12029789078752828","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/banner","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.38d1846cc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a56aa43e17aeca8dab697d8c26442a671c9d777f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.38d1846cc.0.tgz","fileCount":41,"integrity":"sha512-EWV41LfNXY/FJzSewOMguhKGDXSzkacXatj7SzV1J+4yA7C6Ec0A0RRtWeQOPFNYEWkLZtBMdMnDenHpxDJ+CQ==","signatures":[{"sig":"MEUCIBvzsWSQuRhSJVNOJ13SwBPmXkte6qWBAwUUs71jGvpEAiEAwek0K+S5TWvdXnzpJ6hsaVF50/nCQ0udcRI+VVoK7EU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cfGCRA9TVsSAnZWagAAF+cP/iG//IRD9u2i61++84nN\n5jXI+bqDngMZDJmux400QOlLc5NAGASWpYnbP7wYOgjiNmuSV2/GHOuRPJfJ\nJ3n1kefIXecD+h5CrdjXdoVmSOrBwjtNFlXOPW3ckSikqLcyCJ4fTDqkNYWL\n+9Ck8AmOK4rDp6iEhNRaT0ZDmL31PrEQ5IhNNsvbxsOsflwUXR2XSqgH/D0E\nnhDzJE5r3JaO/QyL/CKVFrffwZNH40PZpguHP2uBxGDW4CRaFV/2cDeH9jZ6\nsfBjhUuPNs6aesuP1u2uhBmwC/dLiIOURY9Wh4n4tbLPuS8KaZ83Yv5iafMn\n337Pt1QGUQdam4bFFdMmcIVlLUkGZGiefF/d76xZa25HS44ACPPXjlkZysON\nfzK1Adt0H5q6TSJmQJiN6fBjqd52B8BxdXkm17s+VCcJ7gAxuoaZNci8eH52\nyOYSbzB4zXWROd9zu3AZZxi6WujthJfSXxOmzi/jYwqDbwWfsrOGJ/cApdj6\niO+ZXWQOubmJ6DlkMSoXauALRnXfMojP9vX4cPrGS7fy2dL7SWYplOutZSz9\nAJ1L3Id3hgli8or99Fmt6CIjkQzBsGlc0CVFWAojOoU7ZwZnYbNu9YPPTtpX\nSLUd/ZfBqr9nronQpRozphjwyFf3MpDTtZ937relxxF0iCj33SBWXKRnlCx0\nMmw5\r\n=uVj8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"77a8b2af56ebd184dae02df9198e75b16f4db385","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/rtl":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/shape":"12.0.0-canary.38d1846cc.0","@material/theme":"12.0.0-canary.38d1846cc.0","@material/button":"12.0.0-canary.38d1846cc.0","@material/ripple":"12.0.0-canary.38d1846cc.0","@material/typography":"12.0.0-canary.38d1846cc.0","@material/feature-targeting":"12.0.0-canary.38d1846cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.38d1846cc.0_1626720198227_0.7999938358925271","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/banner","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.3f691eccf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76cf76a5d5e9d43dd89f76b042722d68e409731e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.3f691eccf.0.tgz","fileCount":41,"integrity":"sha512-ZtUdUMxQZB3BiaA58RbKfzB82/mYaiyaO6Ev0es2ll6f0G09cFWQUXM8CDs41uQrPuMHKWwdhMXw/gcCMLh2lA==","signatures":[{"sig":"MEUCIQDe/a1+5yK8SkNFaQ1CMl8enGkGWqdmtJa1CCfn9J+8BAIgZvx6Lnvg1EzCTwr5mah+mOBvVz6r8Yz5tM/HoRFKKnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":502068,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vVvCRA9TVsSAnZWagAA8wAP/iVHQD4POfBPrc78oSZe\nV8k8oCYaLEZ3LZk5wUSyLvLnymqirj+EfFAgMTjS/ocjmWNTNq/WaM/I+PwU\nqfW5h0FIr5n1P6kj4hhB6sAlYzanyUGiCKVZbbpiNlyZEb/Twt+rRtYpjwVS\ngfPv4wrIE9ycz63YtT7rhNarNQRUhRkS5qkj7C75w9N3pUzRUtmxmLR55nCF\nxVcxodR9mJ/3av8NWfo4g+M/cI8hJFXPb82Gbhn2MzyQxgXE2H153jI+ZMbC\n6J8TcMM3jAev5t9xt9fLypeUXI5fW7yxq8BpvLbfuLfJ/ijypiUWBn38P8Jg\n29VgfZjSs00135XsmSGNX3w+0TwUQBAyyawu8in1j57QHOh8N5wN87McC2zF\n4SjR88Z22HCcR0PWTVCuTRymamdTY1H3vrOLjyu7UEBQ/ngHYeKqBLYKtvcl\ndmwA9+dYkRw4jVpJaZZkJyCk42D2XnjDB1UFG3fyzHHUbhLKRkjR2XNyMU7X\nEBxVUrPyRWZ6QZMbnLG04Ka6/gHh23tWNUfmRaai4i/+nQ/ieYrTfU0epxFP\nI09lV2eeSFfbrJWf6StSFH5FJ4xW7M3XPPX/gLJtIkxo00Qr0Vbt317+SoxG\nF/CJuLRMse8E2RpUnKYTkBCry4uj4dnbS5WFOqKF5DzZpkwqaerEKoxIIjXX\n3N+2\r\n=s82J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"58271219b83ef8db16c68153037e69345831b4cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/rtl":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/shape":"12.0.0-canary.3f691eccf.0","@material/theme":"12.0.0-canary.3f691eccf.0","@material/button":"12.0.0-canary.3f691eccf.0","@material/ripple":"12.0.0-canary.3f691eccf.0","@material/typography":"12.0.0-canary.3f691eccf.0","@material/feature-targeting":"12.0.0-canary.3f691eccf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.3f691eccf.0_1626797423102_0.3656227347678127","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/banner","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ebb5c73bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87f7be825f9fc3f5f63fafa15c10d4b363a0de40","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":41,"integrity":"sha512-SdoBjzDf3Icc9Jwgq5NWXc9gsEHknHkkPYHkG0TG9S7eGNpYI3QUFRmb7JI6o4UwliFSNXnJlNZ5QgxvZqss2g==","signatures":[{"sig":"MEUCIAIV3gE483HfEtSaJRiisJPrTQ+YkbbfrGI+m3/OH+fmAiEA+lTBVYd/hsDz4IK7ulDjRfbjuQ4DtNamFOS4Yv4M54I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCdCRA9TVsSAnZWagAAiIEQAI+GJ0v4SGDm0mxuSpN4\nataYBDWbEQci6EGUPVDmTKKX6QeEZSOn0LR2CsEgMnDkG4vWqGc64bdBPvAi\n320SCy6IqOTTf2Y1tYES1w0p/UPrg3+eZ2mJPvuuE4DxGY9cu8MRi/vPDhrV\n78XhWD6/i2wd0g07Dyn1lCLqtb6KKYHsbmgUBRVOIEfEoCywvhLdlY9fLSxL\nKqYHNKe/032IzkNgu+1zL5UzkXw4CLTEQXWjtCAxBT8+pGohlTtzlAB9z/qk\nHvIyO0vDE9vF+PplCPmA8YGpEFxCFxMnCOuRLQBls+77PQD7aXZCsZJMhVPt\nF6MUZSEgWYI46/8ehIuiD901ycNqr/lzAXK9xcfh9cDAtIUae1LlwxQaCvlz\nf/oQlAVkJw72d/cG6hmto55oQ4GIDMdrSkrvT01Cc24GLtkL4hbt2wqXAZB4\nkcODxtAzpioCEt1DrCeMMiYMa8UsQvPTTPNE8NDqDovhiSiyxhd7JnIXE5zF\nyktPaAJK40DRhWevQFiEhufU6ScEEOUTbNJgy/7411GbNk8OPC3bB6UHW5bB\n9zuIwsdiPHcb4XZfbALarHQgZdPxmuHzg1SoL6JIWFqRKaWdYeopAOLAMZJC\ndwFTnqBrgpBdGWoJiWOV7fwUhrstNOW4+1BsH8M9xpzJBCSDdKzo63eAHFCQ\nIGEK\r\n=TyXa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b37a38f7ce62c0d87ebbb4bafa0f1fb02aedb050","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/rtl":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/shape":"12.0.0-canary.ebb5c73bb.0","@material/theme":"12.0.0-canary.ebb5c73bb.0","@material/button":"12.0.0-canary.ebb5c73bb.0","@material/ripple":"12.0.0-canary.ebb5c73bb.0","@material/typography":"12.0.0-canary.ebb5c73bb.0","@material/feature-targeting":"12.0.0-canary.ebb5c73bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ebb5c73bb.0_1626800285677_0.3702170396907971","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/banner","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-nightly.778a0e8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5419bff81e274e7cccb3d01423dd8dd12cc24049","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-nightly.778a0e8a.0.tgz","fileCount":41,"integrity":"sha512-bziDS3o5BCWpgB9wxENiwl0YIylmZySJVRq3ntsBCN6eBnsOyHRawbVnw3RdZbySWq7PC/eGdkWQM7fXF61KWA==","signatures":[{"sig":"MEQCIEhsTVkYUUTPPpPmLezrGEfyOTEeYExkCY4A7bh9R2CSAiBv27wz8s7A0ztJ9p89gm7ZxRLB4qr1kA/DXd2/BTZA2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506502,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zrnCRA9TVsSAnZWagAAkU0P/idNMroAoSToyTujMz35\nGZVr+L3jT2mlaZtOzyNagWGOgi+tzhNCspeGQumwRYYNCgWvA70NfTXAQtC1\nQ9uh02hvXvmHwtpWy0wAwMjWlOciuLr7bKTZHQW9SvldOYMJZRBwHR2/ks6a\nzLhNQcZ1a6neLoaBQWtm7Y1Rr4FcWdD0JcKwrrhoh5iOc20guS2kfVzFDQzg\nqX4NAChUsy14DuuCufn7nq0dAnfFGCY3acpxU+AHGCu90oZ6Gk7RoJ5VKK7/\nyIkP5OGH8vil4w4DngOewviGD2vskV+V59zZoG6pzXvzL+Gi0mkkwAN3B/yp\nh0ggdwUjqkoopvuYyR7ipPYBpJEnvh7uapwceD3EstUPDTbxYiuEvA66Q1tL\n7B/TK+NpzSg+9jfIyaSRnlq+4LdgDUiZioxSw7D1GK6yJigJ2Nica3dGcudr\nF5JfL3zUQMvNrztsvGMQBeD2AdF6Y6x8FZA4VRJaqguhu6HA/ewhyo/gI1cA\nWNbeT2YhyaC50CpgaseE64Xu/6srXjrl4K9jE0Lb6XqmNH6Ceqr2ZiBsheS9\n1OsxDYu6CjSYzX7CwZB5aq5hESJFyo0PlZp5bJoi7xkZyGZQ2zwWYzLAz577\nLTSDHv1+q9f4u308X/ca5jEvpDnksgKwn+qxR3R0eQF03cg7vcw8g2GOZNW1\nkpvc\r\n=UAL2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d86234d661f09ad766ffa2f82c69582e585a8fdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/rtl":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/shape":"12.0.0-nightly.778a0e8a.0","@material/theme":"12.0.0-nightly.778a0e8a.0","@material/button":"12.0.0-nightly.778a0e8a.0","@material/ripple":"12.0.0-nightly.778a0e8a.0","@material/typography":"12.0.0-nightly.778a0e8a.0","@material/feature-targeting":"12.0.0-nightly.778a0e8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-nightly.778a0e8a.0_1626815207682_0.01183613680294604","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/banner","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.791311bba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e4bb9c79d65a5b92787cc9ca7c5f119ee589b36","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.791311bba.0.tgz","fileCount":41,"integrity":"sha512-1AIVKDRfsySn0c7UEZz/tLiMBxUhlaYWDZwAkXPO9SPvIYpMm4hX2aLV7digZIqSUGWvFOkXp3butrF9KPoIBw==","signatures":[{"sig":"MEUCIQDQrdA15VXi7NqIi5Odd5+KVIFMGLZhoSRlzh2hDUX+OwIgAvA9C2+yajEqiEmgpZ1FjKMimP9EIj6eFzdpMAXuFYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":506613,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lxCRA9TVsSAnZWagAA7yUP/iB+82bx+oRNLHKasLI7\nlZ47FtGJ0jJ0ET4YeIQVs1/7t8ch7OflWeUR2tVtPxlfV21SsktfvJOxtDzH\nSYxKwDVA/AG4zd39n0LaK+9xJf9wcz9elpQ2xAo4+hhVXtYjNBeueu+lG/Ky\n3kEb8VM45RxY1xS/hjgKYv1fwGPtwcqx54cK6poYBe5vhf+7NBs0wobKH4n6\nccO1cd4qRWBlT5DK1EEu+w0tqwYGxkprFaXnEPznM8Ul+OmmE366wpt86Rs9\nun1zPtSCV3HFuLCwjtu5TTlyPtJKzc7Lv0xWWE3SAn/HW5OjiHb0qLSqKgqF\nv6NMYuy2zw3QLCjKap3FVHyNRYpNpZMMaRd/0k8e8g6vkYB24/mmqUYg6OGI\nNo7NA4QVo7oQ675OMm3m8vZNMm0Gq8vitsAAOWIpjubnui2ux1Bixh+b8I5f\nJYEn7wcfx/0EfgDIeCFvlEnJ+S1imTzmiSyakOBPGaWoSTv6uI++cxIOWlB1\npLxyBcmKY6sZBQ1xFki5PK4CS7PNMbdlvW6Z1xa52tkAS/eeSrmgxLzlJN1l\n3rnNbbnL5C01cK4k+BOxWvBOQTbHT6jNwoU+DmXRAOS3Va7b3doLwJ0x/Fy3\n6R24u55sShV+TEUR07mKmJsWIrlDz1ePvHHh3BeNHf2V1DywVeRQZt6e2IST\n0jyf\r\n=ikLN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b915b82632a30b60ae4dca5d12fc23d5a5df4d4a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/rtl":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/shape":"12.0.0-canary.791311bba.0","@material/theme":"12.0.0-canary.791311bba.0","@material/button":"12.0.0-canary.791311bba.0","@material/ripple":"12.0.0-canary.791311bba.0","@material/typography":"12.0.0-canary.791311bba.0","@material/feature-targeting":"12.0.0-canary.791311bba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.791311bba.0_1626818928967_0.7905181656733886","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/banner","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.85e9a6ac3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"608f2c2df8b1bfdea93384d3d7c94f6cc0cfdbc0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":41,"integrity":"sha512-hnbLMnY/VAvEPbb4UmVsnYu39yUSAbJeKY7VNFmBezuX+QrGxjbXf5Qz5NnTOO3UKAYEdOTLDXPUqcpztpBpgQ==","signatures":[{"sig":"MEUCIDD+9VcbMVchW4q0JMnc/ha8nppO2zlwp6+qsa9zlAw0AiEArX4/Sc/9WW4B+ns+TVIXf9uMc+SlYMD67gwuyU2FCvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8sCRA9TVsSAnZWagAAvZ8P+gL+TJGR3lpJzOtRFk0s\naHbFogldqZW0Ge9VcAmVXDRHb/Qa71jW7d5PSsOlZA94sE/N1fIlefnO9/LG\nGHfzj2LRa/bD1Vdqd8/O3T3qVjjClWDtksDgRkopauPHzktzZVB6yyhgyO49\n0szKJRdVENttThFGH1ghqpxpZGrKI1RXEXdmz+e0QyWzzj/lDU//hV8ZqznP\nfHfFd6I2LNbGDZQsbmuiWfjnoGK+LiD16wMu/zl/fGRvZGz6p/R9WA6DeEgR\niaih8K+bscSjd00Txzu0W8IhHBnkPusBOZpl0lsB+MsARexzoO0pszUZuafo\nLqtJf5JH+2vBC7Edn2huXj6o1Z5QKKDdAur3M6FGJAuPei7inzzwQzRE1wwt\nywjX0Lm7oSZrlAMGiJEXhu1O8nMw7/jWDgDQvkxD9P+9FENFQUjD+ykp1t7f\nw/Wo3i0W6svvs/1cuiy9ZNHyq+dhzx2YBkQUDivJ1sLBro1tKTSt/3aA6pfN\nirvvxTPnEhSvfoXC7prAGKSmjBTiyN9bbZQibMsNHiNFRz7Akmv5K5KPD47O\n2A9NKHuqJw6F5f2nUFdpPQW8+oinqtqsm1R7kqcdHAfSovvBFZB/ckEVz7+u\nVyuZc4PvotNc/wTiu8RhAFP9ptVP+NHHW0ru+eujGoLk8WH/tJT1r9J1WOow\ngHHj\r\n=ElhZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"651354325ad21ac082f791ec2abb0aa32b3ba936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/rtl":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/shape":"12.0.0-canary.85e9a6ac3.0","@material/theme":"12.0.0-canary.85e9a6ac3.0","@material/button":"12.0.0-canary.85e9a6ac3.0","@material/ripple":"12.0.0-canary.85e9a6ac3.0","@material/typography":"12.0.0-canary.85e9a6ac3.0","@material/feature-targeting":"12.0.0-canary.85e9a6ac3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.85e9a6ac3.0_1626881836216_0.19981326983483094","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/banner","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.6b0442278.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76abca60693cb83d88763f66e9e16f12bb5cf451","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.6b0442278.0.tgz","fileCount":41,"integrity":"sha512-4HRCC/CbdP9cK+ci+EgQ7PiNwxUefirEgQdAwlVOB2Rd0T1MNA96kwL35CbwB/WgE/vUrafZTysCitqsO0mrbg==","signatures":[{"sig":"MEUCIFo7cYe8LuD3MtJQdJhGF8khgrHq0W5NGisTdFD/vt78AiEAiDHYnU3QSBN15qf+273iCvDZ2OD1nDqcBAr4wXn23GM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":507811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GydCRA9TVsSAnZWagAA1/kP/RPoKhTApb0+ooT5dVb0\n3pGDVGiyofBvocsjKXXRuBOzLESvQjpRgEKhaG70qtK4tSIGUVJ95gbs2hlV\nRDVxuI3/Aqa1yg8DplVHZa/h4kf4p4zNhKQDhPQ3O5GJ52bLny++t5410gxR\nkzhj3nhntojv97ig5ucI0MYW/gUM4NAaz/6bJa7N9OSckuwtUZg4O13rT30s\nhy2wngM+5jnxt89iwii/KKrgWlVjuuVDgSfw4jFF6CLGCTf5tYLp7y1ja+Xq\n9b9+iN7SXSF2xMYIogY9LzyQyFICjzicB/zCojleAstUcmAEeSPvNvZftrbn\nsRS/B3xyg0h9k1OtNqsHzWzOFi99cGj36A40iHiIzq8PtwgIvhW+o5UNbDOQ\nmb0ir1rVFmMQ7W9q3jifHZLVh2Q+JOvAmugZaFK8QNE0h1RguwfMDK3CEq9N\nN4kIGI7/mNhuNi2hkTAvjh1sZfxGboNH1+j06E+eGdV9y7V/kpXIYp9p7zlI\nWU3r3/mL0kXBm/Ay0TVBZ9g+GDN2gHTMxe5SKy28dtkZ8L7dEIxZUEvXgbW2\nYb0xR6JmW6Ui+OTG4i51BEJFmfijF0gHR0YLFSrlNDqO2rgy47eIfPOB2WeS\nRQtQuYxRRYHC7Ogz+RS6JTkozmy8k4Lr/o2VMrZFOj2+YYTFFSv6b9UxObOw\nX0fq\r\n=YnXr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fefa69e22f9083ed30aa4ea05114191682b45a14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/rtl":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/shape":"12.0.0-canary.6b0442278.0","@material/theme":"12.0.0-canary.6b0442278.0","@material/button":"12.0.0-canary.6b0442278.0","@material/ripple":"12.0.0-canary.6b0442278.0","@material/typography":"12.0.0-canary.6b0442278.0","@material/feature-targeting":"12.0.0-canary.6b0442278.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.6b0442278.0_1626893469455_0.4486350084265853","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/banner","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.5f00e454a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfff841d7f528e7e92a8f546c32eeb378305fa46","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.5f00e454a.0.tgz","fileCount":41,"integrity":"sha512-tCD/jR/uuWMWK17B/TOBNwmuJqLmgpWkLX1pb9LvsT6/bpZBlEY30kyrs0+hmMbwk0qIN28dW6X5CBp0UME/8A==","signatures":[{"sig":"MEYCIQCbgyu20YrDWWVTkWkJCR4yhat79xkgcx1t7hBLqy8d2gIhAI7zMRS9pvksk4mXqLZgq9jBTYBQ0ClvNzTdcclthtre","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXbCRA9TVsSAnZWagAAsVAP/RCxhLpP9KHPF47LQU+2\n3ehRkQ+SAAxYdm42Oec4j6078jsXWro9KKyy2lpR6pB5WyGbfuKKtw6tScZy\n8C9rqTp+nFTzG9psq1nb8EqR+eJpdCm+U8A8fjs9aSBHliVt4HbC2SfNWWxS\nqxaBMAN5D0wtM+d6JF3hhsO0yty4VVEs4lESEF7LnhjQrAhcC5UT6Q8fH4ii\n9WwgrZPF2mu2rxI7OWMO84tOlKnW9Sf6QceqaZ7LxlMwCmo7Z7twBlEhnQdZ\ngcFt4ZJYTzf3Sgy4dF0ZGJyKYZ8Qb5BNaMhAa0znITN2vC/tQuIYF7x923F4\n77FW5yzZzJ8+u9gmFnlVgu6XhMzlMx2TzNp2NcBshFFVF6KpJXpxFTvVxGnI\nmc91yqDTJhTzRCX43VA/WUzSxKdaEuT4fwI1AP0xUplfrnpO4vC1PKUf5E5D\nzbTKBMchFReelQ7vOOculRY9qL04GTB0r2sqbDv08s1ttU6xrOznkWfqPZrr\nunAVtfOWeXMZgG+YgKisoQqyQi+gX3KplqfQx+65mgGtvUCMpZ9nTRPXggfo\nr3nIjkwhZltL2gcU8sgYgZ5doDkrtaVxLTgOvwjAu21yEoaNZw/AYAZR1sT3\nrnSSJrsPSb41PQbZO39KoCvNf5OZs9gI2GhQth+5zCtqQOAQEqLabX2YG5sd\ni7fL\r\n=CWjk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b9c8a5899d6bb5475fc5fb2c76a300d4a28f0ffe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/rtl":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/shape":"12.0.0-canary.5f00e454a.0","@material/theme":"12.0.0-canary.5f00e454a.0","@material/button":"12.0.0-canary.5f00e454a.0","@material/ripple":"12.0.0-canary.5f00e454a.0","@material/typography":"12.0.0-canary.5f00e454a.0","@material/feature-targeting":"12.0.0-canary.5f00e454a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.5f00e454a.0_1626973659346_0.6024551573351902","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/banner","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.90e08fc6b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2fbe28710684ace15fc3bb2633ba821866fef9cd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.90e08fc6b.0.tgz","fileCount":41,"integrity":"sha512-DVxHIegFJRcPh76JVgVf6IQ6aX3IhugH645A9mhhsrxSsKOafPtaKhkNkv4O6EZ9v6rYq675oFRs+9Iaar6fVA==","signatures":[{"sig":"MEQCIAfAkosO8WlVkr5E371LLzytjmQKGdOkTzMtds3Rsju+AiAWAehAFEEBts0H5pkTw0b/z3z0qGvTvmxjGLBzOp773g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gG3CRA9TVsSAnZWagAA0tkP+wYJKPvwkdAG0JEk4SgL\nsRZ/qUwOxCNp9bBdspJ4M244i1x/SkfbQ9yv9Uv7/hjhkOen/JGSeTsvvnXL\ni9Y2yXS+Jo9aNb829bT02xq8L8RfYK7e7K1qL91u0fWoR+CUkbIE9eWyVU/M\n1DXWe2AKjGm6LTgG6jYVeJhGc7b7mqAfIvlUBDa8UH+p5NBRGvuHY1FZqWzP\n7TAd+CZLDvDCIcQ+kdliCbzqXe8I50zM5avzrxUgEbN3+CjTe3TxPpwzAfDb\noYXPR1y6J1zvPuSnP85aKTNx7iG2nMq/z6hlAeLrpN0nVZTbHefGUiWH8EIk\nMLeAYlGYs5oecVzzcmCLY9h1GzzvsmeMvfmBkuw9FdQt1pXFw3GxClygFy3i\ntosScO+pecbAqPrDKYGyIR7Eo5LAoXTF7YQ/iPnxPXBnu2ErBDo/2klb1lGr\nb6eiDJbkIY67x/nw091a4HX7SIXavYrbT6db0M/iNS61/S2Xdl8QKVhBiFEs\noNlvHqNu9YZfDYyjcvNcg+dIkbfd8Pu9jOJSIrLiWP4BTMusqwlxq8jDE1Dh\nHh+UVwSHjYvzAzs7d6cE4Ev43LsRXc6DCL9R/uiZ6LRTiLnbvYzRnmGejB9q\nhr3U53ZMVObrnXBpHZp5J50JEFCMVs0d6p8q/Wg57qrXKyrkHovUWnC4/eSb\ngdUC\r\n=Tw6p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"267e307e557cdce4bda13e55c34cb0d1aa0d0b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/rtl":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/shape":"12.0.0-canary.90e08fc6b.0","@material/theme":"12.0.0-canary.90e08fc6b.0","@material/button":"12.0.0-canary.90e08fc6b.0","@material/ripple":"12.0.0-canary.90e08fc6b.0","@material/typography":"12.0.0-canary.90e08fc6b.0","@material/feature-targeting":"12.0.0-canary.90e08fc6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.90e08fc6b.0_1626997175239_0.42348028304932583","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/banner","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.cf5b9eb86.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f90032ec2cb8e65e83b1db34789aa65c751caaa8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":41,"integrity":"sha512-BbAa/HtbnJ0IsxFd+ZEwonWOjL6FKkxS3XcyK8ts6zEERgtMgcoHk9Vt29HKTyZKrdMfnTFeb+Dg3HVFJyoZyQ==","signatures":[{"sig":"MEUCICVG8BBw1xe1nzoo5jCMVJDUFwtOk22XtSi1TrnalTyMAiEAqr6Z6p0z30E/FnLJk/IdwyEO9Ag0ZZupI/RNXzdgHbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbNCRA9TVsSAnZWagAAnm0P/3y6vmDxylSG7QlGKNOo\nOxbCLInr/OMsZ2WSuHt0UtdGc43aaDZ2Fj+WhCdjb3jaBjLsxGMLT26qz8MT\nCj95gojzFFjV9s9tirLY/kH9UldlxpZmOOxNHHfrq6Y8UydYXRi+rsR4wJtM\nm4POaETD7n0+v6pyOU6lsbLMsdodDYKEDKCCXqEYWM//MriILbl3bU7RP+sL\nAveQ0m6RS6kg5rRGoeFAKXIsiXRSnjcBH/vsbN8BrFTcR4JQJHZmM+8ut18P\ngph9Eva6lCzegcmeB2FThQUT65zyNoKoUhXNF6kYvKQUVXMS759lJzFChNsV\ngkKnv/9YbgrBAztFjdP2h66eXS+nfPgrkkXqpTr0vkLrrSsJopmf9dXWPIqq\n0OZurHBOeyuiX7eiMj4KNBcZBApeksBZCeM1lgpxo1jBHYtbPaFjsGrU+b6H\nMKIX1be4ZLK4sYDwgRkToqZSLsXQ9EosZTO4QD/uAKOLjABxyr+sCc1TWrCw\npsyRZ5O1hQlromwtcfVtkoaMD6cQbKa9mqHCMwzJQbHZbwWVjsQ+vYi48+rX\nKfOZR4OCaC6tTl+blxqCozwnOrSWFW33fujOL0HPSzbkdvc4Gg2ognpSJ2kB\nXgHDpIMLwBuLJpcbD+OmUaDW496tMAUDlMGrBSSIpg8Zq1RA1OrEtUQ91yM+\nnNTk\r\n=KgRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8447b42cdc88335a4d5a37bb048f5babc1c5bc82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/rtl":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/shape":"12.0.0-canary.cf5b9eb86.0","@material/theme":"12.0.0-canary.cf5b9eb86.0","@material/button":"12.0.0-canary.cf5b9eb86.0","@material/ripple":"12.0.0-canary.cf5b9eb86.0","@material/typography":"12.0.0-canary.cf5b9eb86.0","@material/feature-targeting":"12.0.0-canary.cf5b9eb86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.cf5b9eb86.0_1627064012931_0.9707137402070987","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/banner","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.3f36ac75c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2c8df036e3686e7c4ad5fbfe89e7e2f60af2598a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.3f36ac75c.0.tgz","fileCount":41,"integrity":"sha512-76fEINljpYm4V93sR0OTuawvY+P6l+eTaPc12tsPQb6181h1kuPi3V0e+XHr/+AunIZer0+1SKNQM0aurmKSKw==","signatures":[{"sig":"MEUCIAhenKGkU0lAz4R9v8DFO/7ZQIwmG294EzRwCKsjsc1pAiEAz5hBjXnxe9QD3p4HSo9/EpLhfniWt1v8S+4RkjQPCfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wt2CRA9TVsSAnZWagAA00sP/0U9incxV3kQY8NW9PBw\n0A9LdBYP5qi6Y2xyQTaHyh4OHO9RoYYFqvWRoIe4DxHNJ4Nkh3DuLosknkoG\nwChInhM+HNmNxNul6F7j2RMPVEz1D1RcVJAvnGwB8abmPh6Bg3y21Qqu9JZq\n54hM4XsKoc2ASLgqj2u95ZsW7Za1ehdFyCYmXiMUi2TTzDnXZ4MCEPc6o4vI\nSyGornivvmFoy4PRBAKgtyQ1PhbyM4T980P2pIRH4iwsp0WvbejJD/zyzXjq\nfYk9QjWsOLXvApWqWQoLySUBDBzp1y7ZXnAIul+1mWpxLkkCNWAfEaEVEKdP\nW7aVAqTP8M9LwEVze/1BeyVOOW3DjBQvkQohXDVYkQSBkI37gC6Nl72wfKci\nhVzCX8r0lZx8V8hR1d3WaSzFdwQCz1gD2QRQIYkfLODPmqW9VVlNG+nS+byw\nXaT58S18acVWWeaPwMXx12c0QgxZxD+ivUk9AUTCg1pHFWrRaEhqwN3/fMYY\nvAiCXf0c9qmr0MsWlCpHyvuJgQbH7/XZunYWZE48o2AZEehi/DWb0LokIKMD\nslws8HNsB+7wUpwTWyeyXn4vam0xaEY5cgMUS7xs4vffJYQk6cUgn0zbb5vP\nvnQXxgR13wHlghYv0PV1KXGpnpyFv3wIf8rzKCgRg079zuWlbM4gYhDcbdO3\nKNlX\r\n=ByoI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b0f70c5fff2a6f188b24beae7ecdf708b5bbdcb4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/rtl":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/shape":"12.0.0-canary.3f36ac75c.0","@material/theme":"12.0.0-canary.3f36ac75c.0","@material/button":"12.0.0-canary.3f36ac75c.0","@material/ripple":"12.0.0-canary.3f36ac75c.0","@material/typography":"12.0.0-canary.3f36ac75c.0","@material/feature-targeting":"12.0.0-canary.3f36ac75c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.3f36ac75c.0_1627065206223_0.5406968401162204","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/banner","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.ea1e1b850.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d95f14bb3b63c97fd83393df92f28a9266843d2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.ea1e1b850.0.tgz","fileCount":41,"integrity":"sha512-BhkBwc2QLLJoWILF9+Nqo8aBUm6fE9HjAh73VvcMVFlk1H58AORxD1rUJB4HVLdQYY2vBWhIInhhsd1YGS9fVg==","signatures":[{"sig":"MEUCIGsjcadBTk+aOukfxO3e448gDPYzXVE4eRo6reTylI18AiEArEoYZ1M4ljwfM9x5oyy29O2XR/Nt7AtmvOogtfRfcJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6eCRA9TVsSAnZWagAAdRIQAKJSEolvr3YSo4e2LSe+\nK1UgDHhj4PSYuKQofk2DyXnJe4ZFJ4AvB8W1WZDWxKaV3NuUsrMvfa3+d5pS\nQ+Q0ujB382eAFWlyyLDbAHVpxEjY4rLgKPa8hT13gtPlEOFWvrg6D54Ze5GC\nJP1aNfF37Q4DltOg6OYN6c1a6uepzgNANzyBGhK6RdUsgO11GnJlhcw5hDji\noBFpyxrnNadz7OWq+je/6aIf/GF2v9oThmDAWEDARWX/IJ1Kgu008yjjRASl\nXLB8LKwk1e3xpPlXkxvnXi+OWvw/lFCjWt1cYhdooKaNGM1u+RAmcCCAGFIQ\nI3Rp59kopjIcE59g/vhIqmen7AoIMYjEV8p5CbHkrCDrBKsoz2JobAhP5V0r\nGcl81e7mw7HnlvL+lPkYOBdIJsTNsNZWk6HoW6dBLU50JFbyqMDKPMgMTWFN\nzTOYKlK54KU5KNWlL974KFkywTsqCwsa1tHP2RnWsYuBDJ/tv/WE+Z9Cs7yI\nk/TCDfO1Q9l6may4C9iaHR/y8MgRowlf4OccWqW7YA1tc8E4NiISI3c7NvSo\nVR4ZcvC+KMowA8BtKJoFgVkyahkH0We5dWitDgx1OJY+U57mgL1lnlEQGZkg\nRkrTAOEoWUuZdzoQuq/saDyDU8s3yBfvOBeQOQwvPig/UtcnMPfFkpNnygd2\n/gjr\r\n=aSAl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7c296c6f9b2c20eb32b0501c98b6415bd193dc46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/rtl":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/shape":"12.0.0-canary.ea1e1b850.0","@material/theme":"12.0.0-canary.ea1e1b850.0","@material/button":"12.0.0-canary.ea1e1b850.0","@material/ripple":"12.0.0-canary.ea1e1b850.0","@material/typography":"12.0.0-canary.ea1e1b850.0","@material/feature-targeting":"12.0.0-canary.ea1e1b850.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.ea1e1b850.0_1627160222016_0.16638681970662073","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/banner","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0-canary.22f390c43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4076a7dc83e4b2193a8c8603f304532b90f05057","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0-canary.22f390c43.0.tgz","fileCount":41,"integrity":"sha512-bpv2i3b67ckROpSxOxiU5wOGA+gwf5D/xCbj3CrcJYUY3uUQJCY9qSOM+cBCRlVUeTxiN3GrAeEBOSZseD5ymg==","signatures":[{"sig":"MEUCIBFMDvpIRCAJMl4NEP1FKFk7ucIL1H5m6IYgxVNC+I9cAiEAjWauoiWyk/l9/s1Sro6oxU+Q4fstctMjOxPqU/byc5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFf1CRA9TVsSAnZWagAAQukP/3AFK6ZJOsr3qlTa7MSp\n8CjuXqkmnNPlahpssFr5ZXXEjnUMw20ewVrufbnTCmE29g9V5Rk+AQddcyFV\nN42rHPuR8hxHkuH8TJ+ESh/RE5amOwtknI2Hcr5B3F1YCJxF9FEYTo3VZlf3\neJ9fY8S6tT/rNUFBH2ZwWQR/pW9N7rX3JR+SYVl3PG10yIqpX55pG1OV8taQ\n7/Zo2vWtcoDXly6yIWA0agk/4lCQQDNw5+35e7WedPJWTyPptzEjSrDPwZmM\nukA5LmdjhzO/vmYZjqUMUlCzUvsnpi8y8ilXItythC9rTPxvGQ0YFlsk9NJq\n7I3wIahgN3JBWt8iKTSPvYI50JecuhPnF2xkZiLvDIT+UchAu1CtB9ueIogH\npZRkr7/XcHncrbFDg5qztE6jAxgOWfBWT7GP58POE49XBQyKn57rE1YDkp8Y\nmPo+t7yuuUdHtczEaMFsDqT+a4hDNK54Sdt9IcQXDPqwvP3zw9jAWrb+kIlt\nRk2foCIe+N9JKrHCC9Qk0oN9R0Oj9WEeXUzjUAxao/K8hlIZTUih8yVhVSpQ\nDRJXjBUfNH7vw7euhfft4grCEB/s9rtdeb+wQnJ+iJpnkZuQt5rs4r+nW09R\nLBg21vJ81g+Sags6zD8lc/rbfiRq+rhhN3rUrcc9oVD8gUALAx8FhprCzzZ4\norpC\r\n=5xCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2eba31ea1c3ae3c0e3497f3dae6cde368675a496","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/rtl":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/shape":"12.0.0-canary.22f390c43.0","@material/theme":"12.0.0-canary.22f390c43.0","@material/button":"12.0.0-canary.22f390c43.0","@material/ripple":"12.0.0-canary.22f390c43.0","@material/typography":"12.0.0-canary.22f390c43.0","@material/feature-targeting":"12.0.0-canary.22f390c43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0-canary.22f390c43.0_1627412469067_0.4813308931624358","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/banner","version":"12.0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@12.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcceb3f8ee82adce251d361b5428e39faa54f23f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-12.0.0.tgz","fileCount":40,"integrity":"sha512-VjPsvikIlu0pzo17L47ATmptJIAdi9iEa23TJ5IfxiybTFMhHeupjbjQlOwcBjAIEWKWquRgbLpDf280WRvzzw==","signatures":[{"sig":"MEUCIBbm2F4iDhale1n0GKEhUYUJvd3xV2oQ7TT43kuka4FSAiEAyoOBwNlbr5MBTRyU1fMxf/kWh5PcnqaABK3t3Mm7/cU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508102,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGO3CRA9TVsSAnZWagAALdMP/3LFN1JBGiqGwYf3viPk\nqXl974Kf0kMaL0VA7pG6XIpGz0Cugzc8pWu0qS1hEjRFNz8S0CaecOBxoFF4\ngW06ozHSmeeFxdhpNHTrqZXF9RLmcyOIAQStdz19aKOOe1bLZrGJ5sV9d2tK\nc4k+dxdxUVUYmSN96p2WSuNh1DhHwISTrpNJyvIF/1eO/w9JDbW73ijzcL09\ny7EAQfxzOtpz4TIAuPraEUV6lhnpRUeR+GLsqr1sN2rYalMEor5atn5M0foT\nklxX0E109P+GlFDgrzNfb5VRzmtC+6lowWZcj//zPRJisXp0upRG5BJ+amhw\nUAVcejJv91FFH+j5HAHUzb2egmldudamwExuNwsUAZpbKL17aRChtCislC2y\n4UK4eYNahZxp3/GFMO0wB42e373ucR1xeygdu40MCExh8DXXyj+YwyXQ15Sn\nKCMfQPhZsGpLoybCrvu5ZuG0LGTGWGGUnDxqQfMUAO3itOnC7SKNngIgFjzb\n6CJWe5oFB1lRaahw3bkXsf3w1mj78DKCerAxkIKAUitghefvQRK4oZR/PrY3\nQWgd9qSOgTbr7R15JQW54CZz5Ua+jKAR1KBugwvlaBmHhnfHwBuKrCdD+jB1\nIsCG6vwht2crnWgDliILApGO3L6do4AWjbYBzBEY3LVt8XplYcbbSrf8OFRs\ngMbU\r\n=ysWW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","gitHead":"ae85f7eba0d72f4fa5f3e8669cd316336b3e6828","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/rtl":"^12.0.0","@material/base":"^12.0.0","@material/shape":"^12.0.0","@material/theme":"^12.0.0","@material/button":"^12.0.0","@material/ripple":"^12.0.0","@material/typography":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_12.0.0_1627415479036_0.9582833949186185","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/banner","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.ae85f7eba.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d5ef5d79b59fa307f11886d7272fbc209429941","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.ae85f7eba.0.tgz","fileCount":41,"integrity":"sha512-pUe6Q5gOEMTInhzhGKTZEetBetTK7bfQzJNQiixNoCpgiJacxQj3c1oP3t+jhbNfs+9whXWnQJqF9Fr3f9PVew==","signatures":[{"sig":"MEQCIDpfkN5QN0GzZDQ5/P74HyVxSNHHauIehUgvzMuKGf/YAiBPj7dXTmF85md+HVhjdDdLJqkAf51EWRnpzOQpkWGlTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":508660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQXCRA9TVsSAnZWagAAU2IP/il+JBBQSEH4zoON2Oni\nspu/5gqEGb8ex1KPfgQWEOVZe9UmTENawrhweN6JngC/NCWt9E0J8wS7mgXt\nvE62pDNWEU/NfgDja7+PasCbrqxxiy5jkUHbcC8PhPlYTLA570hjSfXwixvs\nOeb1mERrrMiVxZctbJ0EOwGDEFESiXZSEoPrVTIU6fc0s3+mnOiWhhjxIMTd\nDJgH5E4lzHEpnnUKl2Zk1Rvn1QkI4SXeZSFCvM9p6MNUSUELLfpdZj/pzoOf\nDuVqjxGrwCKoytimWLtg8rUUJJD1hzRmdbyJggl9N1x8gNVCudwEhuTtscUh\nkV8IswkyldEPPbFK/Eoker1DoCCeMxcV5Nn9ca9xrJRCSqrYf9Gw8pbxlW3e\n387VlCnv8pfB9Ow18+IhVB3jVzefg4Oz3KOgBWAdU+9/4YTWT9bMUHhDKRwa\ngsZpz2ZR9vdHUdIY432Be64/YX8+jBuvI5kjykB/EP0O6SjUUNKa3IrI5AXY\nSCjQB1+GMMbBUClKBMeX2buIMeGGIRZTZhDL2BMpd2/B/Z2Hycz5KhPkQdp+\nXS8cjy0Fj9mwXtILeLcFDxU+1Dg0KXSaorOG8phmeoNsKyJzHU91dqTVst10\na/0qzn4ZwJfPDwTKZCOCcy4d5ITb6zQUXQE91/ILsFhguH89E38Q7zaOXuXw\ndKRN\r\n=aKsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"087c731cd84ebd8c578510bd4c8dfb5d11e8c574","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/rtl":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/shape":"13.0.0-canary.ae85f7eba.0","@material/theme":"13.0.0-canary.ae85f7eba.0","@material/button":"13.0.0-canary.ae85f7eba.0","@material/ripple":"13.0.0-canary.ae85f7eba.0","@material/typography":"13.0.0-canary.ae85f7eba.0","@material/feature-targeting":"13.0.0-canary.ae85f7eba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.ae85f7eba.0_1627415575108_0.5511271097063408","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/banner","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.5981207f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7750767222d7fad9b991ba1e4593edcf6d1e513b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.5981207f7.0.tgz","fileCount":41,"integrity":"sha512-njBG63f5cWZW8gpaWY62odgXFI2GEvH4gkeCwbhivTFEWmSovfRPJez8nvsKeE+K9QXxQpIGzDxyk/ZucELSIw==","signatures":[{"sig":"MEUCIDbMflbrgZ6y1fD17ODdRrvkqDgRGkQtcGIOnj+U/a7XAiEAkJYRF03BruEYSLKI/zI9k8BS4Hr8HtsSeVnZFria+TI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJSCCRA9TVsSAnZWagAAE2gQAIHxjDmg6k74TRzA74V+\n3Ukh72YjNMqb7D8pT99ldbrBpowUeIQSvpWhmwH09J06CVQatrNpZTk8w7ri\n/i7MTvO0ZZn7zkA94RFCvnkO5HMZlEfJyqU5S8AUDUmBM2C4bXDED5Mem2km\n/TxJ0tVCUUnAQB1XG+NJIe+6YNwc6VytEXBPKDYBIH7eDeCSYcwAIrlY6kQO\nDGfB1oB/s8LEIiap088ZXGB9cZFm35jWN/Y7iI1hLwC7BbKqzsWGJGs5ZOtb\nVEuDLTdcHnIDMIB4GnFksBK+hSLntcOZSwLa5QFzgpOlHekxtFmTGKSsNF3L\noIErogs4+N6Nv7R1bdlv05c2flxhON/10+rnnOxYbUh5KAy+0MTGWqJ7kE7v\ncubeQ8euF38W86F5cqEif0nsotjX545aW9OORKREw5cEUGOIz3BUF1GQpxjB\n+Fn9hdq+p91VsVMuhPLEPheNgbnzWuSFYud9aXuWpaR9acduCMQpL/KQF3PH\n8GFMNVq3I34M8rYY4huyVr4JrZWucKsobX7wm1h2aLWkxrbRCRfF5bCOngqG\npcRR77QTh97wpX4o8e/wmy2Ry27UmMgLtgEC3ypuO7oFGU/fYT85fzNPOqC4\nkghiwPshFrmXvLEjKJA2ECQ70kmqzH7q7sEVJO5hmCG976MntC8pGZphCjzO\nSvDo\r\n=O2Q8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8a8b67c19b2a9f80923dd162098b373bbf34b58e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/rtl":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/shape":"13.0.0-canary.5981207f7.0","@material/theme":"13.0.0-canary.5981207f7.0","@material/button":"13.0.0-canary.5981207f7.0","@material/ripple":"13.0.0-canary.5981207f7.0","@material/typography":"13.0.0-canary.5981207f7.0","@material/feature-targeting":"13.0.0-canary.5981207f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.5981207f7.0_1627427970425_0.7399273240084647","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/banner","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.83bdd0222.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eba56bd63e9c4a49a217fd64628992c27dd8eb1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.83bdd0222.0.tgz","fileCount":41,"integrity":"sha512-mmfFuI2UGXNS7OzIiHd3vynq1JjDUSnTdaxrFlbt82hwrv+Ak7KgOOLpuQACN2Ne6uEB+MSIrt04G9IGOPw7UA==","signatures":[{"sig":"MEQCIEaVyvS44xTZvTRa17fd3+e+32zzyIFvrcYX0e/JhgIPAiBMoOg/eFn4ZdwK6m82OY5Z5+1mvH7dqv8Csd4vgTKltA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZN1CRA9TVsSAnZWagAAzxEP/3TlzrXhoY+UV9TO008f\nhzjdcoWqSuktw7o82+Z/8lxAG2jtIclhUTnfttyYjjA6UQQVz+k/xz9lguoo\ncZURSg8emiL7g/3k6Djq7zgNQIwl02/WDTI8S2YfKtvrq1DSDibuq2+tik+i\nQiM4QoqNPGGj/sUpFrgKkXf7hd+ygdYd2qNJpRg3JPXF2n5VUdROGxn23PSA\nrEWhKehTJTx+ReER31J2Uuyh/6apbrf58hsjgEaJjucJJH+dp5Hew56iFtn2\n/itiX6f/tlljopt1CUIbm6XPEHcgYZCbJy4JdFdW0aKsojWQXSOng6ofjues\n44L9Vdxzvfe7zWjfHpDKTMzozlYqLIS4a8/QrD60M9Wc6HRXKxJ08Z75Sqlv\nP+S7X1iATICe82FsFxUaXltgB/OSKtJIUFFITcZiBKkImQBH9xKCHlnOKnke\nHwM6uL/kg16bgZBHuwdOd8mWN93FlBT7eIkyuNo0Q04YRyNfWNO1PHNo0A7V\nSD8cNcEEZyeeQ0A2sI/4Z/QForSh9LY2T13MGVKcYVspbE6SWyE7FcTyzCfr\na76yB+8Idj34GK6U8Xipq/VJh/kVvhSqYXUpb0ur4A3y1MR/SJCGdfCJshJc\nDucAgwKD9gHg4FpWrkTq7jGAsx2nXcwQbp4FNX9XCN8YgvLSL25xeHnY5568\npdLq\r\n=8rLh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1f2b23ad4bf20ade58cc1b10490e9ca3f9469405","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/rtl":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/shape":"13.0.0-canary.83bdd0222.0","@material/theme":"13.0.0-canary.83bdd0222.0","@material/button":"13.0.0-canary.83bdd0222.0","@material/ripple":"13.0.0-canary.83bdd0222.0","@material/typography":"13.0.0-canary.83bdd0222.0","@material/feature-targeting":"13.0.0-canary.83bdd0222.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.83bdd0222.0_1627493237539_0.4569429396172344","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/banner","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.28656298a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33fbb6bb4d693108820222e871a7f4bf302e8378","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.28656298a.0.tgz","fileCount":41,"integrity":"sha512-9RQyCHOeHyLXokINVUZ6ckMSQMOWeYQIXrEGgOW0xg/BLtysoMxOunimluWdzF6cSiMqQv0WRd1LaimXEPccjQ==","signatures":[{"sig":"MEYCIQCyMZgHu3FxijIjt6w3v/7lQjYRZCL8aym8FheLyN8bTwIhAKmxmonCbu+c4+WGISt8VY0pbC6uozDVIHn/zxvwkM8s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/9CRA9TVsSAnZWagAA4B4QAJQdYPwBoxYJFeL6Xx1U\nGZKOEDdX9aK0KzSQ9L5ymZFfEWYUzxBRxRVJsHOZz12AVRHEOzssMmy4EQFS\nIx/Qvr9gA5gEd/JlBtZCMLIbmbe9OwAjwcoUr6PStOLOXpTTccbZQJJlK0yQ\nHU0sPSLT4F+LqQ7wx05YuXgS4ebl2Zo7igsFzairFEous+YQJhBvs+kkh/PL\nH4+LA8tk1N5hrwK114nM9+6oU1IQDeIh0WK4o3g01LfOBXACIJeSJ/14Nch3\n7fF9g66yRlTmjVKS8gpyYmzp6ec1mqner7GNVWv3rHO8/e8212C1HqXpQqF8\nDFy76BU/Z2teE75mSafW5DbwXC18P40ixs4NhjzzmU+qt4BPQ+PfV7XqMUN2\nKBwVyMje3prAz2CJJyy8YuJIR9pPQUyv2v9hxObue+ANQK+9uI2Ff/KdKChp\ng6C0dl2dU1lbjQvSux7fZrPVbO9hxmsolLErvIw9CeSZQXziT2Q6T4sYUTR9\nLySy0KbjwSd1Y89Pw6MNQqrZCzZ8l+HZABP4l8Ml/G/imLw1kpc9sMUT+fQ5\ndwQ1MJXy7RdypcEnQ12KSI3Q5J84rqgc7f4SNlDPuy2a+AVxvNsVyVzzUhC7\nd/PWkDmnB8Bt5DGgbJQpIfluyAVNWNr6T14g+s/ALEg08+pB1J3U1ia/Qgp4\nUvId\r\n=HlwG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5fe3e7fec89669c56504c13aadf80a71a543df78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/rtl":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/shape":"13.0.0-canary.28656298a.0","@material/theme":"13.0.0-canary.28656298a.0","@material/button":"13.0.0-canary.28656298a.0","@material/ripple":"13.0.0-canary.28656298a.0","@material/typography":"13.0.0-canary.28656298a.0","@material/feature-targeting":"13.0.0-canary.28656298a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.28656298a.0_1627582461426_0.31998413235650647","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/banner","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.9e797daaf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b92e4a48e7321b836c7395f1dfd866d9a77f97b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.9e797daaf.0.tgz","fileCount":41,"integrity":"sha512-cf+ddpKCvXAzv0MEyvunpqXWWyFebLi6NWXXhBYG7ybm1FhnVkGkQa5kZM3HOUnANxSXJDqaaEODVUvV24t17g==","signatures":[{"sig":"MEQCIGitX/7YXwYXDolsQ5iUAIJXzoDKjRwNVSPq2ME2TGAJAiA5MCg9HhR5NB71cunfReJ/voHz4DNTCZinU5y3aSQJMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvU1CRA9TVsSAnZWagAApH0P/i4+BzIfkimpTunQ5ZwC\n10ro42BJ7TWDbUwb4uzxFXuD3/HL+dA2SfSxImsjMEnrZ7TzhlyewXHQqwSg\nhQvLsmDoldqMq39V/zLRXRCkBNJ5tNLntQPHdObjnbqpuJJX+/ZiSZPp4+t5\nMGGb3MMKyTlYF8iDIlOj7H4bKRS8Vtn7/VyE4XuMvVteg0GYSqdZ7sFQw6i1\nDA8CWS0jD5r5OQW9oDpDFguVWqUThLrJFizJlqrT857rFa6b141Q6GQf9/cq\niCxH/M6Saa/6MglAGM4RPQ/FjUlVpEV5Fep9zLEp3QMCfRJ/1cA0VOmRh0ej\nqmaAluZDbDInI1uOUevxarLpC8HtTID5N0LWF8QokfAmZVLWgESqcbj2FeaR\nZFXStLJe0FJyd0a47oLTOjyuWf4FKIyS/aDTN9ZXN9AiU+F7jcB5oMC4UvFZ\n9PO2IkJvX1GMNU/3CCpgmbCEixzqLYrJ5Dy7k6nDkZFBlkoJ2a9whVhCpNv8\n7NTvGT/J1Lm5WWGZJGxj9rMVIrnRFhMDGQ2MMSQcT1ASW1AkJh1EU/ZGRcJ9\nrCpQzAQwEDEMYG7WbpkdCydflIjPEIy4o8U9t/5FP15AsssQANax27z/MzAP\ntq6rydrIpwapMbnBAeRw6blCTtr6RUcY8SpxwijCAWtZgtbsZfar63he+42L\nCSek\r\n=ZxQt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cad664597e3cc10ce42dff721f26f40b986db48a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/rtl":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/shape":"13.0.0-canary.9e797daaf.0","@material/theme":"13.0.0-canary.9e797daaf.0","@material/button":"13.0.0-canary.9e797daaf.0","@material/ripple":"13.0.0-canary.9e797daaf.0","@material/typography":"13.0.0-canary.9e797daaf.0","@material/feature-targeting":"13.0.0-canary.9e797daaf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.9e797daaf.0_1627583797605_0.036571835353800486","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/banner","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.adb9f1ad8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd4c93128f6c6f591a8fd74252e65f3bab153711","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":41,"integrity":"sha512-DkaR17LJ2/Dr8+hilxdk0wB9Z6GfqzWn2XX/dOvxBuAo38LnKcXGDrcLFlIEM2TAaGkmr6vrcp13qJ51hbtLPg==","signatures":[{"sig":"MEUCICUBV1Q4juSo05DQys9D0k+aRP6NqvNhwXlMiHDn5FjSAiEAwVgrflidOcXeD7BhF1IlgrqNlNhwse23VgTj8zRk7oU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2xCRA9TVsSAnZWagAA0A8QAJs5SmBZr9DmrtKG9tpA\nMkL4X20bYrblmddNkSsAcSXHtsJ5Y098K9/mZvTssXRJOBEL+GqK3mP7ou2Y\nBjDQruGMgn4D6kTR84U+8099pB+BwRtGzbaigdbVCRNbTFhRU8YB99fZqipp\nHh8/3jeswpQPG0oNtHAL40nhfkJmJrO/KYfeukgY7YDUyHICk+NjTP7bhiRF\nyX1m/8JUTwqV5NiYlBh+6cCiRz8QWSegrGaxhKved5Mmm9G5S9wRPluKgYjo\nLoBiM4VXd4GRREurweSD6fDmMQalpcuALvqsQ8qIioBFoXSqsy143IlZgGDW\n8QRzId9hg4Nv5+62gDLHPJ3S7OBOa7fJomv8UxqSBbqb+OXKLq1JdMGy5hJO\nEitghXgq9OQQP9+MYnwaxMGtuSXjF36YTXIPkiclizbXbrWTNAhmQwI7u2WW\nTXpgVE9e4nQeaxUawCUZk2Cj0qqedKCC3/rT6TMVvcmznq84hWuATOLeq7eU\n2TMycnCGHJ6UvQB2IHknuu4h8uWE2+238OrDGfqcsjeuQd7UbTlbMohdXeIs\nh0rq5WbAVi+5KIXWhT6zrdmdlf6wQTKtR7KZkSpox5nn8MFx48xbbZexAC9g\nr0P5WtuItdzyg90ytGyXiU221Oje+AEzzUKftXvh+sZ7nFBBtVGFMbY26QXy\nQa9d\r\n=O+8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"db010696805aae457c8d8c9da8b394efff28ee35","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/rtl":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/shape":"13.0.0-canary.adb9f1ad8.0","@material/theme":"13.0.0-canary.adb9f1ad8.0","@material/button":"13.0.0-canary.adb9f1ad8.0","@material/ripple":"13.0.0-canary.adb9f1ad8.0","@material/typography":"13.0.0-canary.adb9f1ad8.0","@material/feature-targeting":"13.0.0-canary.adb9f1ad8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.adb9f1ad8.0_1627671985283_0.9344832191346735","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/banner","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.cc5377458.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fc34537c3d5265c2141328eab577d678a8d93887","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.cc5377458.0.tgz","fileCount":41,"integrity":"sha512-/YXwP4DB+1RdSUpbjz/dOcl3kns86PJIssEBzoIzG+50QbIYjZl1eIq6FiTW2xpM5/6x2xTECk1XbuOfAw+5Jg==","signatures":[{"sig":"MEQCIF1jIPDM7MCJ3l99BM1pz+U8IF7MSaTUOiQ9IjBB8BSkAiB8txFBroQpEVQMj2+37wK42Gm0G5+4xKSHpOj5cfLVrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBtCRA9TVsSAnZWagAA0yQP/jH/WO6e4FmmF/a3zYJ9\nc2acoW6GBYxVlM6XQ0k2zdgIVF6+a6DhgDT50+OgXS/imkQN+kQ0j2EqF5dM\nPtN/JJ8p6+cRDYDr/52k0VDU6OcV75OHLbckuT3xSYwCbxUHInPefFa0Z3ot\ns2mM1cVDNfpjgFXzi22XC/udTzFl1CQsjruH67NdyCwibteepeQd5168MYrm\nJtGldLsc9d35QiQY6i3FQ/SfgMy3WZgPyqiVhQZPUX5vFRP3Q+M/zBcPV2yg\n/0UqL0Xu+bsZUVJFk1uu0wSlLA6MB6lU9sj81h0bXnyLXwuRoedv7cG1F/2W\nQQoHc/vHJy3dIDy33WEeiPueo+fX9EHQp7wSAMoTtV3SioqFUMr8iNApXjq9\ntS5LKoiQ+JBw0PREV+SP/py6U1elDCKL8qBlhYAu2RVBASS6Gm0s7E6VjqLK\nAeOQCZTP4tQ1RXZ+j1v+tEnWzEkQsv0QOnTjVAh8IwlA/nXcxXixA2SNUCS5\nebUve0GqyKNAtitY8QLOx6Y+ZpXspiJ5zvTp8gf0DOqCnDCJBXfzOsuAXeTy\n2pOHV8mPzzISPzugLZ3bWLDhLIsXFytLhVYrEl/lSD36U5QDXVqNpDOlqOeG\nSynM/pPzE1xtmTNfccclOa7mA8uAyWqWrxHdg+mv7Ocdm3EiWB4Sq1dnkhMi\nLU1k\r\n=jN2B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed Banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile Stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` Methods\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`isOpen() => boolean` | Returns whether the banner is open.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage Within Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f4f5852cfac85d68dbd83665da839943c29dd866","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/rtl":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/shape":"13.0.0-canary.cc5377458.0","@material/theme":"13.0.0-canary.cc5377458.0","@material/button":"13.0.0-canary.cc5377458.0","@material/ripple":"13.0.0-canary.cc5377458.0","@material/typography":"13.0.0-canary.cc5377458.0","@material/feature-targeting":"13.0.0-canary.cc5377458.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.cc5377458.0_1627680877209_0.5135180064491489","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/banner","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.a395972cf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20db1c8c446fd0a5b7579782629ea384464b77a5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.a395972cf.0.tgz","fileCount":41,"integrity":"sha512-PE1RJ544jaOnxZdDc7zRaIs46nGbjeSKeH7CcjrHN2Fsk7B5aNVnNtdCr9+4FrGd8Yt+tdtRZXQ4vDSk/KDHdw==","signatures":[{"sig":"MEUCIQCAtCQ5fvkisoGJbJVtTFXkLSS52zCSfHTeZqdUZJRX5gIgXsN0/dsBQTTykO8XEFNmVg6DqtsoC3qe9vlL2KIm7Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQWCRA9TVsSAnZWagAASvkP/0wDylsQuzikBRftQllH\n28rLfYc/r5F+tm1AKvVoVsmJDXcZYilKvwpOLgx0AOHLEWV2GT2AVfC/wV22\nfe8hdutXkJ/RqxQXYnZ9AF3F30EO7ef+/oaniL2l36B8C7q35E+9a75d7tAZ\ntmmA4hTzf5ww+x3qOh/uVX+Kypc1D0qXtpKFu4/iUwscSlXwedLBNh9E54D/\nFb6WDJxSm1wXpLX5glkEilTZRus2tx3ircprOLhtqnrFC4C4Z8keR99ytplr\noURn+klXmaaF9B6KMRNWw2MBk2qdHGy6fnoUyahqKvnPU9sH9eQn8SrkKSE+\nXgqu82sogI3pbbS06mOHQt7VOVWRp7tmpBcUYJTuXBoo4GD8zac7jNFYreF8\ndZyA5ki5yeItx7pgjLTMxKY1X+5X3bXYOaXuFwJ+r+U/rMCFWUExthTqICqe\npDxpLql6j+Tgl2cX6c8kik9dkBUbGx1bCEB+WT/Oqzof4+PblSJ3oVDIu0u2\nyhtrK/zZNb9uJNV3wqscHfjSYfE5N3gIwsJPrNzEE2h+Huw0tUGzJqhMiCfG\nUrJjp1ncEMQRmYX2h7/f/KMcPqezx3tQpDYKFK0SaELG3mu3Px0qMpBKPZhA\nSr93cVqp1OdUlAFG/LuOVcA48Ta+7sum3yLNoSn8/JBAeiXdWHOIZUSHfrL/\n/InT\r\n=OTl9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"00a6b6110465620df99cf5f775d52a1054c91cef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/rtl":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/shape":"13.0.0-canary.a395972cf.0","@material/theme":"13.0.0-canary.a395972cf.0","@material/button":"13.0.0-canary.a395972cf.0","@material/ripple":"13.0.0-canary.a395972cf.0","@material/typography":"13.0.0-canary.a395972cf.0","@material/feature-targeting":"13.0.0-canary.a395972cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.a395972cf.0_1628025878657_0.46225214103177503","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/banner","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.7c96e6b98.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58f077a7a517cd1f68187b0c281aca2a6a19f937","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.7c96e6b98.0.tgz","fileCount":41,"integrity":"sha512-XWrbS2ydM27cWoBLRXNgsnTdEexc2lZKSKD/9TdbiNwNALNQ8TxH7MSOEVOIJULsdbxfadrZC1NM6lKJ2GVoyw==","signatures":[{"sig":"MEUCIGn7uQu+w/Y+5SOZK9cYkTTvMyl33VwkBsl16xGY3dT8AiEA3GhRcDw43og+tOM6Gizbi8HwiUmSe1xJOEsQGLusYLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/wCRA9TVsSAnZWagAAB98P/3DQzSxm5k8Hu+OL9gNM\nacFKkkv71m9XDdFKUhKrX9hk3eZXvFt/nnOz1k4JzwgMxBqImwMVPAXkYwyn\nXft1qa60xU30V4uSNyc2Zt8VvTGFwM2aau6e6H8s/DxlewkWd6ImTePURj+R\nUFF67M5X45pQzain9NQQj8TAeH4RzsQiC9FToV4QdVDeNU3esc0biP5jzCBc\nS+gdtjHXJQRDb9XrVc7tMgSqDzsVnVwToPN2RHGR8sIZ4Hlol84Qj/vCW7+x\n+3pZioyE8O3dLsq/eWca2bdild37D/Smdbl0KizIEIMp9VXUdrN51eE8xLL0\nDaP/0/9HR+3wAqcL19i6Y1ueDbvcpvoF9pArDrJM5TpxFuhCWLYJdN9VFq8n\nRGPffSQkmr3YOHjxScRmm6fxJm06dbBpjBUbYsx9u/E19Y82EYRE0Vay6mxZ\niLWvE9U0eDDuA9Vw83D0/sc+zDKFwUPI1+L7EkqK7LieCdJE18hqJE2V/e+2\npGEtZZwFpiROU36AbUGs0NtwwkcGT8u0bLbPz99qzUyn/IKlNAIkE1Q8VYeM\nVE8cqCEjsagNng1+1TTyGBvWIcwUSMy1O4VvM/uZHigOmSirDxY3Tg8iouOp\nBeUp1/flLKHDP6cIvqNl2mw8Ffpjk4kBzI+Qn/ebacMpcy+hMDmqiMyZn4Ga\nC+tN\r\n=OO/9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"38c48bd580ff0facb66c28bf9caeebbd2a6a4033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/rtl":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/shape":"13.0.0-canary.7c96e6b98.0","@material/theme":"13.0.0-canary.7c96e6b98.0","@material/button":"13.0.0-canary.7c96e6b98.0","@material/ripple":"13.0.0-canary.7c96e6b98.0","@material/typography":"13.0.0-canary.7c96e6b98.0","@material/feature-targeting":"13.0.0-canary.7c96e6b98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.7c96e6b98.0_1628028911934_0.311673918289352","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/banner","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.a80c8b2c2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"714245e8740bd44b1bf984dfe2c062f736aeac61","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":41,"integrity":"sha512-AzhgQQFq/HjvUYWgOPpWkYBEgpjubXd2ldv+Kesn5RBYAQGLw4+ggoTiENfSANKYvewvNsXL1FSEU3wtJ10GqQ==","signatures":[{"sig":"MEYCIQD5fBIhmXVVDQZeQ/6PgsbDqIWXN6QUWU5DMt1DUqtLLAIhANej9ateljbLXZw9DOBTT7mARu63lEzi5WBEN9oYR+7n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyo/CRA9TVsSAnZWagAAy9EP+gOh/FZauzwGwZoS6ZaT\nRwFgB2rBUg9S+W8wiXtpgrFI468eGJgPpJEUb/XrdfIRs1rW7XrJBTSY39/7\nCkrghNOoVwJZJ14/v9+ZDpEY4swH/BL/8cyghCvzlOYUyPuc8NZ7GZ9lsLB6\nu/2jyPG1xCtWEhzSo52J2SJsWKIrg4YcpdMJK1YZwL4Ib3zKqH97YS30tnkX\nJGAZrVCV1OjnRWpucHHraDQND8rPWk64HhYEntcPsc8wIMcALUAKzwQsdLnO\nG6IFWEzlqQxyejo76Xi9oPV9ol5vu7IBlQc8p0QBTi1EW3O64JoWqc0Ft2XQ\nsQZK7p5wiTyT+72NRkeBfRixnToBzzX+f9r+soFfch0ngazl6qdEZ9qOtUDm\nJSBLceEsFC9TpdIucpSETV1hweTgxfLAXz60jpXYL6Gjm84WqzeAaG0V/ADO\ntFwUAgTJC5Q85AAbgWL9r1FM3ui7NGK5WyWNl7J+/OHYaT9Uoh/GlXX4wVAC\n4CBQClL3RFea02M8/03bCcewZm4hF1aPX6k7tduO3X5jSUil85rmYniQTVjr\nY0o6zi8R6WrUJewIkoR7FGEe+sfYHbe48HR8ldN67TUZFnIQs3Ceqi570Txa\nhO5iOJY+NiuJQ4P2FlUvcsIYwbpZL6Ia3Awmh/CdajZJQ0mznBO99qPHDqAo\nl8y0\r\n=qGWY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cb4d3f1d1d37c50939ed5269748eebb96f798601","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/rtl":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/shape":"13.0.0-canary.a80c8b2c2.0","@material/theme":"13.0.0-canary.a80c8b2c2.0","@material/button":"13.0.0-canary.a80c8b2c2.0","@material/ripple":"13.0.0-canary.a80c8b2c2.0","@material/typography":"13.0.0-canary.a80c8b2c2.0","@material/feature-targeting":"13.0.0-canary.a80c8b2c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.a80c8b2c2.0_1628121663835_0.3806656734229201","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/banner","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.3dd611091.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8dc8f4558923474de9dc246cd5eac76a5f3ac22d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.3dd611091.0.tgz","fileCount":41,"integrity":"sha512-gFgRj1VeLF6ne31+ZukgclWp7cR9P5+tniUEWXjvx8J5Wz8fEiOY3FIbeG2fkeYk+oAa37aD9StCNIdOpR6SSQ==","signatures":[{"sig":"MEUCIQDGyonC1fq+EePR/OXi4fLIy9htti3Q2d4qCk2xPYN09AIgL77clJYkxqzbmi1AFSgNrLK53K9ly8mY4NirzmNvboo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":477657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2G9CRA9TVsSAnZWagAAmpkQAJY6SnupNuHyiXxRXExw\npG+Xq2dHgT9ueC/jPxe0ShuEwX79jm1DQc1vqu6BXWSpCOI8p4uHc4lMrZko\nTB0Krc/Lx4NHcKDOAKXRDnY24zVOIfgdE753XBWp9zIwYLP9Bcqz1umaxAEE\nH1xO2O6E4gtiNvAFxMPAgQ593MZOIiRwWbex6sr4rTSUE0fmVbERS0sVXLqh\naNkd0MSh2QC2p8Hs6XjCFPtAhcVzJWkieYk5GokVSL2k7gPy9FHEYVfu1qDf\nqKfkCK69mU2OKSlrcRzFTT+yYqae5JJv8mVQ6ZJRqnTuWGfKbEtym5mcBe0T\nfCaiff1cMR1E3ElItSwgXjXCiJE3Jzd028/h1aYi+/XYK9JkaP/mN122q31d\nEkWyXqy+iIjYCtIze1sYhxalpKIifPjehMRzQp8v5pDqbmmI/7V5YvCYqVK6\neUEa1yVX+iarOJhy+j2k/jnFhx5/rl8TTgUnGml602fOvl0L+y0B2gwr1n9I\nFfiMFY7xCnw4RUlZL6EWKDdn2CGmdEajHhmrgV/KO0AD5EYIIH6MZycpNiBH\nIhbyCQ1QQdmKRXGEB3bRL8MiE6nC6uU2i5g+rZRicpW9+Ppq0Qpea8vIs3Xp\nZrunKngbP9y6BQ6G6fKL5SM6f9Zo04UKEKQM0ieM7Q881888LyFF9UfehLRt\n7zH6\r\n=nFDp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fc6a6a59d9c86ac1f85efd94a4aa6a8e4c27c379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/rtl":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/shape":"13.0.0-canary.3dd611091.0","@material/theme":"13.0.0-canary.3dd611091.0","@material/button":"13.0.0-canary.3dd611091.0","@material/ripple":"13.0.0-canary.3dd611091.0","@material/typography":"13.0.0-canary.3dd611091.0","@material/feature-targeting":"13.0.0-canary.3dd611091.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.3dd611091.0_1628135869547_0.9210469893165205","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/banner","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.5dee37ff6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb4c4d5ce9741fa400c94943fa665372bba602ef","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.5dee37ff6.0.tgz","fileCount":41,"integrity":"sha512-qFcjibE8eYWO2gStq9eaPcI+uCXSkhu6lABxZBrVkgLZW/5oMIgj3zZM/yqDozZTb96NMqHPL8bcOVeh81aUfA==","signatures":[{"sig":"MEUCIQDCypLl0OF3SeyAaMbKyNh8FvuGeh5drSwXyj13fN8TcAIgPDD1SlJZYbIuT+Um1rHCqVTqydTu/CLGo+MJs3Lk0uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCNKCRA9TVsSAnZWagAAHmQP/0a3nbPHH7mImtvpyRpa\n/sJnZjpyrQXhEBk4r9IeBr/PMBYBC46/OK+eGMdLjtsqthkGYxDtb8fr/Mh+\nXZBEfM626a+WT+eNVueyRBF8gkDDD3Gn5fvpkr8gxvn3RyAyEyyOqhjhRsBi\nFrmC81Yo40vLo34TWQHlfTrDXx7tWpkaFd/ujPRGoI81hGoZ0YgBvOm83Ypx\nzpDQ5rif44KDQ8eiMXKsfjBpbXxQLfgQgFXyrKE5z148DhUN3Y053EmrwUiw\nqBdpBrevIUhOEaFj5mbCiQTZIc8NQ7W09HuvCwsN1s5Go0R1QudntK0V5+iQ\nn/Ww1+5DgyYaxW7xmg6OFcSp4X6rPTUOe07IijOQq/GOzMmPRcRlh+unye9Y\niOmAAPOEWpUHQpHCVgtqZizEvFKrm2bazfOrNqQgPCUif3gLuZKQ5IgLZjJz\nzkCBTSjsRv2s4li21jEi9SUs8Lc0uxA8aTNpNPtcg7dOJfnmi+CQOvOGhD3A\naTrCVqCCoNiqQBh2Oe+1amo/DNoBgVX+xFoYoIvfEQG0NhlXQDFULpOL/ozC\n08yMBBP1jQ51vxM+2ptb03vkNP05CmD5/ZCDPgBZbHgA5UNJn+PNBu5K7cs7\nzwCwgAeMy44cCZ9GSe7Qa7I3KoPPj+FQUkMKNpW4TWiA8XDS2CCOrAg9+2XH\nxbrO\r\n=Ve8i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a7b521f6e807878ddba15c813505134621ef85d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/rtl":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/shape":"13.0.0-canary.5dee37ff6.0","@material/theme":"13.0.0-canary.5dee37ff6.0","@material/button":"13.0.0-canary.5dee37ff6.0","@material/ripple":"13.0.0-canary.5dee37ff6.0","@material/tokens":"13.0.0-canary.5dee37ff6.0","@material/elevation":"13.0.0-canary.5dee37ff6.0","@material/typography":"13.0.0-canary.5dee37ff6.0","@material/feature-targeting":"13.0.0-canary.5dee37ff6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.5dee37ff6.0_1628185418307_0.5204078189414538","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/banner","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.bf405d22a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0d66683d7eb443f20b842c94fa0e01bccd6cf3d9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.bf405d22a.0.tgz","fileCount":41,"integrity":"sha512-O4fvTGt8l8/xS03t+9HLaxT90w2QyIV4Lah2zFsJNGAj79kgMUQuB/2G5luToFLIo/tMWVG/DJfSpOpX7EBjNg==","signatures":[{"sig":"MEQCIHti8LZS4inB4hx/nxlpfB5T2EryDq0ucEwK3okTx6MgAiBnqLtIJfi/GL4Rp/xPfjLkkEZsCiYz5i39crsXoAFudw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":505481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEfMCRA9TVsSAnZWagAAPYcP/jW/9j4x36Tv2ccGWpyN\nlnQELS9xPAVvToTWwokGvTMC00nw4mNQ7iu4+iptQ2YJHxlxGT865JVuvynk\nN+nRC/vrTq1/XGcPLFwRBB187XjP56nU//9xgzaLE/h3pepXsWHw/PlSWsCr\n4Ue6TaQTQXlGu+HBd4BdqNeHG1nFrkGwge7xol8nkxhKg25fWNeuqXqKlVLO\naEkHS0bJRjiapw2qjopJMz168rqCJP1a5pnR8FnicVyeDNDX2R5vaB23dCwZ\numBqjTzXJe8uUnDW5oL3PX3DJbKMrfdIPui/QggxxwZI9MAkeSOB0blE5dVS\null9e478LQ12bUbJn5v1WYuTRP1PIfHUCODwnu6IRPBow2NHQ1iR/IzuBVy8\ngpm+0Wgk4OG8OMs3OKhEX8V38MFo/e1pA+WnUEeMDi873XIezBXciMNSuaPn\nDWf3qTD3v0WUTq3lw7GoM4Z9jTJZsXD3CIEr4g0DmB/m111yFQ1ON+PZVtrE\n9R8wj5iYj+G97CXFR3vTEAOmPYglyJmz8hlt7CITfbmF+pary6R2R2AzZrzE\nPIarbCiesCIKnNzhWAiesanfWWxDvcEYTFm79qw11xYTvfBjkzeNRTLTOaDz\n1qvPCEPx7UXtTLhC9PhSNaKPYRsHYxgERHZq0vXzn88k3WXHRx9sZw/9XWhE\nPY0y\r\n=wTHk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","types":"dist/mdc.banner.d.ts","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"00ae15a245c6a46fa0a13aa61a02e5958c0eddbb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/rtl":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/shape":"13.0.0-canary.bf405d22a.0","@material/theme":"13.0.0-canary.bf405d22a.0","@material/button":"13.0.0-canary.bf405d22a.0","@material/ripple":"13.0.0-canary.bf405d22a.0","@material/tokens":"13.0.0-canary.bf405d22a.0","@material/elevation":"13.0.0-canary.bf405d22a.0","@material/typography":"13.0.0-canary.bf405d22a.0","@material/feature-targeting":"13.0.0-canary.bf405d22a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.bf405d22a.0_1628194764567_0.6784483335619635","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/banner","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.b47dd37a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"447757e763ba6b1d6c0cf3a6e0339bcaa4b1f725","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.b47dd37a6.0.tgz","fileCount":40,"integrity":"sha512-qq9OK1T0lZxfOoifi/ZLVAG5rqAeA65GFT0eCeumA5awthkX81KFHOaUOAbIFKMEh0C5nRwe4QzAX9arlInfqg==","signatures":[{"sig":"MEQCIEwmXX7qBJTX3YHNi9+Si14Gvo6i5AiycZWm4dxigAvKAiB1nrSjH7Zs8GvrrVYaMRQ0oKLzKQr6cnUyc+q109Ws0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492031,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE9BCRA9TVsSAnZWagAAFQ4P/2Xf1S4RQMeRypmbGXP8\ne6jJuTGzYgkgozkPziJIEmNLCmfjhABwWXXuC9zrGE+RK5Pu4kMr9qYsiXrb\n+BPOZMrFIbx2tKJfgck3yeHOelp0gTESVCWCz0X76pwwRu03X2/Tv8k8TUjX\nQbH1RUb3aKKNfxmP2DFTXrjZZ2DGONXI2A1+EzZlJfH4hRaR8XM1m/aoVMsr\nX1aujTcIiL/CpOLdNVpDE16i3Eis6knJdnETB0zsIYxaAyFOIuV8OUNk0qYc\nWii/TeZo4vnIj1sF4z4XHxQKBzIKopm/B/oE/abjomNFDSlTtaz9MKtQlWf6\normY11txy12qoaLmUlF1tqJ+RgZiO09nso7Ayj6X1YdlulOwmA9t5y1AHaK0\n5diOvcMpW2XKQ0pLr5DdgpzkMPbW09I85WzUgTACzEvWb6x+PfUH2QSrHBsr\nDQEtjMx4TveCz3GghJ6VWtJT3lzGY+LFtzO16QvMz9ZKa5WLhptb9UWZSdAB\ns9lsBTg95gDmS270m1+bnTdP3Z3AzPR5bA6wWGRP6bPzlgztBTpPTEfwaBiV\n8KA7kLpeWViwy5VxvIhWVQzYR3IgcL7IC1LRywuK06f6yMjp2b5U653PNLL9\nSk+wX8ol/yEiXahgwmHhVpoO8YFOBA0qifoAu18WAdqPoQeyzIzsKwsnOnfz\nnZSU\r\n=mt5A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"47f67e5fb310c13dac39b9beefbd6b53fa54d1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/rtl":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/shape":"13.0.0-canary.b47dd37a6.0","@material/theme":"13.0.0-canary.b47dd37a6.0","@material/button":"13.0.0-canary.b47dd37a6.0","@material/ripple":"13.0.0-canary.b47dd37a6.0","@material/tokens":"13.0.0-canary.b47dd37a6.0","@material/elevation":"13.0.0-canary.b47dd37a6.0","@material/typography":"13.0.0-canary.b47dd37a6.0","@material/feature-targeting":"13.0.0-canary.b47dd37a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.b47dd37a6.0_1628196673283_0.9108462890122466","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/banner","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.6c82b965b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5765398ddcc3cc5f0f31c7e11c0f7926e2a1f3b7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.6c82b965b.0.tgz","fileCount":40,"integrity":"sha512-L/bohOKH6N3pTjAuDEAPk2bYui6Cq+UFpi5vzrAa5P1OJjOxtifcxFqzXhuZnnPHZxb2tFMPVTGijrjH9k/W9w==","signatures":[{"sig":"MEYCIQDr/IO2MZfXWoZDsbEj+c7qVkgeOfLgvPkib+R/YOdMVgIhAJvrdZK0D7j2KtvyzUl5YZ/EfPOmmkAtFv5PPJJ57KEk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWBICRA9TVsSAnZWagAAMZMP/0q3Ew3eYtID31w2s1fp\n/J1vuNSYhxV7FRlRpd+7+h4ywX7llw4y+k3kK/cxGuA0SHgHlF9W8tm5eWWb\nugCuY5ZSpSdaFR9ZsWBoYE08h6ZF05H+mk/CiB39eyKyL3y55hgIm7mUCN9q\nQAkNfknucwlmHF7B7Zg6yXcHWwM+c3Uf8f/eKA6MPAaPPQqvdaqlFSF7V+FV\nIsY9y8ON7PFtR89NowGifLr19KO1CgwpL5oswR0Rr7I6mhRNa/i8sYCD1b+0\n5yDbLj5JgxH99TAtoo1YLz+8aR/z4mWUkvAtEVMAEZgWlxnZWObFFGNr7Bbu\neAPifupNn49+wxIeheqVmWmGsOcanL6+OM0JEjCBvKrrTNKy2syW3GmkrmA8\n1ho4WUI1Mxh43OmdOaxVgvElDby9vnz0PMcnlyj54K7V2TeCkZRGTEVibDHd\nxHF9lwszUq5XVMePni2kDX/+cqWf6+7b4jLSaGMH8Hep3mcz7DkYO6LNIacH\n7Fdh6+uDYKOnP6HQYHS4ahGpqzUFxgXkaviGLdGP7eamFwZYVG66j2Lokb8B\n1pBciH55h+U/Q0X06gVmc0jTcTXygAOcd4xUJGFkErb5y6DsE/MYHghUodiU\nOPOBTRrhMVDLcP1oMsWGOhF/gwfg7qCn4bv+5EvdEUr0LPCgj9Pn7NcGyP6V\nXf/8\r\n=tzfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"434420b9fc9470dc77940d2240234a564be58d02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/rtl":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/shape":"13.0.0-canary.6c82b965b.0","@material/theme":"13.0.0-canary.6c82b965b.0","@material/button":"13.0.0-canary.6c82b965b.0","@material/ripple":"13.0.0-canary.6c82b965b.0","@material/tokens":"13.0.0-canary.6c82b965b.0","@material/elevation":"13.0.0-canary.6c82b965b.0","@material/typography":"13.0.0-canary.6c82b965b.0","@material/feature-targeting":"13.0.0-canary.6c82b965b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.6c82b965b.0_1628266568861_0.6815695429600488","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/banner","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.4ca11fe76.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f197740c54194d0ed697706100e9dc4145c9392f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.4ca11fe76.0.tgz","fileCount":40,"integrity":"sha512-sAznld7INomHKQpc6oMhlhZF7Kiftch+9pUXDoL+5K6sV3cSNJ6NPooY/3sD3R7NQHmI/pP61Z1/sj6iFolQ/Q==","signatures":[{"sig":"MEUCIGJHI0KUAfBCgF+jvkpzxNv4J3H+EH4Xs4LX8NM07QFXAiEA2V8cKQzhXaQIXRO67hV7jl6CJOCHjuudEawNedenxtM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWyiCRA9TVsSAnZWagAACHwP/ibO4v0h42LI3FrNr+MB\nWt6bKdjmznPJnU3yEMvybXGTx+Nsaz+AtVq2BeIihoNLth+CHKgzM+ZgVQd/\nibxQxWWSxACBGzhb7flf08CURjgFOMiKfXqttD3GMwYe38i9xaz9C0nnTc6d\n/C2/kqvwQsSu0kWmNi6wfqhsd8hLp2OT3fI8CkwjffygQExBqQmhq/eggJ04\nSLiv1cX/Y+5aURKqBKUXQp14acgwvp1WI7BhF+VxweeuJvH1fAJbOOlrPxLV\ntSSfyzuWLD+eYS/letasWe4NYzdo+4bM1RJBaOD4sObq9KxB/LrURSPeGG46\nFbVnoux5Oc99X2+xYAhA6yUk4z+dm2Fw8UxulUMULC/aPRWnPvNafL65hIJZ\nOu6nghsahxuIzBzY/GlTA/FLA5qlmpYdKz658dM7qgs7tPtHduxQM8G8CjIm\nKMFeqVt2WveEI4moUcYKEyptpg63ShkE1rkCvmIFEU2vpw1GQiHbf7uSoKEF\nb5X1G0jeshKD7SpfT+8zEBxqo96/u12OpnAuOCO5ZG07JKhKdu+PCZHG44RS\nQfofnul4/sWRbLmYyCfaB+nQkdCWKCvS6b5N1w+c8ztjsqKtAXk5rZAvKGEa\nETm1u1bGp9uA1wUIf5M0qGWUiRheR0h1O5KLcOvL+sGRl2bc3/HG0Ke4ay3+\nFuAT\r\n=IGO3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f012412147804a7e8c4bbcb205a7a48a045cd694","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/rtl":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/shape":"13.0.0-canary.4ca11fe76.0","@material/theme":"13.0.0-canary.4ca11fe76.0","@material/button":"13.0.0-canary.4ca11fe76.0","@material/ripple":"13.0.0-canary.4ca11fe76.0","@material/tokens":"13.0.0-canary.4ca11fe76.0","@material/elevation":"13.0.0-canary.4ca11fe76.0","@material/typography":"13.0.0-canary.4ca11fe76.0","@material/feature-targeting":"13.0.0-canary.4ca11fe76.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.4ca11fe76.0_1628269730816_0.010016505932046726","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/banner","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.510cf90f2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1811d2ace070369406fd8cdd06659c3ec8a0d830","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.510cf90f2.0.tgz","fileCount":40,"integrity":"sha512-VepinQpEBYz6ZnOjxT9dE6tOfjxnolwzQS0b6ebt43bmfXLLOy+dFZ/glaGQhfeVD7nKs3xp4+0GC6pb1rGqdg==","signatures":[{"sig":"MEUCIBcYIu2bcF741C3ffTffmrk6THA2jw2A9Wln7p1gmE1bAiEA8zrEDsb4c8Cqkf7yGR6EkH8TZLdt1VtuojDrLCqxaVU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWNuCRA9TVsSAnZWagAAax4P/R7XSRwYol29WTMiZh83\nWP9Jon5pbpRnxkWN7ibO9sKeLBSxpbbwiAUHvozUWii2KGdEWnJFmYkefzH8\nK/n7iUk0iAT40tbfZNxkKnD1cr6pxoTS6ernsKO9fY9JKuVF6NlnlrwyerIE\nSqK0qPlFLabvxIeT5wlwwpB/1XdP18uhUYtLMx2taM2Vy06ireNd7dwwxMbV\nn4RF/9QJq9ZQqRrAWzQ16rl9CPlVsscnCeFasIsLw9LWnjccjAkkvxVCNTlo\nURdlA02NablQNICH8hA0Qpj0EmCSFvp6qZAl9szQ8E7o332JHOxGB7WaSQtk\nZy2++2LekYFLl5xC8x6IPc/ItTljNhh079IAzq09lAbgfncEIzekvLqUUZJj\nfQqh+TR3zwy24+sQKMbiv2MktybLAf59aEU2SQKimtVUvgMKwzK2zJ3dPasZ\noOKl2mKPR62aRORLSDGnyS1tqn8oB8TFgByhoisee9C6dhuQ7obRYnyDAXTM\nodnbrQqcvnvJxvJ8ueYITOWwHz0aMmua3gXYbU0NYyzHA16EH8ebE2i2dTX0\nTMB7JC3dKQhv4SNCXWhw/TBRv2f04gKNw0YNIgVp+RnQgfn30GsLcgyFXuH3\nfS9Fx1Yodgn0yM8zqCGLRNlA9JnaUbnIZ3JNEDRPixoH5FmgNAO5N1WQru4m\n5bpw\r\n=R9PU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1e11d1f2c4c830419dc862b62700d4484604a3fd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/rtl":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/shape":"13.0.0-canary.510cf90f2.0","@material/theme":"13.0.0-canary.510cf90f2.0","@material/button":"13.0.0-canary.510cf90f2.0","@material/ripple":"13.0.0-canary.510cf90f2.0","@material/tokens":"13.0.0-canary.510cf90f2.0","@material/elevation":"13.0.0-canary.510cf90f2.0","@material/typography":"13.0.0-canary.510cf90f2.0","@material/feature-targeting":"13.0.0-canary.510cf90f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.510cf90f2.0_1628529518104_0.3356678966500639","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/banner","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.17580ebf7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9db33c773ac3da44e7835fdbe3aba7dd7eab6180","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.17580ebf7.0.tgz","fileCount":40,"integrity":"sha512-yxMJAfCmM8+m+a2rlaguo4NGnIIDTvy5guLiiigZHcljvuvU49f36qYlvqj7nLJj6DDkyZrVx75ZBDAvcY+VCw==","signatures":[{"sig":"MEQCIEFhE3q5v++tnReH67ssT4vbrVebQQlx70Usx2YXfiPdAiA3nf3qZiMGzL0ChsVZytXPbZIy4yqb1nRr9PhuTi3o1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXGSCRA9TVsSAnZWagAAPBUP/3L1VuDtwg4NSHQgjh9r\nre8mGXSVfGm2ycxhcgonBiiXQg2uZ4a6OZFq3oh+plOX1KaNrP12SF+lQlKU\nkH2J6OT15GauPJoDpILtn6a/Lbs1aVxWPiBLnU0VfpICqjcIdpRDhVDpj/bJ\nLkI4b6EF4oGho3U43CsfwucrCwfxGzPWZ9lIOiPI6r3t9/vaWyQSGShgfcgS\nR+gETDL2EW69JA6OrCYg14pLrgdXZUshiqhXNfzJ2P84eYyjVYNbUefBiJxG\nKEcHfBtsK4NlFjKCUXYjgmDh8Pzs9RNL9Q++N+YuKiSbwp84JrSbongvrxrG\nW6RjvOPgnmwL4l7KP5UweKzEvC08HQnzP6w2JR9o6gq9YmXgDYQsnwhiu7sO\n9ZO0VbaewA5+y/7FC1VB1YgG2rTbO/oV2B6ywXkKL1PHdOikNvGDMACSHY9n\n/PzJoulNJN0ql1xeefy7EZVfJ/0Qs7LbGgkR7DFSirgoEDVSVNRJeY+mfvKr\nW18TJnyHYW/1cYMsSRHgXBwa26U8dj4XeaEa7L0j+jKRweXqpt4+w4dqEiwV\nVUT5kEKddyFWuzNzEMlKorKvPbwRhz5h6pNOaerg6kKJ2CiMY6a9dLrGW098\npofjCZ+fOsR4vvGloJP1G2+L6vZXs7w0tV/NUbi6CIdfZGuJK7bejDbA43/8\n7KiC\r\n=aXV/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5bde42052101fa1fdd48d89c3dde8b9e99bdd1b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/rtl":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/shape":"13.0.0-canary.17580ebf7.0","@material/theme":"13.0.0-canary.17580ebf7.0","@material/button":"13.0.0-canary.17580ebf7.0","@material/ripple":"13.0.0-canary.17580ebf7.0","@material/tokens":"13.0.0-canary.17580ebf7.0","@material/elevation":"13.0.0-canary.17580ebf7.0","@material/typography":"13.0.0-canary.17580ebf7.0","@material/feature-targeting":"13.0.0-canary.17580ebf7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.17580ebf7.0_1628533137911_0.8748417635935781","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/banner","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.7249a3060.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52540e2fc73306716c401bcaac6474f0728d269a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.7249a3060.0.tgz","fileCount":40,"integrity":"sha512-FjoOKb8Hjh+QkyWfXGPrqtxj6Xn1A/VzZRv+DX+PR3ou9nfJqMUDv1+kKlouLPk44Ovh0UELx7FUDkWB0LLbmA==","signatures":[{"sig":"MEYCIQDU4oktMbpLb87GKGpfTgtqkajyjlSBDp5/pQhziJmjJwIhAL/F+nG8TqJD9S6Y9XCGgiY4yVO7JBV0gPhI+sjmYQY9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":494655,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJ8CRA9TVsSAnZWagAA28UP/jyiij3sRz5h49Lw7q6l\ntqPjFykAhqFVqkrPnXXQZSOAMAk0XWYWDpBPGfCw3LQiJUNfzhRt2cYVaRRb\nAHtsCOahpXSVA0CtMqWswHbnHaAg2LMpRNBM3g52zbZUUO1jHHwH4JCeOgAv\nmPCYju5r5JTE9J1QtXsMM8KSzan0jmmzkMt/4oycJ+jc2BRGy4pF5DsNp/FA\nJ6pvlqRIRiU4APmjZ+FRmwL+2EtsYpi7ABQSA+F/ix97IbQVMZvNaL+pM1Uv\nhgd4lPNXwiZBAYgr7QmjM/e6EgfzWzFAHutlVF9SrdtsWrkZA3hZv7q/YGmS\nc8SpvCuaS4//AzHvxBaLnkFHKtJ4FeguWgt60R3kXg1scdTaF4hWeNsrszdr\nxRSgUGkR3ODf4mBzKFPpZFHMa/UVM/s7MPyj0kNkKrDcorSasMZC8qsHsUm3\n10vdDIMBP9+xU9M+9DowVoUpacRp8WFwHGpbULvZa15W0ZD+CXEv4axQbxDe\n69uH5t/bTzy0ws2TJimVF0VGnX1WvJRlRat61ZsU4ctqrp7ySUDx3KeNLL+d\nxQqNBDg+Tu+ZORXXA9sKpCcZDxST2r5cT4PqmbbniDyL9T9O19EfOMMj8BaC\nMTZ4HwvgLdxCySIdjjqTDN7BazTjZKon9fqkGXhCcvf53ECKKCWCCYDhzD/y\n7Gdm\r\n=gdox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3412ad644836acdf464e70d019c36080ab377321","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/rtl":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/shape":"13.0.0-canary.7249a3060.0","@material/theme":"13.0.0-canary.7249a3060.0","@material/button":"13.0.0-canary.7249a3060.0","@material/ripple":"13.0.0-canary.7249a3060.0","@material/tokens":"13.0.0-canary.7249a3060.0","@material/elevation":"13.0.0-canary.7249a3060.0","@material/typography":"13.0.0-canary.7249a3060.0","@material/feature-targeting":"13.0.0-canary.7249a3060.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.7249a3060.0_1628533372783_0.7157312624803156","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/banner","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.4c405863b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0f80eb042fc8dc0fdf974e7a67477b616073e71d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.4c405863b.0.tgz","fileCount":40,"integrity":"sha512-DqletMEzedNnzBmCAOvQqXyT3JY1fO+//OhEn5MJNuPfYO0Yb8eCPIYTVVNEU4mRZo3k7RhZlI85Mo/fsYzx+w==","signatures":[{"sig":"MEYCIQDnuJ8VbPTXRtmjRso9+dm9u5M895s/F8TEBezlHeX6QgIhAKADBtPpNlUAZiQ9xblc1CY7ZIfAJq8WVY7BvE5rn5HP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497155,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpxCRA9TVsSAnZWagAAG/AP/jFgmiM42t/ynq5qVhRS\nSZ3vRbGCCbskG/2OZDBmwyljXZPfLALfcFwgd6zoHygtOIpnSu9Lwc8jrOgp\n/4C7b9V+yqdsEWumD1MvMO+iPVlRYW4EV0OJZTfYq+ozAlUe7bEVDH7hED+/\ngEGJftvd33iDTkg//p8BUFb+fq/TLhNI/tKEHNWGaMDjKs1jYqkolvGzPlkL\n2jE7dUviC6xUzMjFQ0ZfXa0M9HF/gsXu4P3G0UeeX93t278/kzYc3TMCvzwa\nqlrGcbk182uS9m/kNmP0FtDOkXIGpLpaZB+LWXy9O8wD7WwdkXnydRDdL7XM\nbN8XswrLFp+AOjI6Mlo+gTDx58q4QjSk0u4wsbzeSdU4Vao03zQkf/QSkWbg\n3QfmLJZ9XN1Rm+coYkZy72iIZhFpSq4vQwPTsA99eF0u/k4yNSa/6XK2HQ8u\nsrdnKMjDCFNbjRX/c7WMbjNHedyKAaZT1ns/ws/ifHLP8QSefJ71XumcVLB/\nr8W1AjlkaBcePlsg4mp5cMLtVjhG2N/PIKTUEBfCe76Xb7REgSWO8zU74Hu1\nyi/h9lCs6sS1w+GtJHH8jC9Tvx/g7vAfE21hesZgCk34nSH2MII048o2JKS4\nzUMvtbqRDGGQspry2og64si0XW5FNZLOg0wPyG/lfhEIyI9lIsE/+iNrYB6l\nt64N\r\n=f8cW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b3861554313a19a861a5f6850f9df33ae5bc42b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/rtl":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/shape":"13.0.0-canary.4c405863b.0","@material/theme":"13.0.0-canary.4c405863b.0","@material/button":"13.0.0-canary.4c405863b.0","@material/ripple":"13.0.0-canary.4c405863b.0","@material/tokens":"13.0.0-canary.4c405863b.0","@material/elevation":"13.0.0-canary.4c405863b.0","@material/typography":"13.0.0-canary.4c405863b.0","@material/feature-targeting":"13.0.0-canary.4c405863b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.4c405863b.0_1628617328867_0.6264988755848939","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/banner","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.f4241a42a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35f40c62fdc0e403dd77cc871a2333ea67c6b1e5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.f4241a42a.0.tgz","fileCount":40,"integrity":"sha512-34598YohSBM+dqjl2nxQXHpUqPkB930J9+vng09sXzryLEj/ufddbQa/6yf5FsGIxcG2Pxs77m0X5/IbkPnJXg==","signatures":[{"sig":"MEUCIQDS/JvFczgrJw9zJ/ndk3ctJV4UBhYPziQ1M8rHkrDQzwIgbJI7vGFJZDcTFJtz/WtUR7L+Zq6qr1Kko0m4DdhmGvo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAJJCRA9TVsSAnZWagAAPuwP/j7HmjZweTSKZi7QwO5n\nlbr2e1rUTzqOnXHMcXSzLzQr8LP1hXr8mfJdBI6+0TIKUDtTGMoAbnKNfmuB\n0uLmMOHrkcGrGp5+NvAg4ljV+fk9FjY0qtmedaq8RrWs7RLobeYjp9Amj18p\n07w9IPH4OWOv8a6ov0eJogBlO2jnDOnyhlh+GiI6M76XTCFgmVKYKvRoLjLW\n0MajhhGRnQznXTS2/iCaF78eRbmqa687WmbFR1FQGYYI4Qcu6ydYWTJwTjbK\nAC00+hM1cN2uZPdFZuJfSIlzCfGBrXpmfEKTJicLqiLfzoH0/Tw4VH7FDabs\n51CYh9Jy6sfFxCt4miK6oVK5AUdxMkpVJNMUfQMS/tTyAOrYn6ryc5qVPrMk\nxsn7Ahso2cCLjy3DU8IU0G4VVEtT3XDfeBtTl0OlT47NO7ImoJh/Pc+B7TW+\n1fs2FrsUMHdTkpGD7nSogOWAEM9eAnisIMZdPMoxqoXRoVJ7ovOkVufglMXF\nNjT+7vWUKSEmxdpXomhkbaf2AXQH6u6SbuEfNPGrtLa8X3amzGvEp4Wv31gr\nBbug2CzKXnp6dRsjSP2OV8D5y/P5k9i+1WXMw4C1EQOM7VyB04cv3CVLTqE5\nZ8VZToIYmeW+6shRStdhX5CsOHXv9q6JKj8p33UQhIckKJlwER/YcG7WmP1v\nYZ7O\r\n=sw9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bd97e42dc6a97fb74d92a9cb04e919c5c8af4da6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/rtl":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/shape":"13.0.0-canary.f4241a42a.0","@material/theme":"13.0.0-canary.f4241a42a.0","@material/button":"13.0.0-canary.f4241a42a.0","@material/ripple":"13.0.0-canary.f4241a42a.0","@material/tokens":"13.0.0-canary.f4241a42a.0","@material/elevation":"13.0.0-canary.f4241a42a.0","@material/typography":"13.0.0-canary.f4241a42a.0","@material/feature-targeting":"13.0.0-canary.f4241a42a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.f4241a42a.0_1628701257526_0.8272721492694952","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/banner","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.0ad12ed3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38d31d51168d87f12ebfd3d17c2d3618e25e8952","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":40,"integrity":"sha512-vNRYTVH0kAVNPhdUz630x6qUV8fKx29LifVZQ8bNgdox5y3czlp8cGVSf2Zd5GP1XDO9N7gQ/Vgm/f7NaNONZQ==","signatures":[{"sig":"MEUCIEvI+YPPyLbzZd8hnY2FwY4QraFDvn+avKzCEe1EtR+NAiEA7jqWHGgE/rM7vBpmXpzq2GlFMYuKGEiBrBag59TmypA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFcCRA9TVsSAnZWagAAA5sP/1y/cg/tf4b3Nk7+mBQr\nDCnsg3r+7yumpwQL7FbtRAKU78LRlCCSPMxlrrzHllBXZbFCL9ilhoDCvOCs\n/IGZd5FGmFwYGl2mdB4VU6Nlc7bhQwWKY/Eg/X32/aWHFegbFOWRlCE+cm4i\nA2Aaxz3j/7EjP0nD7gnBI8YuTXcg2IRqvtlyuBse8EKqaMXQdqoseBKe3+fE\nD1uOMEFvy9kXqtw27fGx3a3/U8sY5nvDf6bZ1lZE5B1R3Gi2pNzHVjZrWAaF\nyolG7gs9mrTdBeJH1i7mWt/ZNnRdz4jBjcd9Z+c8dsT+yFRCfOqoH5eCb42c\nZcnN+4VG+GR5xEOObW/0rFCYYkQ38bm63VOjE3g7gWZnwxNMta204mb0gU+M\nHfTIwqIPYWd/Hs9DmrbUrNmE0InMJnVo+XbQDJSFC6qZn0vimBisz+Ims7ZX\nfK8EuD7XzbDCxt52lGRyvsfdpOH6ic6sJRa+ewBW2bzFR+H6mrUjy5JQfy3c\nJ321YnvQ5jv1nAmmSLJLUAhDZw+ycwptX4aAq7WFu5S0T1V7LXIdxj8q/6tR\nyS/rsttVcqEXZ8y6wqNsY5JS8L0/Vl95P3EXtNalxgT7z+AQbhELpfYgOryF\nLSeZcJtPx8gEk+VlZjkcLV83gnapkqZJskD3ARJeCD1pBwZ6yIiXvKoH8kGA\nCWP8\r\n=uQPz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"db28e7f3596365b1d41f14b53d656a743eb28bf3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/rtl":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/shape":"13.0.0-canary.0ad12ed3c.0","@material/theme":"13.0.0-canary.0ad12ed3c.0","@material/button":"13.0.0-canary.0ad12ed3c.0","@material/ripple":"13.0.0-canary.0ad12ed3c.0","@material/tokens":"13.0.0-canary.0ad12ed3c.0","@material/elevation":"13.0.0-canary.0ad12ed3c.0","@material/typography":"13.0.0-canary.0ad12ed3c.0","@material/feature-targeting":"13.0.0-canary.0ad12ed3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.0ad12ed3c.0_1628717404240_0.8057401913448066","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/banner","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.077dcfcfe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df577e166a008b8f35320d9691cb5f58a472b64e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.077dcfcfe.0.tgz","fileCount":40,"integrity":"sha512-bcaAPVXKp5XNWoL3Tw98XiK8nasllefhjjCMy8CHGUKhn4GT0noF074gyop5Bb8HAslsJjAcO5c1F4xIyjYJew==","signatures":[{"sig":"MEYCIQCBDqaUwmto7OJOheyne8rT95tEvE3hT7lIqX8Cq/SDowIhAI0zzsMyo/ynoOhPH+SjdFjnK5La5tIgjJcd82cTTmI5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDZCRA9TVsSAnZWagAAI2EP/3y8uTjV9iVVlPR7LYSb\nYY7YGjO86iCb4zS7KNtCQLhJt37bZtjzYLkLlK/MBzgAwshF9IJO6rqfjCdb\ncj8gz593cp/DvnyATXKuPhfjtNCeAtjC6yj00uRnCyBl2oJk3EmC8N9IXqB6\nitlIiuBP7kFLhAV0oxev9fujpk4DrIeMjPJA7vdeymeGrf6TMhk+xX0aMxGH\ne56med5ScllzDeEI1bok+AE8NGhPJbkR1G3SfxHbk/3wgwdV/TX3tRjHS6cZ\n7MTiNpz9coXIif+Lizqw+ApqrhgPNgA3DPUkB+VM9HpkdhGG6ac1d+IOgtlU\nl3pKiZXNW9b3i1j84PL/2aZOd+abH1NOcPQ7p7bzB1sXSgLd2CGAWQQ3FRgN\n9d19WF4I4PBKOAmVLQ9fmfhcBGIAh6F+1nQ3Wy337fZTobWOt+Fyyye+e3Rr\nDkHiBB1feOcWKMgR7S1Ly7kfmnNugEz+vZxtU7omQs0YCxOAiwPg+/3vIfg0\nf+69fqSp6ZO8oPNcgAM6V7aj+twX51EByDdnldhYEZId7FuDQHqbFbcXbxmD\nCywHdpM9YEvg4dxuu2VCeKhMBa99kfEAtIWDsTAh9SrgoazVs4MbQ96By4Pd\n/pA5fSdmy/5NKjZcxUiBek6PK5oIcPLp23u3mUhefoLwwPdHG4XlPp3qHb8l\ns50c\r\n=0iN3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0ce840a62c702182bebe1a5f2ed037bc002472dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/rtl":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/shape":"13.0.0-canary.077dcfcfe.0","@material/theme":"13.0.0-canary.077dcfcfe.0","@material/button":"13.0.0-canary.077dcfcfe.0","@material/ripple":"13.0.0-canary.077dcfcfe.0","@material/tokens":"13.0.0-canary.077dcfcfe.0","@material/elevation":"13.0.0-canary.077dcfcfe.0","@material/typography":"13.0.0-canary.077dcfcfe.0","@material/feature-targeting":"13.0.0-canary.077dcfcfe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.077dcfcfe.0_1628791001803_0.43288096480264704","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/banner","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.e3346766f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"23c274094fdbdab07f3536143005203ac5ae82bf","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.e3346766f.0.tgz","fileCount":40,"integrity":"sha512-caqIBaSF00yZZ5OXiIyIF2e3tZrCDdsSUp6wa0GHizyWfBDs2r5ZMRL4yHkvtLG20ROhYB3mgjTRd0vVEQreJw==","signatures":[{"sig":"MEYCIQCBDUGdG2LQouy4FBUbOAbqxGN9s/aVTw5PZVVYjyem7AIhAO0Ne+P4EPWOUMAXA298mNVUgYnp9TwDjtHbk4eyVDvl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":498825,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswfCRA9TVsSAnZWagAADcEP/1asHfST6P35Uj+0HpKM\nVx1CFzSswfD4HH4OqB7OxRohfUA3/3W/dvWm6VlAHmVG5h2EIkgvcxsGaKrG\nhtXS/FACVPcksj8waIE2s61Q1Ey1HBWGN/yYwNsP3J5deIqj0OBjjf9KxyF7\nLn7w7CTHc5JgQkUEQtGXQtvvpM0PtL5DcbRvn4UyyKJQxLY6ZJlBTeal+Xj4\nuZRVL+7uoN6YkPxTD5M+k/bbvrEY9paikkUiIxKC9ViRTH+9y8uljZpstJvM\ne/tdUSeckv27LUzwxt6qHBgJiju/2ozPVH5qZmyLZ8OJoLBhwzSlfDRXIjsw\n3oQw18WEkexbNihHySlfXWlNddRIo8hJ/k34l12Wso8ik+UzQ2GpzuWJYS6Z\nvYx+tTkVRoBTxQgC6BAi5ZdTtv/NehGKoOOkI+wyez7/uF5toW1Bw2PDWF0d\nHtXx+tKXY8dsF1iQfZr3sLDcaqCU/muolILCJmUPt0wOWPVYkDJCjDRdRvq7\n7mk9bOdqw0uJ8bYkNphTywZA2g2UuLUup8gWRCKUTwQ1J+aO3IpOkVkGx0OP\nebttgk5LJ7wZcL2frATjKPXb15xSGRkvh4Ja8qKHdx5iVo+W2KEFTlKb2dpY\n8ZqKNH/EH8SJfUpmvWGdN3Ov880RvlKl1B+4IAlQr4C8SVTLpHyiGG2sjGkJ\nXpwn\r\n=2V00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"03da616c76c8b7fab07a24f82209f171a2fec41c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/rtl":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/shape":"13.0.0-canary.e3346766f.0","@material/theme":"13.0.0-canary.e3346766f.0","@material/button":"13.0.0-canary.e3346766f.0","@material/ripple":"13.0.0-canary.e3346766f.0","@material/tokens":"13.0.0-canary.e3346766f.0","@material/elevation":"13.0.0-canary.e3346766f.0","@material/typography":"13.0.0-canary.e3346766f.0","@material/feature-targeting":"13.0.0-canary.e3346766f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.e3346766f.0_1628883999462_0.6798850196950457","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/banner","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.2fb068fb0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bedc245bd923ecb1cccb5150d2ea966d43e5ecd4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.2fb068fb0.0.tgz","fileCount":40,"integrity":"sha512-C1/ji83ioLxW3DHVbH8gQPcGSasXWzDm4un9VfWQIPXICSNT4oxnyqK25y/cmmTcrhOKuIyrLHZm/z/ERYENGg==","signatures":[{"sig":"MEUCIHCLvKO2uN/F7B+iB40jAK7XOYNUmFUo2liA3a4Pg8IsAiEAmUcxn7iLsxEWQHT6qXUlIFmwqeHyuu5vMTyFJX63npM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszeCRA9TVsSAnZWagAA3vUP/R5OGbyMWCCqVMNPxS70\naped7xPN6XNWrHxvPc5QsK7pqvokrEg0w5gbuQQhQEtmwhzjYzF/RCVylk7f\n1MLcRIPXLfGzoeMttgC7Z56rhUCuCgARBus+POapVaeh7KLv7iBMnxH7DpD6\n9MiTieMrZ8PfttjXsbB4LdhSM3XdsNP4cA//mMjtk+BP2TVctCShNi5Icbww\nurqiLFjivYgctj9IQtl/0Eie4i0qu3VuOZz7FlSUKho1teG78fGBqdXsjs1O\nUcpDyaxtgiHZoQuF5kDlHkeJGvXJEx2/oUTGhLiDq8nMOE8I4y/LD8a6P3tk\ny3/iSVlxcH30YisCkmffCcwXI9H+ECsyTaAUsiplaCSt41wRvHGizbWVNEl5\nXTKnpQrluvK4x87I7K1YjxE78UuMySh1oK8JSaUapz9zFuR8pdIKMvyUSDW0\nNCyWxgnlmvO4jUKC3D/w3DPqcBeBGsypCcZAeP4g7rlwr8/Ik+VTz2ccKFhV\nTvbP0R3Jq1MDw2UdJhuvQQBDjTXz36sZZ+VaGvMODMAaR4EusIZELmJrK2aO\nIaOmCDVHlgDqc2UEk+iNnylhnUcJooEW3VOeOSsegPBk+MzJx9LhFp+dLZht\nXo6ZQL92mzygGXskaL1iePNhVrnoZJcB94u7yyjXkTIqDAzlNZXsNQcd6AFy\npk50\r\n=nAUB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cd1967c0a3a80639eef1dd76a8e579a4456fee90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/rtl":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/shape":"13.0.0-canary.2fb068fb0.0","@material/theme":"13.0.0-canary.2fb068fb0.0","@material/button":"13.0.0-canary.2fb068fb0.0","@material/ripple":"13.0.0-canary.2fb068fb0.0","@material/tokens":"13.0.0-canary.2fb068fb0.0","@material/elevation":"13.0.0-canary.2fb068fb0.0","@material/typography":"13.0.0-canary.2fb068fb0.0","@material/feature-targeting":"13.0.0-canary.2fb068fb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.2fb068fb0.0_1628884189904_0.9405793965756912","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/banner","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.fb76c5069.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63a37f086710ffc6ad4ba2f045f7f59e6f5df47c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.fb76c5069.0.tgz","fileCount":40,"integrity":"sha512-tMMd2IKNHl6nAk8coc3HENiE1UiZS2ZcDo2chE1+V30yCyrHscangGODSjfe+3hqc2ktv6bsAtRKKD9YJ1TklA==","signatures":[{"sig":"MEQCIALGSQc+cA+f/zD1i7ZzF2+FT14OhNVneCYl5AsUYFt4AiAhq3/HTAEVHVXipJklIxEoTNCHhUgq8wzcEYvnY3ic2Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsX2CRA9TVsSAnZWagAABigQAJ34vLHR5QSV4CFdKvNy\niXFGVS0Sgp6WOvHoUjEE60ZFF4Ik2zcAMvrh9mlKXgj05EYj8yP7EhViKnNd\n0+/8OUWQ/dbDqhu8xsbyXg/A96Ezm46Q8ZTb2toNUrOwWpTGJUPrHj+zJ4ET\nPawrqn+cfrz/gXjKUK+hBSnpMZosKSZWJUllxyEoWIFYBBxZepFkryPgjMLE\n9shoVDyUFIyvptjEGromLtyU1+KTfn7WuKiQZ66d7npHJjxtd9p+8+vWnE8v\ntdRtFLe5F1CK5+VtdeLMZSo3rqwRYxgLy3E8K9+MAByd8cRYEkZrHe7Z2gq3\ngWFUCB6Ygtp4zm+nK54Q7jR1gf2uk6xEw1ubIvTljzrxaM0jzDV0wZAlmejZ\nT5cmLi5Td6QB6uAVckSgXNQ+mjsLAyEmndGQSpqSMn0iwdR/kTsXolFuJtQH\nLAYxsVpXV5ewnU9+9srB+/MA3eKJzTKFrOXe9i3xVrFEsHPzRmYTS3QLoMJ1\nhtnALgiPPd4QYLMxETY9OS7i0v9lOqUzFDmE1d4XFZYatYasn+CdIxw3CC7z\ne/gNKbyy4iYoEsdqx7lcQD8RAQGW4+IrV95gX/CCl48h+x8Oa7jZQ5+n7LU2\n9Op0n7JjpvEX+P4XdQehM1TTmHmmrdR3+e2U0Jn5tNbVBNVjw0Q+bSq0+zmU\nXW79\r\n=WVve\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8a969624431e3c1b8d80c2e2a37e5ea5af6bea4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/rtl":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/shape":"13.0.0-canary.fb76c5069.0","@material/theme":"13.0.0-canary.fb76c5069.0","@material/button":"13.0.0-canary.fb76c5069.0","@material/ripple":"13.0.0-canary.fb76c5069.0","@material/tokens":"13.0.0-canary.fb76c5069.0","@material/elevation":"13.0.0-canary.fb76c5069.0","@material/typography":"13.0.0-canary.fb76c5069.0","@material/feature-targeting":"13.0.0-canary.fb76c5069.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.fb76c5069.0_1629144566608_0.876190286046221","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/banner","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.457d89aad.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"581bc9e85cae12759e1bb83675f6027a9675abcd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.457d89aad.0.tgz","fileCount":40,"integrity":"sha512-TtmLOlgvHQ68D65T8mLPi7zmhrxa0DmLMOKfvEbiYzg46nVXNkCN0lBo+Bgqj4OvB5KoQZQKXQwUgznBznKOag==","signatures":[{"sig":"MEYCIQDB5VghC8gE3HVLJQkdptG7ox3dfoWoPDzIxp5PvULBuQIhALosUGSp5mCapCkzUkSRNU1BmYo7DBeZc9CBiRHWNUaU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499184,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9RdCRA9TVsSAnZWagAA7rsP/25qg95vvms3Qq7QlwUx\nGMzbRxo7CjkTu2/bwzXnf58/nwAgzMR9lwAiVqDqwXK3i6WN7NMz3y7nz8wt\nB7/+QbgBR7dz2gm4FXBq/vGJF24KtUfQs7gbQFRe47kpX4Skdc6pfsEJwH8b\n6IuC158rx4CE+fI0upeHr6RkR2X4/V1rE3/BsGdLAain5nf7lbH49hyUQchZ\nc8HY7C0MeYjes6GSBItQM7bTOWwKTj60+0ImAaov5FFXYdQbzPCrKyuNAbud\nidbroArBpFPwiDazr2a3q4uyb6r8OuDDGBjzdtNXWBPnQQxCj0rUmwwqBSEu\n5tekxlIXWxxbkOGtJagopUTIgXs52k/Vv6B2BW7LtcY7J/9PQqpooevL5qp2\ncFljVmZJKrrt1BZkEMc+FGWF8GgaI70pj1+Zysz+LrV1RevYavaVXl/oz1xu\nLrmtWKDyR281hoHTwrJkwOf5bWl7ril0mBVER7vDJ9vuisIdx4DJ181rXDBV\nRXQOxOwKibjdWd/rDWmI+76XWt3fYq5tVnOkS2WpiSzp8X5OiLKmW+SPLpHX\nrfROvZ5bw8Z9A70BYC9q0KCHwQvM8yfSes8cdWE9brjPdfjEk3Ac8tA5KnU7\npB9t4u45Mqkt24ramTgPCyfFUykD15W571E/E3vATgR+HTGBMaiITThVQRqu\nXgCz\r\n=1ACv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e1aeb9efe0d3f4d8670a6ce174d17d7528b34438","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/rtl":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/shape":"13.0.0-canary.457d89aad.0","@material/theme":"13.0.0-canary.457d89aad.0","@material/button":"13.0.0-canary.457d89aad.0","@material/ripple":"13.0.0-canary.457d89aad.0","@material/tokens":"13.0.0-canary.457d89aad.0","@material/elevation":"13.0.0-canary.457d89aad.0","@material/typography":"13.0.0-canary.457d89aad.0","@material/feature-targeting":"13.0.0-canary.457d89aad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.457d89aad.0_1629213789560_0.23288324249724757","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/banner","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.0de2f2edc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"889d91a12fd76810b6659df7524f014b5700f825","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.0de2f2edc.0.tgz","fileCount":40,"integrity":"sha512-YNWlperyzTy+0nXas/fI6UNGsV61BPmCkMhBIFZptVrdUb0eZq9aiiE04mYoGzkIUOU7+z1r9omhHiTDGpV7qw==","signatures":[{"sig":"MEYCIQDgjiQ9gFFyMfFv5xEw2n+/iwcAFTvpsIuJlfmlxhgjXQIhAJ6lCXbwjUMRVgcdo4rTxhcyn2BgXGbSbgwFUKqRBqP/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCJECRA9TVsSAnZWagAANkgP+QHj3YyE6FHbmWdTXQs0\nKP+1ObKbY/2muitw6Rg7Nvx/hDS2sihaojXnvHzS+kuDsqr5K/gUAF/QSEpF\nWRD+UeAjf6Rf7us+XIxMdIXMKtfPao8zoNW5VZ4ofusbXf+XjJov8zmAQtnI\nFEaWOHTsE4yRVkd2uzLoqzRYiQ1z2bREcm/d7ev//NwG1zfCkgvu4RlUsUbW\nvK4ml6xtHLhuGkK+7QkqO4rGWc1FNiw6MfSiEjrUE8AdCVekV+lW4F4nlT+W\n28bg2YFXYiGllfxiNM9ZBw51eAtFKWWDoA9pghpZ83VC57/CJxA/GztQCbXH\nC6mbPh4DDdCqcAT6dtWTE+EmzFO6m6s1rSTxX+wOIMIQt7h5qT154zjFJT56\njeffT3UTwXnGj4A51x7gL7bG8qrwu1nm5Xandj2NMQuHF/BOK3biCoXlsbi0\np5/PSov+QSjqvDRVQmTN6GUhuLyUY9HmbGsPNlx4aemCSc4nDq2Ez0IoIzk6\n6L3dqz8SmfZJiKWS1RBMWSuriHdZBtyxqWLvH1hCj38IgI5rcxQmse/bofhx\nWjYij6wylDZ7Ai7rMFaXRCDeZbpMq6USH1SC6USKDbemCaLLq8prbnDdPBY2\nTaBMyb05HLi8a3yqvXDxLblodtaaK4c/q+4Zdrwr0/9zbYVberFu6ghm8dHl\neYXi\r\n=vcON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ecc5e8dc0157f612d4cbc7b03507e3779919d5d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/rtl":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/shape":"13.0.0-canary.0de2f2edc.0","@material/theme":"13.0.0-canary.0de2f2edc.0","@material/button":"13.0.0-canary.0de2f2edc.0","@material/ripple":"13.0.0-canary.0de2f2edc.0","@material/tokens":"13.0.0-canary.0de2f2edc.0","@material/elevation":"13.0.0-canary.0de2f2edc.0","@material/typography":"13.0.0-canary.0de2f2edc.0","@material/feature-targeting":"13.0.0-canary.0de2f2edc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.0de2f2edc.0_1629233732189_0.03008198002465412","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/banner","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.1f9259b9d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9468b119c44ffcf0d4db1845c25a4cf39a6eeda","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.1f9259b9d.0.tgz","fileCount":40,"integrity":"sha512-Q+RYb5VTOUjG2TjsIxth0OZkYP1eHb2QIjoJnlbt7IPswfNmaTada3hkfxuuGSSLHNuOTcMtUSFx2XDJJnAh8A==","signatures":[{"sig":"MEUCIQDaBxVPMh2spGmxk0bXZSeqfyPfb31XTJa3U58hE7ETpgIgHxMXYSrGnd2ozGihYZiRcywDYT/fHv+ZjfMWy7yB4Gw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDUGCRA9TVsSAnZWagAA94YQAJcs18VWjC9rhvfxR89I\nF1pLz0SnAQ5Az7cy8aalsLFqbmhtFSxFTASB8quzuLfB4cph/vlmeTs+7Q/2\nYPC+0T/c4ylnW5y9wF0U4K61RzT7CCAtdQEVFVdJY5fKXZ/38X5ut4ihAlvl\nsnKZ/bYGgdQVMqggyKA73L9H0o4gAOvfWzEguvekQB+39DiIfwV7UFh7aED/\n3udnwtQTL8ABoz7hEwkv3tWbkiQEf6fovlfnEcxA7+nY0lyjZGarpf9e0GI4\n9ZvJG4GPstyL8RbXIgOTIfvuHgxN6MBtqGZtmS+jcK803JOroWn0z1Vrlpr0\n9FHJJ3q+nNd+8hY2ZPqts/SU0qfvw3YKZt6mK5+sVoZI0nsktdarSS0g1x4d\nNvGUOO5Q7cLl8QnlpgTr9aizjquXiGm53v+DBBb+KNuZSWNM6e72dXYwSYob\nzZXDr4wFSCi0zTaqSdV0utFqXmFFo1QRdT6ViZ8ucf1vpCOkiSkB8XeP5zfa\n+AivnjJHtBtuapTtlsWVwaVQ6E3j8tNJqC6ub8UOyW75/gv4WMz8QyKh2asY\nY3wfYBBv1f2AIKEmuGC35SqOSkDtDXh7xlkSC1kXsNJNADWULOBlJONI4rli\nEJZNV01iSYEK8UaYoYHGC1GkQ6CnHrWPo8iAdX2WmYWbnPqTvGz8+vTj4cLl\npXbH\r\n=4iCQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4c2c9aa7510a4854abb7f568046a44631dfe3e7e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/rtl":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/shape":"13.0.0-canary.1f9259b9d.0","@material/theme":"13.0.0-canary.1f9259b9d.0","@material/button":"13.0.0-canary.1f9259b9d.0","@material/ripple":"13.0.0-canary.1f9259b9d.0","@material/tokens":"13.0.0-canary.1f9259b9d.0","@material/elevation":"13.0.0-canary.1f9259b9d.0","@material/typography":"13.0.0-canary.1f9259b9d.0","@material/feature-targeting":"13.0.0-canary.1f9259b9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.1f9259b9d.0_1629238534631_0.40108866658831777","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/banner","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.3b9290351.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb84a4a9ca6a43a73f7d250a99af422cbc286c58","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.3b9290351.0.tgz","fileCount":40,"integrity":"sha512-foIuYGa1MBiKXDVlUqqilQZVLhneAhK1jVGt7tPrQT9iGa9plpwoy2vrO0QKHjYPf1OeN9b1DboF15yAGuB80Q==","signatures":[{"sig":"MEUCIQDWNZ+chrrNwLIw/HVI85M7a26QCB7T2pnJyQfVLLIY+QIgNtVZhFN/lrlxlKHvulhUteq2BLM3Cya3Rfw25G+dJ9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJnHCRA9TVsSAnZWagAAo9YP/26nh6eBH+mFhg42IzXa\ndhR5msvi2db0qSIteLNma+u3g51NbQlLggQX/MD2LTic2s0c0de4pPAxxwjB\ntuG+YXg9PB+xNYSuXPp4kOgcU+AhSMVbZNpc+8Ta9ywxzIR0PkS/Jy2HtIQV\nPZCHmtgI9VAiVyEhzAD//oHpg5A5aSEZVz6hzKCInmiLbslKBtjEQzJdNZwX\n0h1fMZBZFsmteqFhwWcnSfCWaZJrN6ZrmE99D8madSwG9QrEFTWwlNtndy4d\n5O8XVx3syyjEOXBAZILtukbcOe0GRqkcN60fZx/EU0LCb4gfdrLnBkEaBNNT\ncqluGDf3fCIx3LRtrIqAIVB0Lc1idzkFYaA8ScYR9zDj5RuWsD1LUCLp4HTr\nxBZ8tlNyJEGUdJvjOdgwQdpjjTDW4nmmhurA1z47BlY1UERJKNW43/omXHSC\noi3p5t1+lAK9t7EMQlyghLUMJ7aKVLXLYj2J2ASQ6vX/QHrPbtKnxwbnK/u+\nPpNO+8jgl8ZNpvCow62dYIuuTTU9ChGeZXxrnNaXqtl5kC4NTmDJXDoA65CB\nszjbmjuXgl81nD2qRe29LA8E1e/99pnB7PryM4uJ2jQAPFv6UD8um6C5kH6N\nksIvyMOhjWWGbW0BUp+t9yBAzDrx4pc675mzlcrc466fe9NmMQ+9wORIpNTh\nR7Kw\r\n=JRIM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"15fe006947f65208dd0e450f8cad53d361b2930b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/rtl":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/shape":"13.0.0-canary.3b9290351.0","@material/theme":"13.0.0-canary.3b9290351.0","@material/button":"13.0.0-canary.3b9290351.0","@material/ripple":"13.0.0-canary.3b9290351.0","@material/tokens":"13.0.0-canary.3b9290351.0","@material/elevation":"13.0.0-canary.3b9290351.0","@material/typography":"13.0.0-canary.3b9290351.0","@material/feature-targeting":"13.0.0-canary.3b9290351.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.3b9290351.0_1629264326808_0.23434937870946504","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/banner","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.43d2eed2a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72321ec42bfa4d7501611c1ad009ae48d35dc5df","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.43d2eed2a.0.tgz","fileCount":40,"integrity":"sha512-rgsE0rBxP4dqAbg8xQ0GUcokXlfHaUwHvG1RY5iyoUw6GN5qFPZXhf+rvAE0ZYXm0/F4F2harW1N9Lbc7X2Dng==","signatures":[{"sig":"MEUCIC4YpyqSoeow7w0WAz0ov415QZgXmWqolHhmCw+8hsaXAiEArBj9wp3fDTmI44DJlxqAkIM1HXxc7twBkzXqD21NWb8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9VCRA9TVsSAnZWagAAwfcP/1xUvKygbhQEBshnrXd3\nuRc8CgzAdwW1X4DhbGjYU6Htq5WJKa8dApdCsUKpHAO9sQtvrPdXQOtrA7yr\nbPFI70EZ5omWUh3iqelnlCdbu+giaDoBeDBE/jJzIJ0fcg8+tdGhnMM98Axo\n9eCTCEyLn+2HVmXodXcaNxNb2DUIx5fT2LxVbCoGbwOC01meQDS53FL1wBBL\nXu+TZTyIQHJBmwTrW7vjyoAJvp55/ocTxl28wBhKD6iVeuRcp/88o4goyKxJ\nuTWA/ck6m3Y4TYuiRUii8u7ulGnebGJShcfMvgHr3LX8ZKEzDdK7zc3aixi7\nEuyYTrW4RZyxfLnFe8bWdQVf9tMKAYlxyEEQlDxloNyB3Q5aFV/gle5i+f1/\no3Ww6nCK65hKfrWanFu/IJ52UNLCRMj1uTlnPSYMNiDUUuzCcluVsyWFTT4u\nI2UcvBT+W4deJAlNZogS+4h78CWpNHIHUfX9CmwzdQp7Gy6/AIEdjyo2d8A6\n/lmD05tZ8DaW+eEU9jV9ltoeNVMqbc+a6Bu9XCsgSbKDkCovyMPR+FRNPQiX\nFZR7hEwAIx2FiUUTM8gsWvVrJ9nsxZlVQkgvNsOFgAtB8WlEaAS8un8IxDxw\ntdOpEkRFzfxfLjdNRoSn9dhpYzYFGe8/ITfYjAoR+sqvIs3otGh4Zjv6r11n\nepzK\r\n=H4+e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"687e2389ae76da9a31b26968c0cdd837208d3359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/rtl":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/shape":"13.0.0-canary.43d2eed2a.0","@material/theme":"13.0.0-canary.43d2eed2a.0","@material/button":"13.0.0-canary.43d2eed2a.0","@material/ripple":"13.0.0-canary.43d2eed2a.0","@material/tokens":"13.0.0-canary.43d2eed2a.0","@material/elevation":"13.0.0-canary.43d2eed2a.0","@material/typography":"13.0.0-canary.43d2eed2a.0","@material/feature-targeting":"13.0.0-canary.43d2eed2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.43d2eed2a.0_1629302613386_0.2666631039135523","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/banner","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.0a9069300.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"38cf5de84d584a05f368ab771e203a50ed632f7e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.0a9069300.0.tgz","fileCount":40,"integrity":"sha512-1VYtgfX3QVgaSzpaejCWy1FMDXz7x6MaV1VxJwRFsy7Q3styXz/2G3ma3uikpoq3bKQ9Oz0yVFaj+IdEep2NWQ==","signatures":[{"sig":"MEYCIQCpSU38AgYW8r3PniBxi8ocDbYfvCGVCWOn5ZFOKZyvPAIhAL6mnzzOkIzZbm5ft5NFVMSAyDvw+0T7KQAAuQflkM5i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRzCRA9TVsSAnZWagAAw00P/2RXX+b+S/x4t9fBeC85\n91DJM4V/k5U70j1wiMC3bam4uxBsgMjWAcmRYOpA/DGhbjnW4JVot6t9mHRP\nX87ORcFFrj8AoaVweyFzp4mWEX7JPx+xSV3uNxLi7lawgR03EpwCUBeziLyb\n36fOWadK2vg9YyHodZPpq3PbNybY1tNyq52f7D0bQM10kKGXga/Dv2KOOfJg\npLsfZ6a9B0zxxJySquF9V4jYAVi5oPQ7oXJycaw0XUUJEwFKtJajCRkEjEzC\nA6fMiVtGJMMNTqeHSu+PcOyVoFcfjZQ+odwSNU36Ttu0c1mZSZJQ9ggiWupg\n+LIeZADUk3FZ95ZOrFEKzSFtkezxBn438Kd0vTQNxU0y80nrcbz0eHAjaKB3\nD2nq21s82toe7ECKRPgrPFeGX6TJ0FQKvPN1lTFsV2vkstOO83rsSdAXQkUB\n/dMmOs7++teGiGbqrkCKgsbx7POBm/5Y/IlqoEYApZjTEnYP84kNejofeZtx\nkFVLC9I6wywTGpy9aG+rKZ5pkr8LH1hpx1EAkXwTmfqUOiTiYa92LsS/iI26\nsdIXPbi64FvMKvmif6jdi9KR486adWLx0XeUGrQ9pJRMlzKEQ6k+WL0kLHN2\n88EV8L/f0yKupEmyVC84wz6Bf06CgSqtNtp4MKnJlSVEiUNW1uUHlfVPSMiG\nIwfd\r\n=Asbw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a7249c6c2dd2d786b2134e129bbe3b4ca596fee1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/rtl":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/shape":"13.0.0-canary.0a9069300.0","@material/theme":"13.0.0-canary.0a9069300.0","@material/button":"13.0.0-canary.0a9069300.0","@material/ripple":"13.0.0-canary.0a9069300.0","@material/tokens":"13.0.0-canary.0a9069300.0","@material/elevation":"13.0.0-canary.0a9069300.0","@material/typography":"13.0.0-canary.0a9069300.0","@material/feature-targeting":"13.0.0-canary.0a9069300.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.0a9069300.0_1629389939184_0.7365651472860806","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/banner","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.7da413ed8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"696e97434074e0bdc9973b1a8857a42d3dc4eb88","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.7da413ed8.0.tgz","fileCount":40,"integrity":"sha512-Bv9X9JiFL14f6vv6/aFMCMeRtIOi9S1WbzMgas6PnavYgdO1QSeqL805IkCKGjjU4q5T2UerXFdfviT/Wu4v6g==","signatures":[{"sig":"MEUCICPosTLQS78BdR4XLPiqzLDUrnDyHf0zmSHc0aLFcoItAiEA3fx43FnCeOIMiW4xxal1h/Rvisw5RpvRkcMWEwQ9oC0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88yCRA9TVsSAnZWagAA3nIP/ioEKQxt1rEzia7uTv8h\nbtjW6Y/MCcJPr5OYgFBk6Tr2t0b8wFzlV8GlmaNSiOJhO8XiB1vwCf8DEgas\nEj15x5emhJaLUo7w/Wzp3aHCv9wzHtr1wOmgwHkK2YMd4I+lA5VdBLMrkAKD\n87AX58FazYLoOwG1ZKZL5FU0aCqxOAHq4I1a/NHqB9BNx4DIstBARQc7tugl\nTFz7yvBRI779JpgMO34wQmYB0IW9Ra6Mg42WKSzyhJlqD8nO4dBaUqn04wk2\n/YSxrQrloKRoynaeJWY80wdEhppbAwwVTJ/Vi8a17nJCaKcufGoud8w0J2jH\nSjTvgW0mPM8PeCDPCe7YNZh3WHPtNpvLaNWfrXFZdZH5kiHYP6DiO+Wvkc+V\nTwF5PWRIECnNC+pWYQ47KVMaNr/jSfmAkE2lFXEZh/cetZXWzx++RXYUoFcB\nhyFy5+UcNX0GuPDExk1bR/lwOzIFSWUhA6obVu8uRS6pTpPK+2zbvAoXXpdm\nNyhHTgCyv0N82zWdIbWj7DM0Ki7+i99xgSeX7B6Hm221XXA0vDjnnPJ5gB4P\ntwffxbX3lKR5ZCoSxYM4YhcwS4SsDD2Anp1UNUOUP850sjuiHFcc9PF2b/bZ\nfpSQqvdF0SXY4DHQCO7M+kfMkRsqktulKfq6gW4s8n3PTMGJiHuHlDetrYgR\nix+1\r\n=A/VG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"66fc8a91fb533a43e898483e7c4e1fac92aa0b7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/rtl":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/shape":"13.0.0-canary.7da413ed8.0","@material/theme":"13.0.0-canary.7da413ed8.0","@material/button":"13.0.0-canary.7da413ed8.0","@material/ripple":"13.0.0-canary.7da413ed8.0","@material/tokens":"13.0.0-canary.7da413ed8.0","@material/elevation":"13.0.0-canary.7da413ed8.0","@material/typography":"13.0.0-canary.7da413ed8.0","@material/feature-targeting":"13.0.0-canary.7da413ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.7da413ed8.0_1629474610399_0.44991051119846004","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/banner","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.e1e69fd8e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1eac187c1e2d78b80d4db5d14a3b9ee5ae971f79","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":40,"integrity":"sha512-7Wzkf0RuqYoQfkP70w3SNP2cpEpUJVzNAF0HiKU+C+0i8vnzWkE/Rqi+PZKcKMpGVSpM9IGIFiRTAKRwGkhMrQ==","signatures":[{"sig":"MEUCIQCmogHQgWZOHfi6avUoY7sjkCCWHynLc36rBAcjbhLWLAIgKw4syYYWVNRZGcfANtN94yLYuFsgN7IsJcFM2OuV5yo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAOMCRA9TVsSAnZWagAAKMsP/jPcQywV7IqWaqTJZrAs\n8iUFnWLkWW+jyUoUGsFhZtUJ3G5mQ13FgUqW03pfdVdqtXHGIYCNJ1nISpT7\nZjEg99sM2692S/uIa334WLd0KIXYxk2eO8gOIh2/JhCJSFBq0/9YWylcHLhF\nsQWxM8kG9pEexgPzb3dPYrYpO83rlpz4SP3blZnfYwKgRFtHxbELfnzuWTgz\nH3546LnGjyc/S5Whn+L4RkvcqHrGmRfkb9vp9qlDxF6WvLIs0QT9YSDJkh1Q\n3iw54vyXd0nnSQcxvGsHUGskvcQNCgt1j1f9LkY04e8p1ikhD4hKFkoZelOF\nFX5IbZnUH7d4v12Tyf7dR+gBcjis4ZhfBFakbamSSvI2E53WeJCpzHeLI1NX\nmz6gAGVKpJK3E0R7EdyAuSdnKNky/m65fE8RWZbdL0DZgTAetzZbUu4XQat1\nuq4RXOMHwa0iyJjGEmiQDhbq1QepB1hLn4OdQNu3HSVwNEcYWtadIxF/RhRy\npTSKTPx1HA8hfqUHsg5C62jzpP8Xiir+llQ2vmQ0x+RbipEb7c23CUCmYGii\nftQruXPVtYZSwRYSfUmmAzfJyLl/7rkBiKq7yO03ElUT3k/73p1LdiEQOD8j\njoEuvUDD+3kQcEOR/PFmTrhRBKvVaFn3RbtSoE8dw7x457JYG9OJZV/aIc20\njo99\r\n=cIAC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e400b9052366c6e1d6e27533a72ad00199b6313e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/rtl":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/shape":"13.0.0-canary.e1e69fd8e.0","@material/theme":"13.0.0-canary.e1e69fd8e.0","@material/button":"13.0.0-canary.e1e69fd8e.0","@material/ripple":"13.0.0-canary.e1e69fd8e.0","@material/tokens":"13.0.0-canary.e1e69fd8e.0","@material/elevation":"13.0.0-canary.e1e69fd8e.0","@material/typography":"13.0.0-canary.e1e69fd8e.0","@material/feature-targeting":"13.0.0-canary.e1e69fd8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.e1e69fd8e.0_1629488012668_0.6355741526956404","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/banner","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.f5afc16df.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf7609461068037efb03c2ebe5af129e62ca7cb9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.f5afc16df.0.tgz","fileCount":40,"integrity":"sha512-qquEGkshvBGP0sUSxDuRqfaUPFCy11XUtlbP/5+PLXBqYXfkuycSfUcqsn6TFKMv8LRkbtQk24pUusvnntmJDw==","signatures":[{"sig":"MEUCIQDDMQM5tSmCNInnWutvDdICp7dNCt3lZrROOLr0QPv/iAIgCJl3OtukhcKPmrpdhkmxPAAUzPIWCti7KF6YpV6VPqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBOCRA9TVsSAnZWagAApMoP/AqO4Ibz1568QgBqhGaP\nsJ6gmzU/CPTsL7ORlGu7okF7pq1qU4YCzfiw3VNVSy4hykft8gKgYfJeex3h\nMScD4+uBSs7s6n1kw/0ZPRceUT2iui2YnD+YGIK39jSWOgdSpjB8K44VTAu0\n1ili6KyaVl3gIEYnAJTdHdeEUrf8QgyayYfTn1T61+CcXsZkrbD05jJWYi8k\n/aT70sOREYSVhZ/a6Ikmo2RJghMdGYBp2k+CMyJ4e+ikz73SfWhXD9LicaOT\n6rf0XVFZH9aQpwPkNlhwCOHoMfSBaS2KqlzPNY76O3FLyvHKDkDXplFAoiYO\nTcr77Fn4nY2IGXSRbIScLYRz5O3v41ktzhkf5anj4yDw2qyuCsTvxWw9w0wc\npvEjoLJ0+lhrsmN5ZGexltbyXE1qH3209PGsa7PAyijljEIKi1AyhDksIMVU\nlJWYctfavWwlxkWK6N1SR8E11IQCN6vWDkKyqNbTzzaZyhrTfxkOYLwZSmcd\nDFULOZ6cxCGs4bZVBL6r1e1CSIIk41jXWZelgEz8nJUZuNxvq0/tLbp7dVfl\nUSrAqwZ9gRinKfdQKruW3eS0Uky0sBW+HueX8g06dRSCByPnJxKGcTjUgP3s\nqMfLChIZaBndh2+rvzhBNEBOHc5W3izpFRrb+vzOHUus1OXhN4YQOo/XfNl/\n1VUH\r\n=yatR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9a5934ef5d223f46f61452bee68b0b45a21e20d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/rtl":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/shape":"13.0.0-canary.f5afc16df.0","@material/theme":"13.0.0-canary.f5afc16df.0","@material/button":"13.0.0-canary.f5afc16df.0","@material/ripple":"13.0.0-canary.f5afc16df.0","@material/tokens":"13.0.0-canary.f5afc16df.0","@material/elevation":"13.0.0-canary.f5afc16df.0","@material/typography":"13.0.0-canary.f5afc16df.0","@material/feature-targeting":"13.0.0-canary.f5afc16df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.f5afc16df.0_1629491278649_0.5093992377968228","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/banner","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.28d0d75bb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24a5fcb0cc1b16b2f63a25233078bff26adcf9a4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.28d0d75bb.0.tgz","fileCount":40,"integrity":"sha512-t+Ptr11tbO+N2AWZtqvGYfXaIDehYDhhGEssGREzk7NgfmHEtGSJeh38jdX5yFHQIjRhOc9DCS2kDITkDc3dog==","signatures":[{"sig":"MEQCIGZE9s6PVIQzFZdS/Rda4EuisLiX/qb2V1C/ugXy7Z6VAiBa3SOE6CaDvNYVUlJanzZowDajzdZwsM+Om8DySrJMHw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICryCRA9TVsSAnZWagAAHMcP/RpwH2d6VKPOnFyNyMdB\nhSo3EolbhdbuTJ0LfQ0JgoxpbgxWO68HQUIhLYFwFH0L5Ffimk3X2NjILk53\nBJTX/jTp5Dq186YUxytVOKVnjRCxxAcLy3aGlnNbKHKEuid66JR93v1AcouP\nnZ56cyB5xHFtisnG3IyesMoOP7kWlCPOJ607iAxqhEZRyEDptDbM7s66Bnj8\nrXrz+FxVR28CqWkRsey7XyIhyYZ/pcKPMWBWDBUITfu5150L17Ap27q/qIpR\nDe4Ze5VPRca3FOvVyodxxqyyab7a1XcHp4x4J3CursoA/+gGBJfzPzwzSYTl\nMdRAo/Mk7Kxj7sUDa/0WnN5mGv40fbW2AmP4D9Q/i7hgLYj+3ngTzV/MFTSN\nYF+0pcnjVNjzFgVKMp+lL6kJ4yS4t3q/WOhjVupxaXKokZxfg/0+ArU0IINT\nelltwVJw7rzzrDVESfaTLdcxeV/ooL3h17daCviMaSi2etA17qghGLGj2QSr\nqs4jnSf1mrtUbNogRbGHgq9/Qt+U3YTNh/L8bOQhoNDrv327WX8gBl19GMyU\n1Iauga8Y7w4vLIY3PnimBjR8bgDZRgnz4aXn+rczJxHxiHsOnGJ6OZ+G95M+\ng8VMeAUiM0OkYZKDgQZCbvupPqvHe46DPHmLygwi3ySjObmMXckrj9ojutRd\ni5Ud\r\n=5Qd1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4becb1aca9e878d432cf8308ec0f14cc50e9699b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/rtl":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/shape":"13.0.0-canary.28d0d75bb.0","@material/theme":"13.0.0-canary.28d0d75bb.0","@material/button":"13.0.0-canary.28d0d75bb.0","@material/ripple":"13.0.0-canary.28d0d75bb.0","@material/tokens":"13.0.0-canary.28d0d75bb.0","@material/elevation":"13.0.0-canary.28d0d75bb.0","@material/typography":"13.0.0-canary.28d0d75bb.0","@material/feature-targeting":"13.0.0-canary.28d0d75bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.28d0d75bb.0_1629498098773_0.386685356718","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/banner","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.21ece5360.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6f516c4c9e4cfb9e4e1dd1947a36b7dac0441c45","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.21ece5360.0.tgz","fileCount":40,"integrity":"sha512-hxLhiqXlzW5rZRxEPlExwPRD/oi+/gjRGs+qBbBWKS2j3mA3LmLyUEsO8tN9yNj/uHsVioPJ3zbKU3e7OfeXbQ==","signatures":[{"sig":"MEQCIDeguC7QQ4iVxu4Gd9Qi3Keu36nFXNQAIAEj8efkSkfNAiAGvCl0omOZZmHO5lIt8JaBel4bb7Yo4Dada/as9m6XpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6eCRA9TVsSAnZWagAACIUP/iVYgrLwSUK2/+O857NW\npeZbT7nYj3G492D0Mhse/vsMJs51baS/nBpafkHEOb1FCvrcF3kezLgzCcGD\n5nv5cNCSkf9UaUr+HnOI0GPh+gwAvCrrWouokBskNLQGzZnrYqm4SAP5sBRq\nuDbnVMYNF5Ri6xHuBrEy49d822M/YOhcdrVT8x405LSV/WKKqTETkgCv9+pA\n0YRghYzp6xKRMnhFcIG/aHcV8NiAjiftfmD5nf452ziqPqjkOKEQVsr1lt/n\nwr/bf6hC0PdWqGRTW2b0Eoj0Q1Rg+RxRKy+0U6v1bNOf9yL6CnpNH7S4Axdy\nlBnR6j0fOF2BgA/h/qMltKIn/gUaGEZ+wB0ew+hlbNQNY2+QiQ/49yNvs/h9\n8oob3VWRr5rOZUmJwqmncYHkGtN9rGJxQ+cQriZMraP5Gt6V+0xnNsYqv81f\niNWZbfk9ueiB3nQZ5NNByO347aXKE5IMXQkytUElqdVqXpszkrUu04QHDD0s\nqxJOOLd5TJqGsp7tqaruHehkthwKCJniGJjI5Exeg/CvoUhB6+nPzUVJFHF1\nsLFJ2iHulGT3GYoelkHJbFhbyut353avc/7YikdT4CROY9x6unJrWRjO/Tah\nuLeMd5LFps6pzoS6ZT5dujc5RzrcMn/ilxm9Ca0H4qQXnDEZ8GgwOpfHfM47\nkF4w\r\n=4hAy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9625caffe59fe4a84aea358993c2811ffcf33e74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/rtl":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/shape":"13.0.0-canary.21ece5360.0","@material/theme":"13.0.0-canary.21ece5360.0","@material/button":"13.0.0-canary.21ece5360.0","@material/ripple":"13.0.0-canary.21ece5360.0","@material/tokens":"13.0.0-canary.21ece5360.0","@material/elevation":"13.0.0-canary.21ece5360.0","@material/typography":"13.0.0-canary.21ece5360.0","@material/feature-targeting":"13.0.0-canary.21ece5360.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.21ece5360.0_1629503134475_0.6699428070889419","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/banner","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.8de07c02a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"afb060f1429492539ab2864cf786dd84bae319ec","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.8de07c02a.0.tgz","fileCount":40,"integrity":"sha512-LbrZIudouyWD6c4357dF9CZ5l+h+uuz1/8e6s2iOwptx1fTquVmhYyjPTZg5BChS75CV0naLRXzK8ngYRicpTA==","signatures":[{"sig":"MEQCIARRvo6BwXEClBKnp48JBNBwX8kXrIPK9ZC182qGbJ8pAiBGdsSYuwRE5oHXOJnQtKJY/n1md/n6pXEDWsaYYBmGyQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499352,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI76BCRA9TVsSAnZWagAAOrAP/iewX5JbbiTpV3gBExDc\njc7XIZTLn/jltP2Zuw1YvqGs1pE12dpkizIMGGKvxi9y5ldlvS6zUOE77Jyy\nM4RjD28cFvzRWKl2HzbQzA5OMUixfNHMFH/zTE81wkau4taGgCAJRe9f4gVh\nGnuFQfwaFxg/3xGZyNWcscFVn3bMxwKUJNvHyHcr1zXpC5kt62ZIU3tIHUKh\nemVpAUqrAFUbs2ULp3eToZjuVHxaya/OM/UfQ4xZPPShnn5mo77LE2vhJY5Q\nrd4EcEZcSa6AIoitaKsZxRQEgVtA9it450g/emGddw0Q890aXQuwsuUCDbni\nZWhHnElUy3l5703OzJrsTKTx6i/lDHyRmzF4UqrltmwmZZUnlaKbcURQr/x2\n7sivAM8x+aWNb70quoW9Y+hyIgk8WGQBqqicV5LFtpQDpGPH7xS8yJOFN75Y\n+e9NP2NtUgmA8jzqGm4BgxqJIV1QPOuIcz289TMPWqZbCd3IvX1e8YDEJZvC\nOPRsiC/izX6mH77IvA+9amJCWjGNTqsCGJOzLPpAbQmGJ6gsnL2NffAxEFxz\nTIZmmf6CR5CWO6944Def5IC+BlFzLSf/O28IX6gNxDK5k77T2J58U4olR1P4\nFtxIyS73WCptiPMBfhfKgC05YiF63wK9jXBFFD/pzXlD8NfstCmK3U8Z7cEL\ntbBh\r\n=aidX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e55081eb44f85de06afceb7c0d189f0d358ad60c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/rtl":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/shape":"13.0.0-canary.8de07c02a.0","@material/theme":"13.0.0-canary.8de07c02a.0","@material/button":"13.0.0-canary.8de07c02a.0","@material/ripple":"13.0.0-canary.8de07c02a.0","@material/tokens":"13.0.0-canary.8de07c02a.0","@material/elevation":"13.0.0-canary.8de07c02a.0","@material/typography":"13.0.0-canary.8de07c02a.0","@material/feature-targeting":"13.0.0-canary.8de07c02a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.8de07c02a.0_1629732480786_0.3554041969696873","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/banner","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.65aa63b0c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0771a893c0937f1f59f871765b1cd1dedcac526","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.65aa63b0c.0.tgz","fileCount":40,"integrity":"sha512-EGKUef2Ko1UXCf6L4mTsTwgrlYJb9l5ye+B9+cDdMND2s0QMsc+QlPSscl3+w7zwohUoVFcXpkc+PL/8EnCUGA==","signatures":[{"sig":"MEUCIQDfrZ9W9UMcyjF12Xh6bG6QKxOKjCyUq5vexnCCtNy12QIgBp3QjL+2FKCXiJcyzcO3KB+Q6gyzix8f0KeW0gNxfUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":499769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRB+CRA9TVsSAnZWagAAA2UQAKCwEkTSsj0zQ6JISRSr\n52baiLXKQW0iW+ceBW+yjwAaNq2t8Vi7DJmb25/mxyYxx+4uV3s5AqconUIU\nVadRzCDbhQ5bJ2ndRW+Gpkvj37jAEFKvyclGosEdcevyXTtZecygGjfm4aK+\nciFGTRPgeiP3Gr1hOI/YIVw6ABL6UVXxg0O4skN/IF3eDxQlmng+GjitWQ/u\nurKWHkcypGJ8VwX04xUha88JlD2vtfk+lgKQGuVUfWsDkyYZGqn9o9d693gG\naffsxl4F9lMnP5QxzgfFTen7+4k3xy3oYMIElVeRZbqfTaiDbbBfBxUJMT2/\nnlzBqGTwnQh+toyLFokMijWq3yAAdhmhKd/1V2Yjqjtpybj4UrXqvDTVe91D\n+u1wWC885c4Wf+Cgxumthmbv1I5WVzv6jC4gEs2/z/nttxbD+UGJBpkc24+1\nO17neHOEowy0oiZuRua6Ic+wHFTmE+LIlhxvaqHg+5YHUNapNSKV3OWq7r60\n2yCqGY4W6M8nW2a/rPgpCL/vcM2AvqMw4i5PAJ10K+m2ggTqYtROZDqiGNaM\nFBiAFbp1MNY3IDDT+X3uneVFhmXxVr0r++bEeLQtSMZSAsAEv7Ly7qK3IPH8\nQsl/GMmYxRlDZWlXinUhwwHf2ZMd+HGh3MBLD/0/KQQ0QRd/RM1ljy69VG9S\nK3Of\r\n=CP//\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0ac2dcf03064da43ca7eb352045fd4da0af02200","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/rtl":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/shape":"13.0.0-canary.65aa63b0c.0","@material/theme":"13.0.0-canary.65aa63b0c.0","@material/button":"13.0.0-canary.65aa63b0c.0","@material/ripple":"13.0.0-canary.65aa63b0c.0","@material/tokens":"13.0.0-canary.65aa63b0c.0","@material/elevation":"13.0.0-canary.65aa63b0c.0","@material/typography":"13.0.0-canary.65aa63b0c.0","@material/feature-targeting":"13.0.0-canary.65aa63b0c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.65aa63b0c.0_1629819006022_0.3712337792219351","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/banner","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.15981e9d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a935c2b040315662c9be7ef9827283a2f042a70a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.15981e9d9.0.tgz","fileCount":40,"integrity":"sha512-qtPvI6ltc5naAvuKGiP3bKxZOPeIoU5dgoIB8QCmY5F2qViscku+fozp6CkO5K2TLut25FUo9SDhTC3+JgJzDQ==","signatures":[{"sig":"MEQCIBjMppeNPG9935ZzREArOkymS+J4pV+PwXAUlzzLxHgsAiBRpEbZpmtHEb+srtZEztT/RyWWgUKPjT5U+smOGLvTGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvUCRA9TVsSAnZWagAA2pwQAJsOyRW4ixZ1S86DkzFT\n6nmkd/u8H9zit0p3EA/Ud6FZVNhLSRcy+m6AITMXz9VtdBmfcN/TjxIl+0lc\nTvXLmnnGk66vJhWM8Iy+EuXuuOvwUTZWjFyed/h676cd2zbfdBX5EjET5H0V\nO8ONhQnAZI35aALbmfgF0nx0MpQW+EQaS6UKFpn6nRU4zMZhu/Kj0I6/Yrqh\nylmGpAz/VBhj4cwZKkKNL00QcDtxK2GuvlaBCsOefiPwmNik+UNi3If+ykT0\njYmWHD8xfeBXjtoEdfs8DOL+nTxZA5Jp4OWK6ddarFgzDd3uJO8f9rYLjJZK\nYnK2pmnvVK6463Ncnx2ZEDSe9tbhdzZKGXQoBc+bMsa9pyZEnpiXlH7iXxMF\niTqlKHda7ywwQQTvAzAQrx+iR2GI7kgahttFC8bLNmsTr1kJ6B8qsXVGWkB2\n/cHSzqxDudMAE+uHVi94yfJEdqjhme7jADw4+YBw1Z+jeCRvrBWeaUSVaHXM\nyDLMvFMmC4tiWVFfDaCF3qtj3azgrULAunONxPokRxX2I8x/DGGQSbc8Xdkm\nBHybwOc0yu6bYO60lY6n5tKYtxYLD1mbNEgwGoTb29wJ7FXdvPVDOLGF4mrU\nFVcYyE91XA6JR0Q59BOUWeenqGFUGMIWXz6JBDF/tQDhfmT5WPvzfCkR2FqA\nxy0v\r\n=hDL0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"93acc5a9963b30cedb03f35eefb49cd35c93656b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/rtl":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/shape":"13.0.0-canary.15981e9d9.0","@material/theme":"13.0.0-canary.15981e9d9.0","@material/button":"13.0.0-canary.15981e9d9.0","@material/ripple":"13.0.0-canary.15981e9d9.0","@material/tokens":"13.0.0-canary.15981e9d9.0","@material/elevation":"13.0.0-canary.15981e9d9.0","@material/typography":"13.0.0-canary.15981e9d9.0","@material/feature-targeting":"13.0.0-canary.15981e9d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.15981e9d9.0_1629821908546_0.7392134139559261","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/banner","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.fa7520f62.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"716da2cfbc76a21832500820cef685a4ef3df3af","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.fa7520f62.0.tgz","fileCount":40,"integrity":"sha512-cMR8/jXYByr2mfF1E3bVxGcVidaCM0Eb/icvcVf6a9HGjWd3pm4MsOeeGZ+tocqgVWjMrpeOBORXS8Fjy/LBig==","signatures":[{"sig":"MEYCIQCMuW3lrV1LY61RFoBTrilq5Ja9JN1Y3sH8uV6VJzvqegIhAL+RHNRNwvdr7rm3m/rtX0K7KSpQ+fTVL9u1L4MALTa8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXK1CRA9TVsSAnZWagAAta4P/1ZKYZg/25KzaVlICNQN\nZHTa53bnwcdHNls2GGR73Kf5r759E6ZU3OqyzGfNGkjpnTF32gbeS253fKMU\nWhCOzd44+b2hmBSxS6MHyfEG3LAEMqBOGHcbvqe44iZ+9uiMjV8c0InNkWli\neNKfWa7I6ZJZwvOeS2JGPDkmoyza+k+vrM87z8yorM8lMvMpH18QQC+quSuN\noXgzbWgAmPXHis6YB/94Xjhoojog8AU6Aqg+XbD35hJYMzGiiYtyeGTPTJ1w\nRUf9V4e/PV+hdtE8VTlSBpw20bFuF4zQGVfdo0r0WUhy9kQ4XLzVzDVi3Upa\nnRQDyp99q6JNcampOM8x5zJXpHfSEKp9JaXeYe8E2ANUFLVW39SyfVwhrtye\nAt2uVV0vBltB5zLJyh/C+24kF/LgiWhMEQJH/Z6wh+2C8EAREwjSrsFFLGb7\ncFooBl5yTBYBrPEA7zojDSts9xuyRoNefmF5WC4KW5hMAsQer9j/UcqDrgLa\ncTcsruMfNLO1CLyR3o4JNDQVISZM50F8cY3SVDlPZEAwEKV+ldtJRuvzJPS0\nioWN7uXaTtLB9ejim9CskYkXg1pIX8RCDMGuWQUOmVgxRUYw/0QZJAK6XrTs\n7Dt5muGm6Q9FJtbWcZY7H2JAQiFb/YOelAZZprfuFsTeHf1Khoauzpf6BHp5\neLvJ\r\n=OFg+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ded8a7ce355618969092a7bffde0da813aeec162","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/rtl":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/shape":"13.0.0-canary.fa7520f62.0","@material/theme":"13.0.0-canary.fa7520f62.0","@material/button":"13.0.0-canary.fa7520f62.0","@material/ripple":"13.0.0-canary.fa7520f62.0","@material/tokens":"13.0.0-canary.fa7520f62.0","@material/elevation":"13.0.0-canary.fa7520f62.0","@material/typography":"13.0.0-canary.fa7520f62.0","@material/feature-targeting":"13.0.0-canary.fa7520f62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.fa7520f62.0_1629844149342_0.8492011114002038","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/banner","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.ce25bc3ec.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"067068455bfe10382985417cd6a2098c2447eac6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":40,"integrity":"sha512-YgVlubN3qoQtoJ3E96X6/h1250w/A2kqnjXaRQQes7b8TslpqnQCB0tuQG78Or9AIYIpl9x3BT0EJXQwofOo5w==","signatures":[{"sig":"MEYCIQDeTBkgir6mUoT8b5xMxIB68SWctAKW8d3ixFkHzSSPOAIhAOnAyeO1L3kBdKL+aA/wERzw66l/akrJoBbKQ1qMODwy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXePCRA9TVsSAnZWagAADBoP/i0L/YeTmKpcOiqlURUA\nTy4J92F6s3PKtrUKNeS28YiFLl3ddpEMvRrjhTcSYCY7gi2hryLezT3nOtcC\nbXaSPeVgGfL2RzVhBhbh0uxV5iDFIeyAKV58t61mrEnazlE2pChbXNSyhfYc\nZp5Qr1gFuIZ6Mt8cV0pNSCYhrpuXR/A6GFklHj62ir5S4WtSlFCxkyKzWisl\nhbjWCArAFdmKKO6dXDmA3SbSEr6lxz8xwiqEIQqalCbFfBHkM+foc3Jn3rXv\nL6jOywS97uZXkaAag5e2JXRgBpPvOjG9uxjGnKUGClNOxC97npHwhvrqL3FT\n/zVikaWlq5UbZxQACo165JuSy7rbuJK7W47mtzXwbiyOpMoGwiCUS+iW0VHf\nmrz072MuA4K0FZ20KDMRd65QH3JIrB5YGJvQd+W0r4OJ8YCTtz1sGEc34vLM\nB3ScCGRFYwH3EIzoaZvvmCOd0Kflf3QrTmnVRMmQkdRnIGZv9VuTNw7SdJ1P\nkfhe5Tagk1dPn5gp3T4e4RCZCPhNFX4e5m2UFQ/kAD0ciIZVf925T33sWhbA\nNhVxcdL+vPkE9nTm29h93PIFeAds2gCeiXFmIzFKPkYwbsPRYqesYAmO7luC\nfjfysx0FiAURxMb9osHcxuP+uxNDMNNyOW0gbtYMk/yvuJCWwnCnRwDL8+em\nf2oG\r\n=+Z16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5296a1abf91023fbe0806f06b5b5fce528c40509","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/rtl":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/shape":"13.0.0-canary.ce25bc3ec.0","@material/theme":"13.0.0-canary.ce25bc3ec.0","@material/button":"13.0.0-canary.ce25bc3ec.0","@material/ripple":"13.0.0-canary.ce25bc3ec.0","@material/tokens":"13.0.0-canary.ce25bc3ec.0","@material/elevation":"13.0.0-canary.ce25bc3ec.0","@material/typography":"13.0.0-canary.ce25bc3ec.0","@material/feature-targeting":"13.0.0-canary.ce25bc3ec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.ce25bc3ec.0_1629845391068_0.1651293583908946","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/banner","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.12f5622e1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"134984dc82d9656a7a2b6cd40afdd7771e560ab4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.12f5622e1.0.tgz","fileCount":40,"integrity":"sha512-B4xeHk66c8wTizn2xvMlaSSy5WxCyjolDm0+Ne8lyut4i0KxIPgtGVyQGJaly/k5K28E/Z5Ex+iBYvGcwcmfWw==","signatures":[{"sig":"MEUCIQDyxkUM+CGyKtdANNBr5wQyO3sm96FoEEH0rVWNqBrTAQIgKhIlfi/E06EVf+kYCw0wUDvL6u0xk7F4rCk92dDmcPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":493768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX6CCRA9TVsSAnZWagAAWpAP/0O+Na1fV/Pjnj8vftUI\njdWZCZ7lsc63VzTdQh79Ui/C25jnwMuxblQS/Sv/s0J8wL+rQfdqke1YZF7/\nKYyOEro3Lc4yK1lOC78jpG851mC+auNYDoVSl8Unyxje2prsFgyYjRogbr2t\nox0rpmUPquPzZ5qkqC7Ja6q414TgkrhbWlQJz6Hao0Mz9z1QrTYPKKJmFk+Q\n0B31dcQ69o1TcQ2zSB9nkudJXcSbsl1VavhIgV9UZHjjmuxQ0mG4cDw4TlyB\nMONEjLNW8T+fjER+uTohA1Hbe8CkDQZGjQvwxGWLwpSaQci6jBxLUrhw/nmH\nee8GzGQKRXFjHeRlnpDM6WnRZBlnHa0z11AZr80SqmX0K4riw11FZ0wVk9Af\n/nCGg6MyiCiwqsnWjNtNLp0JIjSpiEtLWPxPUn8zv/xFo7o/LxCa871CpNa+\n8uBQ8IxMTTSGaeW/ECBKH5SvFwkrXyjagTL1QJMLk+FIuI1+TeU8Mx/fJ7NG\ntICCJ3bJUBWR4vtbNWGj0VuGy6Z//k+OJYd09ZWN3jGs+GYuc7FC0WxFXVrs\nIMAuXTD6SW2d2edVMwPHY6XyJ/i6JQPudeDOp49CJTVZNXI2T9CufeNm+PIz\nTmOCs5/OKVsf5JHSMIcGUG0gR3G+sJVvNBFIg7XkUtmhl0HuFm4xWB42nl0f\nof41\r\n=s7rF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2cfeb72e6002a5f3cf296794da5216b3114fbbc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/rtl":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/shape":"13.0.0-canary.12f5622e1.0","@material/theme":"13.0.0-canary.12f5622e1.0","@material/button":"13.0.0-canary.12f5622e1.0","@material/ripple":"13.0.0-canary.12f5622e1.0","@material/tokens":"13.0.0-canary.12f5622e1.0","@material/elevation":"13.0.0-canary.12f5622e1.0","@material/typography":"13.0.0-canary.12f5622e1.0","@material/feature-targeting":"13.0.0-canary.12f5622e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.12f5622e1.0_1629847169771_0.3674029451974299","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/banner","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.d97f8f133.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d5fb7834dbcf2fb0be0a524be3b3f2a19d564ca2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.d97f8f133.0.tgz","fileCount":40,"integrity":"sha512-oNhsArDCPsTSMFgdfxVVB32tbEZgEvyy7Hqb/dP2tEVtBJBJzN/y5CRo4h3KxQY8s3Kci7A/qdL5XgOnr+3Ijw==","signatures":[{"sig":"MEUCIQChDZfXucIpSglgP0oKFliOCX3NzwjOdIARHdfblOuw+QIgEqcSDPrdNKCO67rRhs3zEOvjYmS70o7UFAzaK1/c9c0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo07CRA9TVsSAnZWagAAl6EP/Atm/wvhIigGSvJEw2Aa\nK+dfSusmMjwrNSu85lVURJfY2J+ewtNpavYcJ1f0GAvK1BR57YfOV56MR9ca\n181OFyzaGgtp+wDt71e2VtmcozRp/53e/PMgNXy2b7FrvHB2dYCXroYefpNF\nxxP3Koe67ZuIu3wBb2afM5aGZKPFX3ECvCrfsFmH2g4CrAOqVblpiaI0sds4\nEg1GHmCBHTho6gVCsY26sJOQF0urtrxFPjCltJ2SWT/2JC2WVutuK5h7gaJr\n+y6XcBqpeKfVjqCFPS5NwHNsimVN4Kco6dOVbctei/141MNjXzXwXk+loQRy\nRv0LtGQVgZWPvduNhlW1KG9nK5lJ/avUzbXx7vHfYsp6Hk2z8N7Zun7el6TX\notsEL5LzGUhQtXzExWBKwtyfJZBRMRriyqzct6EbFOA+SpfbHq2Uj3FQoH4s\nwbnLubOz9J4hf8FWqpIzuqjWVKNCS3fRnCuza+z/PXMyPWvq+xjOc3KTb5G2\nHR61Cu/NKcJ5+IRBf7KE2pQJovesG2cdV7TqjB0POvVm/qcHmDF/5PtW4mX+\no1DNuyuompn5GUvPJQPfLljQux89SmciTwKCAyt7MpuP1MNCp1RLwO1/2rDJ\nerdc3Z7LCxZy9K4S/pMLSNEr7iHThq12XQuVxtglmB3co8lP47/5Arw1oELw\nMokm\r\n=WAuO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e7295f4786bb26bbc05939b4d6e3e42f011cc033","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/rtl":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/shape":"13.0.0-canary.d97f8f133.0","@material/theme":"13.0.0-canary.d97f8f133.0","@material/button":"13.0.0-canary.d97f8f133.0","@material/ripple":"13.0.0-canary.d97f8f133.0","@material/tokens":"13.0.0-canary.d97f8f133.0","@material/elevation":"13.0.0-canary.d97f8f133.0","@material/typography":"13.0.0-canary.d97f8f133.0","@material/feature-targeting":"13.0.0-canary.d97f8f133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.d97f8f133.0_1629916475327_0.6706602580921557","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/banner","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.d86fb6fac.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f61e7179caaae39ad1ff5e5832b585f610eb2f28","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.d86fb6fac.0.tgz","fileCount":40,"integrity":"sha512-AXcwNBCeGQqnSa8SrgyTXdI/cXTml4jtfb5Xv1ex4uzHAwl8CrOR+ZHUzkuAQVQSeqadAFK3v95TYfWPGQsj8w==","signatures":[{"sig":"MEUCIQCLW1IK2MylUR5HAPpARBx+SuKMlsx85w9FqfI4HWA9wgIgD519tVfcMRdpJ5ssK82zQbCj3q468Hhp5PoodgfTP+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpIJCRA9TVsSAnZWagAAaaYP+gO/hIe2yvP9t2gSqo8o\nvjmEMN9Pu4CDL0qRpwlDJ7bMQ9u9EuJwp56Ic1lIJpJQ+ogm7NkrtTX2XYsn\niZlGDScAHMwoQBXDb4pZPrUD1bOPa16tZ/upMi5/6y56/LykCpuCOd1Tb/NZ\nu9OxcXGoiXV1ZHAg180N8EW2xN15dZtYgYiJsKKa2lxvO3lpMwfxAVYXf0Um\ncM1qEzDzy32Cv4Zb0xAulTJGYjWN9FGFnCy/uQyriE/xA+46C7IlK+XQ2ZDu\n9H0ulabdnxqi9mt/C/o0pLThPLk9M5cQkLeAPF//wSETM+3nJRV5DRByIZNd\njJi53376Dm7RG2o2Z1LlQaYL8oMF2U+4hTl62MItVLfZLelPgzEwWbVvtu8X\nizr+WPvk2m/iSnWCMdDjOrb8/Qi0pGUVaRUvobSHojFGpLFDItqk7RWmUuoK\ny0woqhi+rhFWtkPV5xHI7aUKhiEDROhU4wIiFniqypwJu+Zbch3avcWioeYG\naYEzLbs2d3aI5UYljX6y3KgpeNySbR6cKSzDp6Y280IcNIENpbs+yz3pe2LP\ndC3oGd3s1PfXCfUOLhEv/+Kax3KSbxBd7oWtDvxr9M9xSdi8PmmAOg+wdZR5\n9KbZmPEGpp2x80rJv4QcaH9S04yZXQWNETjaGmKsGOeWiZjfge+0qxFjqhai\ncCw7\r\n=FFwr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"35d13d1a20fe14c295e8589fe5960bc9b4da1925","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/rtl":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/shape":"13.0.0-canary.d86fb6fac.0","@material/theme":"13.0.0-canary.d86fb6fac.0","@material/button":"13.0.0-canary.d86fb6fac.0","@material/ripple":"13.0.0-canary.d86fb6fac.0","@material/tokens":"13.0.0-canary.d86fb6fac.0","@material/elevation":"13.0.0-canary.d86fb6fac.0","@material/typography":"13.0.0-canary.d86fb6fac.0","@material/feature-targeting":"13.0.0-canary.d86fb6fac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.d86fb6fac.0_1629917704965_0.8988755712257444","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/banner","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.e8554dbbf.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2acbcbff90ad8bc321d22062e9702d8f28da263f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.e8554dbbf.0.tgz","fileCount":40,"integrity":"sha512-5vuawp5obCKc3qBAvDJvzNeH82pMnMkjYgCEgJyaTgmCiULIXdPD5Y6gjVGmkuDupNy62ZiGJHuu5roHaNJmHA==","signatures":[{"sig":"MEUCIEUCVDstpIQrfljAvVAAI285JjE9ch+StYpETwMrOE16AiEA2pVAIp/dCfavHShB66OGHUaahPxmhlkMZyVdbO8eLoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2QCRA9TVsSAnZWagAAwr8QAI3S1euGi3qY0DlBS4uN\nggfAfc/R4u/njGa16N61NQq549DoByMAlr+JP33MGo54ZzCvoroGwfHN64Lo\nbioli9jvvABgox/fkV8TiBe6PRPbMfI6tl15Z0BNqgcD0CKecFISsHV0kDZ1\n34P0rMrz/BVuO+a20xOkidCcFPe6Q49+nmKM8o/zgwNnqWXMf+nhXZDsKGyo\nEoQ4CPRZtw9CHv0RAKTG8EPhhVppRicohq3JJu9l28h2RVgk/lr3j+aBRBEV\njgziDjvlwvFfv2awO7uW82lOIPCrukAV71wsN1bJmGTK+0/aGBfAYGr+6fBu\nJtfA5ZH1MTBD9wLFr4XVOqLtqzFLTcA4Mdtk4Z7TQmbs1SmH2SsRCfRZxDUX\nAiwXzf6IJdYbDiocMGohdCbifz5/I12sHka/itKWIRw3IkguMKZiFWk++Ke+\nEj3TGUCXxwint1jE2ISbd2ppeQo+PwMGNijqPTtkwbB/pj+oW7Wygj1ddhRK\nJ2CAqu/qxYxAtzu95brzZB3U7UAfidVtgYn7TPlmnos1BTVjQGVOZt8OyROQ\nf/DdHryZDi/872ZT6OxQjBefPNWwHwW9LcYrfqd9vtUcTPfr5uDCB9vcVMI1\nhs/BwALUwfnKYx9X6646XwFXzAIvwy6bAL+4Mwj4NcTRvgSZTvXigeTF4akt\nloS4\r\n=HJZa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"da636a8d32198c6289df3bcef39340bf76cf8265","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/rtl":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/shape":"13.0.0-canary.e8554dbbf.0","@material/theme":"13.0.0-canary.e8554dbbf.0","@material/button":"13.0.0-canary.e8554dbbf.0","@material/ripple":"13.0.0-canary.e8554dbbf.0","@material/tokens":"13.0.0-canary.e8554dbbf.0","@material/elevation":"13.0.0-canary.e8554dbbf.0","@material/typography":"13.0.0-canary.e8554dbbf.0","@material/feature-targeting":"13.0.0-canary.e8554dbbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.e8554dbbf.0_1629928847992_0.9196263522385755","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/banner","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.877e3fb0d.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c0edfa2c24c21ff26b797c48a713aa68cc95a8d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.877e3fb0d.0.tgz","fileCount":40,"integrity":"sha512-Q9XnG99xnx5NBdtXTVlUS8OH+EpwuJPF4YqSdQhRshV+4/osRw4MKoOso9AHNpAg1gOuuF3uCGoWSKSJyfKR/Q==","signatures":[{"sig":"MEUCIQColqaKfdfxW9OKd86haPLo8f1PSGcKyfn9FXmEzJNRrwIgElIE4sYf0IKsTvTrEf1IeHnuLRG+7aZafkAwrAqLTLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7W3CRA9TVsSAnZWagAAdLIQAJ5uDNa3Cntc/Fg6JBbr\njPXp8tLx3dj4F3NSsYyM80E5N0HrMAh70JWY1HYSByvetpKHES6pixSmaDro\nqIIgJT7NVjTvr/e0Ec7pi7wLdDi+6xdG7j8DUQ6q6jz/rO5YiP3sM1UMWMHU\n1vsROq5Ixaly851PFCxTjbauh0eJYr1PD+SW8VWQPegBo0DHcztIOv5534V0\nWyspUuTRzHOjaDI9Nbkd4Cdoxy/HJLXGeQqia92SnK92bSP/WoV/GFY5crG9\nsb00LgLp6AmvcxF1VdJAAYzNGFX+yEKXpw+P4P6wENzJrOneFhCE1LICMc4u\njtH+zD+a/0nJbGllVR4Tk9+J95ii1LmJpNR//Xn6jcGD6RkDy7GE91kWvDUP\npQHlhjDva4NuJuaebPdftf/MOfqf6Ncr4T8N976qQZ3BZoAg4kqdzLf/ybd7\nSFImNcn56ZixcSLXWlQahKVnDYzty4KgSWpzKTiKcD2d5CZWexy9OWJuoddc\nkT+WSB8m2Fg8U2tpAcs5QTc4Kc3GELo0eXTjQqKK0PQ3nNXBmcnp+HoibH0w\nw5cuNCj0aL+WL9CRkujy6TFwoA+hWRSF+VMrn1D/KJhSlTnpub8DzifWvNUb\nPhwWddS+73b3Lhi94xHdAhpQlnn03V4sinxCtd8aifP4of98wvGUvwfuxT3e\nA7Mc\r\n=X4O3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"849a956f7ad3e0da0840469b917eb66537c875ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/rtl":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/shape":"13.0.0-canary.877e3fb0d.0","@material/theme":"13.0.0-canary.877e3fb0d.0","@material/button":"13.0.0-canary.877e3fb0d.0","@material/ripple":"13.0.0-canary.877e3fb0d.0","@material/tokens":"13.0.0-canary.877e3fb0d.0","@material/elevation":"13.0.0-canary.877e3fb0d.0","@material/typography":"13.0.0-canary.877e3fb0d.0","@material/feature-targeting":"13.0.0-canary.877e3fb0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.877e3fb0d.0_1629992375295_0.374946946121512","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/banner","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.6236f3576.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96cba3872087a872a46e68126cd3e0890a893f3b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.6236f3576.0.tgz","fileCount":40,"integrity":"sha512-53nHt9kUEuYnYbbhHU8VysNv30IxA0Pu9ahK2bNoLkNQEezbBsFF7Yq6F+TsapskYwQtEnTKUWjUqYENUpFC9w==","signatures":[{"sig":"MEYCIQD8rnStgz3NWiNPNoRaLIDRJ6ZNYMXq9sXOI18YG3mqJAIhAN1t78QxHI09CRRuWolg+j4x08eeiapgwevYcT6ZOM5T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7w6CRA9TVsSAnZWagAA2MIQAJkuMxxkqfM+TrhkmKpY\no1HUKSfLhgeOK5fBfmHQvqfjXp/pNAh8iGaOy8jqKMoe7lKORQjAdeFPad+q\nCqbiB5G1HHoUk47oPLiHojVJ4bu4/t1iU8gCHkTIVdJrusUoiZdE8OU0v3Xn\nzjtM0bUbtOvxRJWWWrpBV0KWp8hkd2Nz4h9KxGIXNxIXbjhF88im3yxuj/JL\n59iB0PVJeePmGDTJelgl+E97gPaogT/nVriGXVY48aRpAHz0zgbv2Gbgtg9w\nzCGDkhI+d5dXxRGHThCAv8kcimAezfHjgUWamBwUx7IfNzuVyQSJiJdCarcn\nTnH8P4t4EIx0nUN36xapIdxNxcP1Osx4KnCY2GxC2E2RzYHQizC9MuJOFife\nV2FcP3mGgKhWDoFmpNJXJTESBaeKDTdJYi/v5493prAIWloYtHGawtz4xAn/\nMCa9SfefUCxZO7OvYjkGXuoiudNYYvskxameVUv2kEf0D7BoOeRh5k1daw9E\nEcilaKcQg+OZk+j1uk4Ykom1sckPHBQnxDxgOYFh7Vef0+OFzmkAIJlhcXPt\nGEQhsRlYdZ9rb/bM/l83duWA0fjTWXK8WqQBcnRs2Bn6JAZFbFIGwhFNZklt\nH2raRmItSEuDvu4B7FT4LOZEGm8zGMhWu33duhM7xjUR48JvKIF5CP3YlNLu\nypSY\r\n=4WMJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"27220fe16ebbbdcba193340cb99388e30976a2d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/rtl":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/shape":"13.0.0-canary.6236f3576.0","@material/theme":"13.0.0-canary.6236f3576.0","@material/button":"13.0.0-canary.6236f3576.0","@material/ripple":"13.0.0-canary.6236f3576.0","@material/tokens":"13.0.0-canary.6236f3576.0","@material/elevation":"13.0.0-canary.6236f3576.0","@material/typography":"13.0.0-canary.6236f3576.0","@material/feature-targeting":"13.0.0-canary.6236f3576.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.6236f3576.0_1629994041891_0.06453248735201078","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/banner","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.1d19158a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6cb0a61f3d5730f8c6d33ddfbaf8f77d1580e032","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.1d19158a1.0.tgz","fileCount":40,"integrity":"sha512-r8X71Y1NITzCjl12+8V25WtP5OO8RN4/67raqa5F50yD/FBoXeCUxuJAYhH5sw6tUKcxZILz+Hj09b/cwVAjuA==","signatures":[{"sig":"MEYCIQDM39z+3ABXBlBwnsmDtVaiu0uFGiEZObU4w+4dq7vOAQIhAMkKxg+thzaDF6BuMFnFc23//e69/2zye0x9Sa27rIJ4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8sKCRA9TVsSAnZWagAAbLQP/1DZzbZJJ9bLGf+TqwXj\nPPFkOUYwrYRr6bthS6QU/rOscdHLP64WhQ29IxzsgwFiR+xnPTrEs+i4lZ9x\nuOpaqGIBvezZVUzWR2+OrUV7Mr1rumd0DxzYxNYI6VJJe+bnhKPcadLXcZnA\ni8NHsxJRMd49i1XNnwJ13LiM7vuDv59/wjYfcgEcSL+fcMdlAhhIdhBBLTFR\nvAwUBvjRyYZAZkbITI9WPQkKPR9QxhsFy4UrclLN89K84FXhHGkHuW5pQomx\naxUqsGCK448yKLrbECFS5ijDj1E2k6JP8Kg/wg3Q6e0j9XYJyKQsUrJhQXD4\nkQrO8XZpLFXmqY+sX/7dWPa6tSr9hEizARGE58rxeY/YDNwTk/XUSpz8pM9R\nXW6+TtATugq8QE+DMVtwqrIj37sAoYIWixFVhZXbl2bcXhsicuTs+wmoAgQu\nC2LzNK4l+WqD/T36XKVmvfu1ud8RAxWRfNC6uGqwcEnIcIFy/Dvg/90+uWMD\ngXeRv5ieAIn3pMekanzISWPkpMD32ztWzJFw+ywaH5SQcS7sNnFOwpKPgYkE\nPLfQg0BQZubsEE1KkpuWHzfP0pti9zz5HvCiLoedxTVH87Swk/+bGYLQ8cbY\n4c3Id/af1QCbPaOgLNpNBQUIIU95pVe13W/FZcCz0JqPjjiXjU/iiCrXIJgT\n28Q3\r\n=Enk5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"451d11fe02e89db73e3ac79cab01741c3da63ab6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/rtl":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/shape":"13.0.0-canary.1d19158a1.0","@material/theme":"13.0.0-canary.1d19158a1.0","@material/button":"13.0.0-canary.1d19158a1.0","@material/ripple":"13.0.0-canary.1d19158a1.0","@material/tokens":"13.0.0-canary.1d19158a1.0","@material/elevation":"13.0.0-canary.1d19158a1.0","@material/typography":"13.0.0-canary.1d19158a1.0","@material/feature-targeting":"13.0.0-canary.1d19158a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.1d19158a1.0_1629997834045_0.9580621633784132","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/banner","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.6adc9e83f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb15644b048ab478d8b24ca8c0221610cbda3d81","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.6adc9e83f.0.tgz","fileCount":40,"integrity":"sha512-q5Q2pCQ9xwYin2Fz0akddgA3EeZJUfX1YKVCGzm6Kqy1LLBI9fOkJ00ehTG9RjmOyVkfc4mWROlERYGT9CGMOw==","signatures":[{"sig":"MEYCIQDxfhAJbScih9lLsYzrtGNedv6Cb98ZO2ssc/brmU0CkwIhAOjXUKJ4S1XvLqTsBkwDUaoG/pjFFXTwm2qI2cmk6Vbn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+SCRA9TVsSAnZWagAATcoP/21blyXkRj86x1jaIOks\nEsRuhiOf5F1qSTeBUrWWGEchX/hIbhPFmvFjfMosjcIh2hil3V3M8WqMDA8X\n+sWduF9zhMH5PzgBchUIGIpktK6wTFWY2clLn3h0zSk6IsNCEQKvas3BuIBJ\nMl2HBPRi/PhLmi06z7er2vqmwlAE+Pt+919ztH8khqp8Qn5SfFx6oV2N4S7d\npVKdPOykyNECCm0bb/3PDfb+j+UVhQBxN5iXXvp6TrrU/UAYd2L60t+tHY/K\nm4DF6+HI+Q66j30cgU7qoDeYMg5TLeNPkrPZhiOeuVIBa6Q98BzuLBZuQXNq\nuzjgDfCI1cXjkEk0Hp1vMVS0LFNeltNNauJjZIUKWdzFkaKMhIgDvtyek1sU\nJweTeYEqjiggj4b6dCVcxgDPJfVJHf0sFpPGTQ34pWEMQNLNISQDieXZocJf\n6d/inFhuep0wUn49wgXEOnV9GiCtyIB/MCvOqsdAEjPhQyqyik+nz8QBlicd\n6VdfDC/M1rWyYl9j/NGnxlYkQPUAP9DUnOtekz0/jGENgjw3IZA50qZvymib\nqtWy24taknZ059CdXiqcin15BclpRC58wFU//bmvZOMYZwflE0LzH3bDqGYt\n79AiTGYSvK6SGVd16QpwmTIhNRV+GDKt9FUYFCJUI4Y+TVBtGI5f07Uq8Plz\nfP4l\r\n=YehE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d3d9f017c96584c46d77544b9f0dcb6e22eeeede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/rtl":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/shape":"13.0.0-canary.6adc9e83f.0","@material/theme":"13.0.0-canary.6adc9e83f.0","@material/button":"13.0.0-canary.6adc9e83f.0","@material/ripple":"13.0.0-canary.6adc9e83f.0","@material/tokens":"13.0.0-canary.6adc9e83f.0","@material/elevation":"13.0.0-canary.6adc9e83f.0","@material/typography":"13.0.0-canary.6adc9e83f.0","@material/feature-targeting":"13.0.0-canary.6adc9e83f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.6adc9e83f.0_1630363538451_0.34657895017105633","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/banner","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.d082790f0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"033ff720889824165bb12fa63e7a983ad8d6e4dd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.d082790f0.0.tgz","fileCount":40,"integrity":"sha512-L/nWgrkRXHXrVt+fbe7lXq5u8rm5u67KwWMkYph103YuIPo9izSVRPfsWrRKgGeDmnKlSlgoS0SD7HrStUHJuw==","signatures":[{"sig":"MEQCIH9yjgZMtRnciT81YRd60oRCp2O/B/7dEJCOGn3xdOOIAiBrhLLYQ16sHsucvaic1HRRmFthvEN5XX4vXP5S6WNuUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/bcCRA9TVsSAnZWagAAHgoQAI4j5+kDLXx1Gs9ocvSL\n4m7idndf6eG2WZsp30ywtth4A6t+F3ZHmyV5ueysMQXDZSaSXzjB/BobBc/f\nile8ekjpuZlnDZhpxixF1jZG73OY3TfH9cpvok1uToIab3+QVnChyOURt/wc\nDZgOtGv4IezWDfpU8+3qAbQwoC1b+1YnmlrNA6srScrjExgCd2AFXxPID68+\nbIqaN5vQzgVdyJkyUOBxqEMlfXwa8xppc0kQJ2acS3gTHk0rOh/MITaaJnlX\nEieZKLNpWXNno95OB9Qi+bgaR9WZJKT+oeTiaFaeNbQp+2ktox7wcmgrTCUz\nR4mObVU14vt6knqrG/zu1qYxySsPGiSHbqsMYaEKStvzjWj/UqpMBIzXedzJ\nS8iqsnfR5Gxk5zkc6l3087txxQCILXhI9I9Lkqxx6uRHN1zZ9UiawDIBXHIu\nK2iHD4nIzqrBqwTPSzKz78+lj+NN5CQfHJxdErQ6dyZfQkHeotCgTli8l2zV\nIE8v8XRaE8S4wTOesjZqbgwmePVUSvNXuDnNBHewEEH9pJ/RYRfnGlMU1whP\nkrv1E6jemnRzly798wOqrqqtR+zXO9F1kc2NiyLfL16sxG7d/d1n+69ihAlf\nrugwRpePs0XyVRqOrQLZMEQqQWB7OLN1ciziNdo7Is0s778XZw3g5Kzi4l0F\nTqrP\r\n=q4AE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"77212852cf39af4379f15c0daae076eb8b562c15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/rtl":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/shape":"13.0.0-canary.d082790f0.0","@material/theme":"13.0.0-canary.d082790f0.0","@material/button":"13.0.0-canary.d082790f0.0","@material/ripple":"13.0.0-canary.d082790f0.0","@material/tokens":"13.0.0-canary.d082790f0.0","@material/elevation":"13.0.0-canary.d082790f0.0","@material/typography":"13.0.0-canary.d082790f0.0","@material/feature-targeting":"13.0.0-canary.d082790f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.d082790f0.0_1630533340079_0.375817548809561","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/banner","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.e2c4f0196.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4af6cb14f36dd566f961ee5724cf1642ee318f67","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.e2c4f0196.0.tgz","fileCount":40,"integrity":"sha512-SUHn1kjqcHBYG8lYaA9NEqpdnPYXQCNaTCVgG9xwkVRHTyEGVbJvppr1JG6RiNlD3Vq2M5KfOlT7m7kUSbntxw==","signatures":[{"sig":"MEYCIQDb0mVDUBWvrK5Jt2CBdC/mjeSWt2nMDzcYlATPl84xlgIhAJHTqP+NSqNZxXQb2YiejmTM2flMOgAqkVkNS5L4kmur","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDMgCRA9TVsSAnZWagAAoRMP/0woEmwM7Ht0HSk/r0C8\n+4whoTjlIn1oUQB7JEHnuEikUZ1JcF6TV5CzHehrHsTBjKRwCdBMcm7JZavy\nwviMMujGMQ9IWv3/tilQhouAQBH2joRgKnOdQcZ7AYv8jUUFhwkMzkbLU9uG\neadlnPXuFtWtbZrYHBviMGBP6BVFo5VuxwBxEDDOJRoNhBEBd85JFlTD/SbM\nEeNyUaXCNerIorJ08EXQomZbdwTl9RfSBm8FDskjELJ1sRgHF8+1noykwkx3\nYxhBrBelkh7X58iUw1KEETUiKnm7bTlwAWRG0NLcvEL5S+sO1YioBj1LDhTM\nHFIHWmzhpLDXGHOPIfENLrf9OZdihuEp7KPG8MSy/Mb7jXkBa5TjFUxThuPQ\niwRepQHvdfnDQuvhtxJmpH+7PlGY4LfGZYHyc0wnVKesnpYw5ZZcgGWZfltk\n9GuTXC6ivJCh2Cl9C57D7h1hEaKaNNniO8cvszPxzMDSnBpG2H0t5EesVsuC\nt48PUTQ3BtxsGBEA3E5UEZH56fN1A34JDmfU+I6za3w3SNSuRBT85Dew3C2d\nNgi8yQRTu5zkS6VTqC36ALAEvhx41jKSFqpodplaHsIzdFzYW+DpggKLcbRm\nJP7bbi6vaw6jdf0M7jePZa7aQ7EaJctxPSnmuKWypS0ACiEvPXe2sw3ghXS7\n4W2T\r\n=Nbw/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2100e21debb7fbebda0966c953fb24e1964c19fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/rtl":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/shape":"13.0.0-canary.e2c4f0196.0","@material/theme":"13.0.0-canary.e2c4f0196.0","@material/button":"13.0.0-canary.e2c4f0196.0","@material/ripple":"13.0.0-canary.e2c4f0196.0","@material/tokens":"13.0.0-canary.e2c4f0196.0","@material/elevation":"13.0.0-canary.e2c4f0196.0","@material/typography":"13.0.0-canary.e2c4f0196.0","@material/feature-targeting":"13.0.0-canary.e2c4f0196.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.e2c4f0196.0_1630548768390_0.5425605038700672","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/banner","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.611db508e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bedae89a5c14879f6784d96e02f6ab6da613cc14","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.611db508e.0.tgz","fileCount":40,"integrity":"sha512-J1B4ulI3ARXynvaSo53p2DT935Yhfi7cKVrIhHsyqY7bcWVDTuj4QENMnOClkf93EFWMM4HQyrk5/C9we1/cYg==","signatures":[{"sig":"MEYCIQCoukbaBWjtbYDgbukYCrXoaCd0P5LcrjSZQgXpF9U0iwIhAMEsSnVTgJ+kRcK4KaavgYdQJ8Q/y7FH5X40o8sox5FQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEIUCRA9TVsSAnZWagAA43gQAJ68cIVDGE9iSogXNNXR\nTS1/dTNEuNSjS13DhZvgpTOxi4Sjia4xBKosEtLFGA9uzUJENqbwLRHsl/lW\nhJJoC/bxAITRKw7AXvjQQ2p4/PDAOEYJT7DV4t78fBDzR9Bu5uDQ+Bpf6WEc\nFRuJ2zjW+FY/eVM6tBInhU5cWXa07md05lp++nF/Og9SwY9s90HFoXARXmcO\ngXo9cpdI6LBYUbc1AyWxyfNqjQnTCK/WLD/QoKpDFpXqpyqbUEv0DGMG01fn\nm9lie5mmrRxy5yN54ntQjD9LDRRHfML+pamWlLO/Gv+auIF4pYg6oVYCzmor\nmiox2wMNg0kA3s/YsuoMt4F93KXAEtwOcHi5pvWCkSBEbijYdSPz3cQ80oty\nBRNmUx6F/GLrPHnPXKi7TK0d5z7k/dOl+f2yEpq3/E1HWHa6xEHpL+Dr3PrS\n9fEoKn0rbbxidAD9YuPz2IJAqAw5sQKk3FJlpMzkobVSsHb5TWSUJ0Melivs\nv3XzLPewJIVZU8qAHxUqwzlbJfM2UOvuQvqiaKp+IDrqH+iMhAqLUxSOwKma\nEJB+5y3Y8tUZn0IC9n5oa5+EuYLwbwM6271gKsQrRyC/85gZA3ImdsTCZ4tK\ndrhPokswXZ8G10YlgxTP3xIyAlJpc7/aC5eZXUzDG0CDuLNzgza9Y551vIoX\nEzEZ\r\n=2Qh2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5d75be4b0e067fa5d6477869a053c630a67cd643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/rtl":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/shape":"13.0.0-canary.611db508e.0","@material/theme":"13.0.0-canary.611db508e.0","@material/button":"13.0.0-canary.611db508e.0","@material/ripple":"13.0.0-canary.611db508e.0","@material/tokens":"13.0.0-canary.611db508e.0","@material/elevation":"13.0.0-canary.611db508e.0","@material/typography":"13.0.0-canary.611db508e.0","@material/feature-targeting":"13.0.0-canary.611db508e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.611db508e.0_1630552596159_0.12640292373908335","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/banner","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.d4706933f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"728d76dbc673a0ae87ad117e0a7d73ad2348e6b5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.d4706933f.0.tgz","fileCount":40,"integrity":"sha512-tXoxfPioj8Yq7f1Lqm/PU4hkHypTzAuNSuvLXJ09+6O3GD2pbC/Oq604JfkPwnS0YmrTYXszZRdA9U0Q4aHQIw==","signatures":[{"sig":"MEUCIQCfz67HKmpaE/FOI62gPPj09JCSGdAPVlrpkk/fJEbeGQIgZJHFrYpnzcJzleVlubrr8PdPtV2+vsXZJ3uW16D4BdE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPAhCRA9TVsSAnZWagAAc7UQAIUtzX18/qXPeUxxM8h3\n6dM25Qw64O1LYwhQvwysuVXiNdSr31AO6aRo8oU41GDSBZInXgmD95zXIQxX\nBhmkjfLLr1dZPE3Bj3IEYCGLOn66Zz1FXXaszYI5okPRe479345rKDRBS2TB\nmQ2eeDotWki2Pz1qXKETuAbQ0DtoUTx0hdTAuxSigzXn3l1vEyQeKvB/yYwD\nZM8PSveVL4mhWzxrGKK8mefB1Rtg1W37nSgcniaZHf7c2NQuRBixdKFCRr7F\nHWnANR//OlcpBDOwoc77Im3a2JB0GYucJJR5sNZ6H2JatgK307ULPi5eQJON\njUjf1tyRfMcMP2s9YgSryfq6PwLAKbhyuTObyB2yw71do/VFnFhrtgnSG6CU\nspU251Ib0lw18W+sb3yn1YA+HAdpXcFWKfpUwWcSUNUFuS3SiSu6/82IJ/tf\n2Beme8JBw7McSHKdMX9hfXcYx4vzRtpHTdP23G7VSFnPtCRBSnkL/qIdxVzo\nAW99Anl6OgN9zcfA1bRpslS4jrWCmEHJnDsSaEhY8oHfv72HDymLbjClpdek\nGWWnaTvTza7NofZUcx+q7zKBdE19w/XwiLFnr97XX4XJC5XjELhTQdIiWic0\nOYHsPN9cbBXIrHOulYUWeWRZapYYMlDUIFxXeWnW8V03gBfZ1l2c8yJ+dUwG\ncmgM\r\n=X15r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9e7edb1e0621060d55bf2765cadc8f2ffcfa0f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/rtl":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/shape":"13.0.0-canary.d4706933f.0","@material/theme":"13.0.0-canary.d4706933f.0","@material/button":"13.0.0-canary.d4706933f.0","@material/ripple":"13.0.0-canary.d4706933f.0","@material/tokens":"13.0.0-canary.d4706933f.0","@material/elevation":"13.0.0-canary.d4706933f.0","@material/typography":"13.0.0-canary.d4706933f.0","@material/feature-targeting":"13.0.0-canary.d4706933f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.d4706933f.0_1630597153376_0.615479163476284","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/banner","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.c16fe03ce.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a0eb0a06f4e9e8900d38da0264da3ee63a177219","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.c16fe03ce.0.tgz","fileCount":40,"integrity":"sha512-4JUK4L3ionFaP0/d5urOAZGHvcLxeWwc5h/rmTsvG5oOmgvVAI2YVYl3xwrwRaFAsl90u+d4h+xK0SukfEbALw==","signatures":[{"sig":"MEQCID9UH5r/HuB0WwoVikMmZ0+qNoEbzGlfOaYTV0WuqDbpAiBlKEDUXZaP2Ot9bLtQ3hz+qwuHYzPfGogMM1m6pcyEDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492070,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ3kCRA9TVsSAnZWagAADFMQAIwYPqQ6S/Tn++i+vvDp\nZmE3/+7enusMSkvwUQBU3Io8aLjDbdDaQbLptbKUwsbPFDYU+afPXVn+F4TY\nzzloQtnOmCCUtBOboTf3OI0Cah2Tc9BG6Hak30F38lXUdv4E6TpVIL1VHxdS\nUSBiw9qEs+H5M4ORE/t6JaGkk0yQR3a1sBHVC1x0Jb5Q9bIzE50COQvL+M5j\nOLK/giAq0n3uEmASUTXMDX+1QRXLp/5ecwFR4DTL1qL6ID87N6iZ+NL9D9g0\n7HWVoqTjsIJAfTsDwGlEDfhT87zgbUPdrN2OdO5SyAmCFEqhpNxnL3tAb/as\nfTYK/PnYh9eR8kPp6gIo8kQgmaKd8MtW0UDPa+ms7P/Qx2vhjcdOqd+TTZay\nCd6zG3C5HEWZ1OigSj4yM+ZjBAAo9h2QTsCFvCOaBy7XQtTzy7kb0IvWFW87\nMkE8HTC56sGTOXh1rbjDhVdJze+e8epyV7dpLPhpCzY5CRLv+1tOA9YXIxz7\nmz2XM+MT1eFHYpiz0Bav+XJmMXSVncuEw7Yv5QcsMEnG8ET+d8qNHSM+jI8p\ngc9nzHWhpLe07fWaXFTOkB0U7dcfdARin5qMzW0RTnCnNNyeEISAeNBRWxO7\ny0QFDtAXepLtS3KEjplKJ+Lfxb0Ly8INXwgY8BekK7UbQ6zXeQ2dgEl/0ihv\nBhnE\r\n=M25d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"28281c91b41ff8002401a21d1210e0fc629d55ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/rtl":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/shape":"13.0.0-canary.c16fe03ce.0","@material/theme":"13.0.0-canary.c16fe03ce.0","@material/button":"13.0.0-canary.c16fe03ce.0","@material/ripple":"13.0.0-canary.c16fe03ce.0","@material/tokens":"13.0.0-canary.c16fe03ce.0","@material/elevation":"13.0.0-canary.c16fe03ce.0","@material/typography":"13.0.0-canary.c16fe03ce.0","@material/feature-targeting":"13.0.0-canary.c16fe03ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.c16fe03ce.0_1630604772239_0.5800047203789847","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/banner","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.9203a958a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"18329798d965a5fcef8408bf16bf2bb0f7188f63","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.9203a958a.0.tgz","fileCount":40,"integrity":"sha512-lBc2B7XfM+hWx/Mus2SpKtgF13B1x8u0J5/08NNfv9rNWUJtPlX/7qRYR1KRTr3KogURa0W0PFF0qWrHaU1pLw==","signatures":[{"sig":"MEUCIQC0c0QqWwMfHNV6wblU1GeNNEhnDK0icCqfYQ9JbO4AsQIgB334zTLinOEl495nwK1FamLmJZMTaYxULzy2SaypqZg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWK0CRA9TVsSAnZWagAANWIP/24QhVAtPCLabihAQ+JR\nniPvCr6zkyoOZsZ5wr448nOMe3gOnTpzL99vdeaUSAr4dgr7VwhIElFU9A3f\nxj1UuVQ7i7ZuvYJlwX29+igEkcFkzasiwhUOMn424Yv0xdPpJWNTBn/r+D6q\nZipzDp7QCArGgCFek7wEthNB/mdJH13424/zAjTfpXTmhWMyyaeNNuLcIkBI\ndEwkWNpDiyuS8yCjKDclteaqdo9hInM4d3jJcAh+kgyVsFdZHBr4boT/H4jI\noFWaK6K5GaEvJmkwTqtrKEZPCr5Ai2ZDoTL9uH88RHydp0ypLeYfOf51pIaJ\nRNDbeURGpKGe9nGrT6PNiWujtccJj7wGFeDfbFH61A5jRv6TF3DOmCS2XPrW\n060z3J9XtlrxV6IqDFctEsRVY9ZVxy0+KAiCVzrShb4iKmxStyYPndlk/PcQ\nKt1JXOajHJagPNyfG0DQRsE5Witw2J2mqLMDb5rELOCdZvlay7rEdeWWURjV\nzBQeTHzlvf8niLvFq5rF6SXpWa25oZToiRO2bryiFcBe8gRjmash/rPdzLV+\nfmlueKtDPH0sl3ejqas1EQ3PcFa4cMdvd3o4WHEiR/Bp5BV+iDOFMUD8zwf6\nC8n2NDr0iv2yGI0AJJB+5NgWGmvZ8Jf1Cv1D/7J45gjQz5z1xBHIxO1miYRG\nNP8a\r\n=Idd+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2e0f9de34d700b0d1eabd5186c5b5cf8080eaf74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/rtl":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/shape":"13.0.0-canary.9203a958a.0","@material/theme":"13.0.0-canary.9203a958a.0","@material/button":"13.0.0-canary.9203a958a.0","@material/ripple":"13.0.0-canary.9203a958a.0","@material/tokens":"13.0.0-canary.9203a958a.0","@material/elevation":"13.0.0-canary.9203a958a.0","@material/typography":"13.0.0-canary.9203a958a.0","@material/feature-targeting":"13.0.0-canary.9203a958a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.9203a958a.0_1630626483954_0.6795867268125155","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/banner","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.fddd5ae93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85ef84c3c14b8bca02b8c3b48e0baa44acd2f59a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.fddd5ae93.0.tgz","fileCount":40,"integrity":"sha512-q9jZTJVovebQSdOS28BZScFbAh4LybCV/FAipBVBiXeqC1+kZZrt652Rl535POrs+cxFxfGWLfwosnAYMVXBJg==","signatures":[{"sig":"MEQCIAxGPM5OIgvRAWHUwPuz51PJhi+2jcpTrrDWqsDG5nw2AiAMuTCpajvhM0ltD2UygKSetue9XW43PyJAStCDTHszjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9pCRA9TVsSAnZWagAAePIP/AuzFPj9DDXYRsUci+gw\n56tyLfkSnI+I8nP3N6o8y/gJZKTEn5YkutXdioNaISz1DShlWLrC1z6GV0Fa\n97dJFfDSwmUag/L+TRGY5lAI0iB8yQ00hjPZaH61g02EdNsEHr78Feu0h1th\nJXzTCvrpRfy7hWrg68zaMnjZYbYS4ge7iFg8iVsd8UWxHtTR9jRc84XFvi5y\npqFp9KYgic5Ru4NboYRWZ6zAd7QyGn8PM7oSzkLPxsNv7nPt2OEPTEh9heHM\nr5MDNTQB6cVXVZSa+LeO6JYGbss3MfxIJXERcjy4W9ME3rEl8T4buYqR8RzQ\nhxVZW/8iQZsl8Jnz7GMwmchLcNd3HET8xpjvPdFTnvHPijZ8/ZRI/6vgqCiF\nqRbiPmbCEwfl8rzKVJAYjFWtKVcFTeBJ1GxQC12TyrEt7flWXmwUfLpSGp7o\nq3Oa2hjWpQHsOsx6N3e0C1uaLm/kbNHUOZWoIp0u1tPTxqdEs1ECwTlc9UQx\nGu6vqE9c25ZOKWvGCHK6OvdkbOKLdht2nC+ijrku8znTagw5FdH+buVfNGTj\nv7IzMaSSyxZZoUMTF8FceQf4tdvpSxaXGvu7aVR4EDoKlyoQtcsOvIdZJ4my\nexX0uVxd20NoY/BATFtfVzZoC/3bYCvPJEIOrgSYCu3yfFxOQiFcPhIv/Hjs\nOFi2\r\n=iU0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b5407901afd7b18f851e64db0350e0c38797ae29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/rtl":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/shape":"13.0.0-canary.fddd5ae93.0","@material/theme":"13.0.0-canary.fddd5ae93.0","@material/button":"13.0.0-canary.fddd5ae93.0","@material/ripple":"13.0.0-canary.fddd5ae93.0","@material/tokens":"13.0.0-canary.fddd5ae93.0","@material/elevation":"13.0.0-canary.fddd5ae93.0","@material/typography":"13.0.0-canary.fddd5ae93.0","@material/feature-targeting":"13.0.0-canary.fddd5ae93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.fddd5ae93.0_1630654313430_0.544333947776938","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/banner","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.117599a8b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"933c60788bcd17ed95a15136ebe52a205abca479","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.117599a8b.0.tgz","fileCount":40,"integrity":"sha512-Y64Rwdg9UnSFdFCHzrrEGaL95atyrIvp3hzAFcps4P03JxkXa1nNVDT7Mf7BuYDdAhamDV2Ljdu7MSeKBWzVMg==","signatures":[{"sig":"MEQCID632N5OeT+y6AwKqh+1OTpomJgKzfQ+bl/wjpMmhV3tAiAuvKeBHDEbP+vKfVH12IlxxzT5liPwSYu6FQ7A6W5Mig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/FCRA9TVsSAnZWagAAMOwP/AsFeG5hBbsSUxuuJMYJ\nViKLR5ymBh7l3iRLMXv0gk6cGVmY1R8lXBhJINAP1FO9SPN6lbtCO/CIT/m0\nOlzecG45x4JZkW7zIaINkTCjiKmLXTBnYktXg/Sa2xCuaaXwQMRveEjxxuqx\n6Ea0oB/1qnOG6Y4sOyMzBIfEIORpF86Pz0qRg+myCpXgh4GMJjF/TYmwe0ST\nVmxoCVbCmCtkmSJwKT07SkqdNC/Xxsa4pJ0ZuH0O3312efX4p0OlOWUAsXxg\nAr7qdx9ZhiM9weUnVF1Fc/fT9GlZPY8vf441N3Kz7VKl0WqUNjbYCOf86Tar\npXW1TVl2npPVNDk7Ej2XnAqT8Pid6pfATOtxmNRc8S8KBh0W31pW6JJ0/TLV\nbLsrghWlMR9pv+dTMQPFilADhkuvijxU4+fjynTCw2xK8QOqFtre8nHk017q\nCdo1ayKByaZv+v+/LG9r40UgVI4gurhIY/wqXb+1xOAsw2jPU0QNZXV8ErEy\nMfCjTo0muDPlNTstyMm5A4gpccNiNtQi6iLY3yOlBJpSQDzaAWCrn/NV5WgN\nU/9MbpXd9v8dochyA07R93lE4CgIAd6XLLIJ7WVwk5IGfpWqdNB0axFwlcvt\n2H1zFSinyA3RbcEiqLEBrfupDQWmTqqfRtF33ycrRmbFAslx48OK9gwo8/9P\nbdxI\r\n=PBRB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3dd17eaeb796b36aeda593de120f16c60ff06a0f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/rtl":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/shape":"13.0.0-canary.117599a8b.0","@material/theme":"13.0.0-canary.117599a8b.0","@material/button":"13.0.0-canary.117599a8b.0","@material/ripple":"13.0.0-canary.117599a8b.0","@material/tokens":"13.0.0-canary.117599a8b.0","@material/elevation":"13.0.0-canary.117599a8b.0","@material/typography":"13.0.0-canary.117599a8b.0","@material/feature-targeting":"13.0.0-canary.117599a8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.117599a8b.0_1630654404797_0.600974394027648","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/banner","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.e4180d07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3efc322a82c92c7502775481f9209c927549d41b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.e4180d07b.0.tgz","fileCount":40,"integrity":"sha512-edqpzeT5J8q6P5l9Qb/J0LxSFI0E5AXQbfq8DLwFpU7Dgqem9Ne0gUwPxCb6SoSVVmQWdWuaklTuvifxZlWp8Q==","signatures":[{"sig":"MEQCIBr8R+BKJOFLJOY7nQ5qghonpcllubZVAhmASfvHYcyYAiB+w9YQmNEqXwAFcmK4UaCg9qvcjqtyb9U38g+YuKmBzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492304,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/aCRA9TVsSAnZWagAADtYQAKEWAg/y5CrQO8dC6Ebf\nobN3VG50GnZp0qrlMQIYWQ2yeiWwZg4s0yPTia3zFt6e20zG8yiG+mJnn4YY\n+iClZjnP7/Z5PLUg/t26QHzWY2fwYbQMSF/mqh6VQtN7C1G1odmBoffAT1p9\nlrqWl75vq7iwBK7a5P1WeyZm8Xn0E8sv8A26PWiXBreTPymzrc6qX3/k4T2p\nZgtvggdSbwcUs77Rq0DMBD78yOSrxgg22oRzm7rDsKJDtHBxdPx6Bvd9e6UE\n9DzjD53H7Js0jqI9cflHOUjNax5soDs8f6EcwJ8D19jqU3nh76yuM0uJTRQz\nkgMxkXEOFXk+tYf9zpXsVevsRoir841Wc+yKs1Fh7VZudRG61tUbiAWg7f+2\nxalyQcHnDdO8C6In47I1In7dFlO0A/XujuSuVBE0iT8mssVVidT3ydQHTICM\nYGrFjbmFLCc+kQm4OZdM/jY5z0TULH4PoB4KQ1x0aPDlaqV4PhtBtu+WYJ5T\nf7QqJi+o2gY5RuLXf1Sx3kejcJq6PAEDI1CmX+PVtkSjlRVuezm0ABytxq7q\nQdrP5hCLl/N51to0dLbOJgaUc+GuI3hZMXgdsxRhVUt4GTDKgzNBBXaj9sXb\nYIDFw5tgomPtsPaQxq/75zUZkZ9IhIxcBGsPEUUyNs+I16WUoyErzf2L1v+G\nK3EA\r\n=dQdq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3b94d02f75df256cd0543dbdf5062823ee527d4f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/rtl":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/shape":"13.0.0-canary.e4180d07b.0","@material/theme":"13.0.0-canary.e4180d07b.0","@material/button":"13.0.0-canary.e4180d07b.0","@material/ripple":"13.0.0-canary.e4180d07b.0","@material/tokens":"13.0.0-canary.e4180d07b.0","@material/elevation":"13.0.0-canary.e4180d07b.0","@material/typography":"13.0.0-canary.e4180d07b.0","@material/feature-targeting":"13.0.0-canary.e4180d07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.e4180d07b.0_1630654426179_0.3987327527177986","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/banner","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.42d175efc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7cb4fc8e35a7ee7c312f9804e956b3c4958c6008","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.42d175efc.0.tgz","fileCount":40,"integrity":"sha512-xq2xPmB090Cj2b9XeLKs6C71WCWjC1oujQL5PbZdKSmwUEfimgEUpNJMWFI1R1voFic72vQXIxhA9CvvweRJkg==","signatures":[{"sig":"MEQCIAQ2qOtCGa63Yo187BfKa+d3YprV0xhNWSwNXnGrw/Y2AiBUSNhRb4hICHuPq0BNzxozU1gOoemyUQ6IZ+k3HHQ14g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLdCRA9TVsSAnZWagAAJmoP/3DVPAPSQMghDnJiREbO\nlWXIEKmEzBjsekgxk5fYH3Zipe53FHZDvqR8YIvdZnHmdzXRGFoevE4GGT0I\nkYWeeasKj2iR+Rs4UZV1MKGTtWKMLNkNy4AJHXy5AYV0JdKlQMyjzAOIBO3N\n5RarAg9E7TNPwd+mA9NzjyZrAO6pSWGP3zKRPKKxULKIE8xPSG5d8OsOiTHs\n1EfyjHN06m/drIgutkm3IhBdhN4UtXmASJavHG+3ZXykeVyzphE119wcyQV9\nt2QuOy3MP5rUhL8s5ddOKeLaLVN+z9uygceydvmzzO/cIHBg58Q8S4g+fpzr\nXuxAuS5RQEb6qchVdkTYDL6o2A6ydR3psgsJHAC3DTbFTXDgB13xpyv30mNs\nFgTWxo+gPxwPu1+afDJwr0XkFV1tzS4knDN9exZK/qo81SZMsOwqfOU7pK8V\nBNzfjaJ3eEHQCt9RN9bYpDFHYU/qAfJrX1loeg0QvK8zx2ZuOJ5g2s4YcZs3\nyEqqf/5/fok2S4HS2E19jAoWPUOmytdVuquhujWcdDToLv6itBDB/uOsuIg2\nL/4jHmStP6bXmNqJHfAhueb52cmIHCrbk1thU5GwxSRJfQGV/X4yis/V0mgl\nMGm8T9ZKCJI2/2Ac93lOqZ26c9sWf3Xn4Ljszkhr8eevzyufbIbAKscowrGA\ndfx1\r\n=zVR4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"64e749d9e76a60e5559d8b19e4b57da1f44ebf0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/rtl":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/shape":"13.0.0-canary.42d175efc.0","@material/theme":"13.0.0-canary.42d175efc.0","@material/button":"13.0.0-canary.42d175efc.0","@material/ripple":"13.0.0-canary.42d175efc.0","@material/tokens":"13.0.0-canary.42d175efc.0","@material/elevation":"13.0.0-canary.42d175efc.0","@material/typography":"13.0.0-canary.42d175efc.0","@material/feature-targeting":"13.0.0-canary.42d175efc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.42d175efc.0_1630683869075_0.006526229467355815","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/banner","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.72464476c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c4bde0fd450b110e23d409f52a1f813921cef17","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.72464476c.0.tgz","fileCount":40,"integrity":"sha512-E2jtr3ZZ0E8E8CeOzPxc+fxCzAP0l6W6v/yIMYYLjsM4+EyBxi6rEPSKLsWZ1zPSB+M7n97b5i3IrkiBk/V4xg==","signatures":[{"sig":"MEUCIQC2FSLC+PsEbczPyQAu4lr50Hp26TheWyrwCAuC1w+liAIgDLT5NBq/I1ExGwMBsxX2tG+ws4QcdEKhyVepMcHysPc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4bSCRA9TVsSAnZWagAAghwP/jGQP58VOwV+WYN//45E\nj/2IGG/wAKfB4PZsQ9efvwRySeoYi1RNhtibSv6PXi53SrCNV4wtB9qvVXBl\n2lVIp1Sxqq/bj1zStzSwKDUa6xursAfzc5oT+AL9ULlOAs1Aq7WyGlz0qqS8\nidnmFGqFoNyQH5ZvvIEuc7PqUVFmNQBrue3yBMltRD+DCc8+oKkCsjvrq7dg\nxhBQy6L7lqqZayX9gyjaLpWQhVa0Z/F6Dj0UvAVNs8+Nw44eoZUaeqlsiEqN\nPefpa+sEsT0MzeZCCjzMVIqTFtYNxobHDGDVn3Bw5Jqx+3HJVY2rBRPbTddn\nJEmWet+01Wr6ODjmltYneKO9bHwq9gGw40EJqUF9ZZ2LPeY42Bm7TJjR/P5i\n4uLBGv0g+HoEuLBW1mB9U5WUvbwo/DMZPNV7rYIv9GpGGtgiLavzno/r7Ogh\nL66b5R2AqchBiEX7g9I+mFzuQp7ALNjxHZCu2J6NCRAZU4wNQXoyfVL0nouY\nW+4bNkGfuHnuZExBJ11rekoRXPzizOXgF9xToRYkfztoKkKEGgXrT5apYLxV\n5hXBpsi5Nm/hHYp/e/KjiHo/fwbmYLwc0BODPzyIyQb1Q8DAvsZPpfx3BLz5\noj/aTYZREi+CaX/FNb/u21jtB5pVfS0lYsQ9PeIkKzDAwbwF0AsTuWVpV6OX\nr/yr\r\n=przt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4c409a18f3ef0a7ee6f9b223a514471c0515b639","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/rtl":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/shape":"13.0.0-canary.72464476c.0","@material/theme":"13.0.0-canary.72464476c.0","@material/button":"13.0.0-canary.72464476c.0","@material/ripple":"13.0.0-canary.72464476c.0","@material/tokens":"13.0.0-canary.72464476c.0","@material/elevation":"13.0.0-canary.72464476c.0","@material/typography":"13.0.0-canary.72464476c.0","@material/feature-targeting":"13.0.0-canary.72464476c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.72464476c.0_1631028946588_0.3238622215500695","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/banner","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.37d4db866.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba08c7c967ade33de7c473aee3406e5f32af01a0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.37d4db866.0.tgz","fileCount":40,"integrity":"sha512-SXUxu1EEx6/GkAuv113xUeEQCj3jkJfCmoMgL+js0wXaz2gp8eixFOuHrLaOtrQ6Z9vl+HIyRH09246AJpJdxw==","signatures":[{"sig":"MEUCIQCSEnm4xdp/ATVVfr99nZI8UXcgQLY7NVGUxIKhBzRwVgIgdImsfgJru1fiyaKpe4E9F3INosjebdmg9SRyZLOLSNE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhuXCRA9TVsSAnZWagAAKZsQAJYJKcGAHvBTMc18l5Vw\nLUzbzDRYMyDo8sprRWtqPj7RIp/dC/XzXDruNgYJsqcrduGc0Zfi7NhJ7pdR\n4sE+sYBOqForW2IAVLO/LGoD1Y2iNDhEKFUarFTuuJkHQu+keTKVUXVDLCe7\n93axC1uAANspU2zP/5iUV2TIBsEqVYg8+iJLKCd99s5MRuM73cxE45oF024l\n84KmD6gdkGru08pNrhyAvtsUmokxC2SmYanF9wXhXRg4r1kO38F4EFwyVrlT\nZmf2PWhiv2090UY5g8/B0SI68cnejwST5CfjhObtSZX3DSNNCLXyZnUTDak1\n1ULA0NZB4nquK2Flfv1t2+8KHHURYkzdE7zG9kDd/t03WZn8Mn+zP9Lbob4+\nhnKESSGRyDNkajbVp4vwCsDNHysLU33pOLRE1q7CPT5hw/mL4XnSNAuXNrIJ\n7Us5qhUD4HR16cvlHYxtVref8RBqF1NXak4XEyl8n95CD1wG6fbkQ9X48rE/\nAsgtRuAkWitmmTMsjqCguIOTE4vH9broE+1zPoQy4ZdRlpePaX7n7EcUppJD\nz+vvUPqYDYC1q9v7JUMLwG0To+1NBRlm9MHJTMZ8Nf3/nQuUaaT+yC1yk64l\nd1MR3ngYUzKol16MZDJenaEuACFdOXtxQ4dWRi6XjaaVPlzuekpzEMpO2QU8\nb7SW\r\n=iIib\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"25270b452713f831fa1adf302fa3f2c357ba759a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/rtl":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/shape":"13.0.0-canary.37d4db866.0","@material/theme":"13.0.0-canary.37d4db866.0","@material/button":"13.0.0-canary.37d4db866.0","@material/ripple":"13.0.0-canary.37d4db866.0","@material/tokens":"13.0.0-canary.37d4db866.0","@material/elevation":"13.0.0-canary.37d4db866.0","@material/typography":"13.0.0-canary.37d4db866.0","@material/feature-targeting":"13.0.0-canary.37d4db866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.37d4db866.0_1631198102974_0.558572988880566","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/banner","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.6df682e74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea3ecea3bb2608acde2ace941419a5c8b345553b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.6df682e74.0.tgz","fileCount":40,"integrity":"sha512-tQmkuN9tCI3XYPU1yGEmtbLHdgPCT+O6W3651qwqzW4mDSkwgu40/C96pkSoYqy7vGMkcfQwh04UY7Fp4grdmw==","signatures":[{"sig":"MEUCIQCDgClmE3rKFjAn4W0ooXqEfThw73lHgDpNVoQ7oTA3dgIgbYIxM3m1TMPSRMGy1Gc0HU5pWsh+JIGsvEwSvASEYzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivtCRA9TVsSAnZWagAAtgIQAJsKbY3gtqizlTcF6f8y\nLHKJfYxeh4KYeqZm3NODBsIo//knAav40g+r0omQk5klk7rQ1fmrofUt3YS5\ng8nx6er/eMdWlJJcmlFqE/pKhcddHWW3veSWRYzLkaqRJT9Q2uKQAkoiPEq1\nZTxidayReih2L8HHYTi5/tKkYk9OZpzK3SxHfs6KI7Hc5cuiZxn3TZt+NbMV\nMfJ3JDIKFdEERK6zNBo2fmEOZof8HN+V/rovWA1lxSI8PAlfwfIz5ZNBs9P+\ngFEjpSVquyl2GJ3gD0EGcBeqtQP7TJ33FDTFHlzF7sOfbaNxfPiF6bJcNgnB\nJXsI1Z8hd52mOCv8b49bbPLDeN0N9bLGRGgzl8Dfk9VsSXj7r8g9ypL5sBJN\n1NTKCo1IR2CE0nPqBC0fvDx3kZBi/cFpPssiAA7ClnwxFZPL8Lhgk8TKFNdx\n2PwBJZUaiE8UjQvWVsCCQEY7QhC4Uc2+7kSKQlNn9j6/f+yYmEaRnmNqoi2n\ngBrTRGTsl+OnjZBAVM4ZrI4j/m4qG2kEqCWSJ3Fx1YC8jNMWy9E4D9d294Fw\nfolgy69yBpVl3pDKSCe1VMESfZmzax2Qi5rdDrwU/jXibmb45dweEym5yQ8+\nVIPCgXFlPc13pouGRPEk/bWb9qY82GjuKPzcxBmG/LG6MlbFaVTWDviVGbLM\nzcUf\r\n=8vX2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f8640926b088e6e6fd8688e2bf177fbb60e83f2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/rtl":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/shape":"13.0.0-canary.6df682e74.0","@material/theme":"13.0.0-canary.6df682e74.0","@material/button":"13.0.0-canary.6df682e74.0","@material/ripple":"13.0.0-canary.6df682e74.0","@material/tokens":"13.0.0-canary.6df682e74.0","@material/elevation":"13.0.0-canary.6df682e74.0","@material/typography":"13.0.0-canary.6df682e74.0","@material/feature-targeting":"13.0.0-canary.6df682e74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.6df682e74.0_1631202285050_0.24190487069880273","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/banner","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.b49359c35.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9e5c9d0c83cac38531335dea28f2ab1ea5eee50","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.b49359c35.0.tgz","fileCount":40,"integrity":"sha512-noPsBGe3Hv2o84Uaz3cQAN/tDCnB43NkbSVC06XDV5wjUuoSXY9NwpAtpn88ZMrkdciWGb2IhZ5ikdLTNCqLSg==","signatures":[{"sig":"MEQCID/jUqY4z6buCaYNpjlA7mV8xZLbfGzEXCyvjNSIQKIyAiBoaueNMgRZwHEeMuBhIVUhfaXZa1nqErO6dj8cvneLQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkZMCRA9TVsSAnZWagAALxkP/iIkuKBA5q1bm1DVNby1\nvHtkm2vSadv+cegkfOzqW8JcYclcVg4I2WV+ddlWYLGFBogUrE8fMt17aDZi\nSmmBr+AZjW5+ux/6E52jk4l2CG2AQw5ljHgdZBGpJEn/9b+YFMFn5i7uIKz0\n+t6ulcAQWa3POTuY7KFlEhl1tDksLEiB2BJLfy7AWBUyVj6/WKIcOExl6tq1\n0i7xgM56m805az5SY3jIe+oQDM6NjIotC1/+sFtlpws6dKKVGAQnSYumh+C0\nJsgRk4sofjcxOXSh+kO+M1RLe7lSHwShbmdWcso2R6AZEA86Qw0e3RRKbh/w\ngK88Y6QFfDfSx8097CZWcO+is/vKRG+T3iwbQm0z1hjMIwlF4WPSb7m7H+le\nM4LhUDSZLGQcl/UpunRQuAo6ZweCQ0mFu+IAr3Td1qb/BQlFY/dvzZR5wtTF\nEcrgzRRqlZGcbXnem42ETs6g8GjgvY6PR9BCGM/j+nBdlunromvfbXJnF0uQ\nU2rbgpkgv+yfgrtu0ZxbesER9eQmw/jSkj15WPUJ8sfNllR7Lmm5rALhaJpM\nmQrXnINXZFKz7g1WLJmK+yPMX1G+HQOnRAntYYLEpp/19/C4XiHWrk9U5wxW\nxAhP79nFS2R3P7lfKoPl3EtTIFT5a85Gs+NTyDJJcYZtELPFc9Q+phvSfgQy\nwhcY\r\n=fz00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"817b18da85c93007b9b038927a1ae036f98f686e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/rtl":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/shape":"13.0.0-canary.b49359c35.0","@material/theme":"13.0.0-canary.b49359c35.0","@material/button":"13.0.0-canary.b49359c35.0","@material/ripple":"13.0.0-canary.b49359c35.0","@material/tokens":"13.0.0-canary.b49359c35.0","@material/elevation":"13.0.0-canary.b49359c35.0","@material/typography":"13.0.0-canary.b49359c35.0","@material/feature-targeting":"13.0.0-canary.b49359c35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.b49359c35.0_1631209035862_0.8713661793436442","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/banner","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.470bd34e8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5342941844cb79eb177fa9bc763499306e71c0ad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.470bd34e8.0.tgz","fileCount":40,"integrity":"sha512-F5nR16jHgS2JlCO8q7ZVjJ+Q1kUmtYXyIkMH9A7S4bEbQmLfjHK2nLCY4jbnaM/IVbYWymt8tYAwe0ZTv2rKjw==","signatures":[{"sig":"MEYCIQD4Q55N6XbtaERuyYbKlQeOGYmYHBWJu49TXMD1bei0/wIhAPqRrmCJNdqUVFj7kGjN0bDaE1ewUy0PUCJt6JNko5wU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":492460,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkxOCRA9TVsSAnZWagAATa0P/iVzpj0k3jLnkIz8YdlF\nNS+i94GG7Zj7W+e3yHuCEeZZSeWgCSroWRzkxSvDRQxQ+b4c28aYEURpFAGg\nipd/3ODqJQ/apKdFxaXk3k6LrwLVDZq4FSgUx13Xxsf/v//R5Qbdp89UkdwJ\nOut/1L4ccQIDxoxjqXDmS4Ydsb7Jy9y+oHyRvCOPfs2pKSzHtRC2IYUnaaEB\n2VpD0BlgICpW6Axbri689VhqDyjvSB6WNZXLXzmFqHzzdFF2fgzcddoI6avz\nbS2fFZ2PCjC4JVh1JvK0GWDa8Snly6NnypYm+M1LDcjpcqcYW4KjDvEUWnpp\nWx7W6CKMb4qRXj60kfYT9RsKOvtLRi5ivfMPU9C0P9GFIvGbuWj7gLJpqJGe\nndZThnLsA0DB5xuNdljZ1b/ksFrM85g0vNpr5YlSE4cBRq0iy+HE6zsf4JuG\n7P6oY7dya8grpS+GKDRu4CsJpLKnda6o0M/96edfOGtlyR8mI7wK7ryyGbH4\ncZWyc07c1H4w4crbl0ZtVhw4KktlZvP6TMnKw/MwHGfoFGhtcjbFM/7dziu7\nhCVOex/mbCh2HkiXleWYc1hBk1t3z4rSWej0bYFj1CSAixSqvlYQrDvxrjya\nuA/U4utO/bXFFgUFKb5TAqu+7fyTAllmGKDrbACuoW9NuuZe5bjWIoVEjSkJ\nJAq4\r\n=1dWQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f249b00e3cc067fbfdf722d71dd85392d031ca0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/rtl":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/shape":"13.0.0-canary.470bd34e8.0","@material/theme":"13.0.0-canary.470bd34e8.0","@material/button":"13.0.0-canary.470bd34e8.0","@material/ripple":"13.0.0-canary.470bd34e8.0","@material/tokens":"13.0.0-canary.470bd34e8.0","@material/elevation":"13.0.0-canary.470bd34e8.0","@material/typography":"13.0.0-canary.470bd34e8.0","@material/feature-targeting":"13.0.0-canary.470bd34e8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.470bd34e8.0_1631210574387_0.9317469353575847","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/banner","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.d48a01771.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb92608fead0240cfce0ff964b98cc0d613b5e5a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.d48a01771.0.tgz","fileCount":31,"integrity":"sha512-gWxsvAcTMgzRmrYP9vpQHLdN/FeS4HV27nYoU9/hY8Abo03CQlSrLxp00eoaTXSAKCt/VsIjuE6LwOtFrq+r0Q==","signatures":[{"sig":"MEUCIDns2bjCphw174SHR3AAus1be9Om8Vph+8uOGtQ0vGXXAiEAnbV6p5qXlkln7s5MQ4apd9UpM1HiynOcTS2SZz01/lk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5tCRA9TVsSAnZWagAAN+sP/A4Ujs+dsRt26nmgkifc\nLjrKqSEX+7lIxfwflPG8Yz68xzF86/TYZuc1IktJGkMbONHb49MWtye85wfN\nBM7JqK2YP0b5dx4d9ore26LOcXTh54pTnh1tSAvuDe2tQEcvkfKOLNaWHBDp\neB2sAOz+KvHUil+NtKFoAZ5dGD5/pmzHuXyuzqfY6e7UphFeY/8TdpaTPJry\nRb6rxg/xIaMKG6vW0OtVRClE6NCIg7S64fvxhgcWDOv6Aq7dMS5AIPClcgKe\nHKKGLDENrgjx/4wmTzsgQkUFGO9uAwnBG/HqHZ2tUK5y7L7MGnbH/9LuY0lr\np+SDbzVhuBiE5GmTBQVeVmbylwXTepFNIk+sHCe1Xuhsut3jnzq9xlLNLbuF\n5oFvawURnDKZeK3PuCLEg4CFVCiEx8n+CN6nx0FNWgglcadIuO+Bd5vuXRJq\n7VOpudN2OODvM5a3H9JmRJPxdG33rLRkJVoHMk9Ylvj4jYLOVrx55+Zf4WAv\nb0MqcZ9nGTb8YDvB8V2Y1ovdD/uzD+bkQc+k6F/7Lyl3mWApwyJ/abKw22+S\n/66zJ/fNNuONC4iXUK3S3tpgu/UcMtsg069SZIuAUFBgNh8KV80l3YNUAUpi\nDQU8RN3hNAjQkJIIpRAy+fmAgg4aVljUq5S83eY3r9/HpuM4XyhFJspWkRNY\n1HpK\r\n=s/4t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6796441e86b583e99919b207640bd02efef6fdeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/rtl":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/shape":"13.0.0-canary.d48a01771.0","@material/theme":"13.0.0-canary.d48a01771.0","@material/button":"13.0.0-canary.d48a01771.0","@material/ripple":"13.0.0-canary.d48a01771.0","@material/tokens":"13.0.0-canary.d48a01771.0","@material/elevation":"13.0.0-canary.d48a01771.0","@material/typography":"13.0.0-canary.d48a01771.0","@material/feature-targeting":"13.0.0-canary.d48a01771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.d48a01771.0_1631211117507_0.9924831451136362","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/banner","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.13db34b34.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6cf931f100ca912fba313d59c419727ca86be16","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.13db34b34.0.tgz","fileCount":31,"integrity":"sha512-LEvhpvbJeHnrxmi700rnf7BX6Ky734+zQm9WgQ2+sNjM95zxv99h7jt1V4BWOV4dg+Z3HKtcHBiAS82KwnCfsw==","signatures":[{"sig":"MEQCIFZfzN7JC7uy6qx/GVF9g4q6deuRc8j1RWg84N0inMEtAiBoqcUu/4iUi56pYVpLqr76mNPiwUphPeUqdAP/GKLgQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHxCRA9TVsSAnZWagAACIgP/1Mo8ZRRClvlx1kOdQjJ\nXS0ML/lzqeEaGikNUXrREz5DST6P4JOw8jLGUJXxrAF6B+9A6dH7AL+bJW6R\nD9jkcIWWdb0ejHZE2DYK9j3lXW0qMWUaG1hy0Xi92xppDx0wJN9POOqvQRdF\niwuL6qfXbDkKJMiN5OLIoYMP4GVLyxtAUIbye476T6HVi1v2SjoIq6+bP+QP\npkPG3wpUOykU9sfMBKNNnkrZB97m3b38sXxufvf9M//DkK4OLXlq0BT9HHQx\nVsu/b1g7Kl3BLMfk7lagqA1tvw7uiJsvoRr+3Vj68MsvGGFuU/LJyqzB6aQk\nh+d5NDsBnuJgjsiGr6C7689anQIf3xpqUt6pruy7yGqZ6p7diw2hZNoEVUMK\nDib8NCkCidV5TPnBXhnJGgJp07K9gnXymwz+TGKcQAqM4NOmpVKqNFifYNm5\nQkqZVR4h0CsXJSu2et/I4ZNdm16Kg73O8fKkKldy9ThC1iS3jQeWbGBJ68rn\neGeh/n1hsAhy5qR3Qm3PwoVTbXJTtvDcfDKnYHXC3SqfVzDWiO1IMN83f8l9\nKRML9c+hJA7e9BRl7VorwevWhm1CVviekAPwdpZmpM8WmGfKqkvgn4nO+Nw2\nvRXjh1r/eUvd4cybBKTTBD+mMMUfiShMDKY7Xnq3l6T3tIVajHimjYS0rkSd\nDtbc\r\n=3tdS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7883b32c9c6a3280e801925b874df667e1055809","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/rtl":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/shape":"13.0.0-canary.13db34b34.0","@material/theme":"13.0.0-canary.13db34b34.0","@material/button":"13.0.0-canary.13db34b34.0","@material/ripple":"13.0.0-canary.13db34b34.0","@material/tokens":"13.0.0-canary.13db34b34.0","@material/elevation":"13.0.0-canary.13db34b34.0","@material/typography":"13.0.0-canary.13db34b34.0","@material/feature-targeting":"13.0.0-canary.13db34b34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.13db34b34.0_1631212017461_0.03326798621836824","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/banner","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.864798678.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"69bf518f214c8479be01f1c3d68996918bf961bb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.864798678.0.tgz","fileCount":31,"integrity":"sha512-uMP5NA8qboQaSHR3bPptyataXOVyvduFngpHny+/kLUphmZtlW6g+8hGJ5XRupggBzhP9X+pyg/udQ27SzrCAw==","signatures":[{"sig":"MEUCIFrG6CaDsjN3mDPOpYSzqwL+LilsbyEcWHsluaqpCwHHAiEArs+W36/+A1nIm5VBUoCI6f+w2psTAya4xna0Rl7ZpJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSrCRA9TVsSAnZWagAAVKUQAIBehggSNNjJSZcXswnm\ncsgI0LyV1bOIIPwtfOUmYAHRftzEF6hgiKzseITXwbOPurkUXWulTVqNH++K\nHRD0eFsPHGZwO2CXhDskVY5m04xJ9UPsmDekcAim+PAsdU11xqD9/f9U+82N\nl8+WH8JQdThGExNrq2z+efDT8dNMS86Inwog0orMCAMSR//qPqnQgdAsXMWu\nrdxgd0Oo4ReUPX/dvVScr5rmZP6abcXavxgFCozIcnzWptQyouVaqAiYrUtA\nep1kUkWGlpNRGrHwsqtqy/r7O8/SqGdz8h3dakvJnlbCjvRKU3giTFKEaJCJ\n/z62ddGpo4ZhkAF02gnRRtXT5iRGnpW/1em9vLRAejqH2FVmvuePZfe0PoJy\nd9TZKh+6jJjF7VbrYsmC3081iZjHLpywf5k3wbtTQGMZ+aHAbZTi9I+0w4aL\n310JSTXGGHTDu+ApWkxwBWuNmhIyahhOPIrCMclCe+g+At/bqCAZ/N3dZ4uh\nqbqzf1SAVRgI0c84POu1x8mRWHY2u7x34zv2u4VDaEjrVoCTSENHXlcxhcBF\nSoLVQS25YY1mEFS+ncjwLx4vGk4R/O26YqmzcAkVyVyWTCvwpV3sytdIrwj5\nYDsL0XgFJ/raYRMlGB/QAPvY7+vDP34A6sJTiagxjGrVHZchB7GXet5lboSd\nW/Bn\r\n=BtO4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"08d2ae683a56b5e86f7a54eaf5a2090fd4288df1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/rtl":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/shape":"13.0.0-canary.864798678.0","@material/theme":"13.0.0-canary.864798678.0","@material/button":"13.0.0-canary.864798678.0","@material/ripple":"13.0.0-canary.864798678.0","@material/tokens":"13.0.0-canary.864798678.0","@material/elevation":"13.0.0-canary.864798678.0","@material/typography":"13.0.0-canary.864798678.0","@material/feature-targeting":"13.0.0-canary.864798678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.864798678.0_1631212715120_0.9714524612187752","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/banner","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.d04bda3fb.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fddce2cc16cd9f88a67218fc1b8666ce97b67058","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.d04bda3fb.0.tgz","fileCount":31,"integrity":"sha512-HL18VAzO3BqHfH0o7h+l5+d4phhYgxwYtHwpq3A4ebiSpMg3zUtnqv/lGFluSq8C3rZap38cWdcJ6REbnAsl7Q==","signatures":[{"sig":"MEUCIQCXzPLhz0oZP2Z3/qZb4WLlrmDmqlsm16U1MlCHhV7rpgIgKbw4T8pbDXGnH33b2c1Byxzq7upjk7gxBamyC5TzUKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":452958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hrCRA9TVsSAnZWagAAjZ4QAIOE4crBDcAIXta0So7S\nhj3SfRGjCPJ/JOvdrlljDPxmBYA0GYbTpWMvJTnGUoPc/nkqBSwOVXrqwUDu\nfPV2PwYCCHFNaujV/OYXr53HNJUhW631Rxd1ZTMNYXrhdOjnUB2ttn8vk7c0\n6uGzAWK48nX7yFE/+epIcrM8vWyXFG2M2nHUsP8oe5ujxzRNiZD0P2sP7VbL\npT+AzvPUFxQU+wSgo4n7BY4rhjXOMrw8WuhSuBXsK3V3fI1TJoKF8Mo/aG2N\nnbZOT3lH1tjc+Z1fH3Hvyop1cl+Oc/riZbaHSNiEyJJ3I319kMDLlAV9ZocO\nlVwpfJU/g3nRIz7jV9oz/A+g9rnfpnSgwtjD0CueLwlxQfw3JCveuookUvX5\n0w5eJdODPCfvw6bTO7YuG1mgoyJo8joNBQxzFZ+pjFETCLzrT9D4FGEMBAbo\nhNH7FRPr8Nmp5uYbdhlZNhfxF/+wWn4Ypar57PdfjqNAwTtsENwFmjTENpMu\nxBMU3qkPSPSarACGJNkbybUx0mrJNVlNko8L+GnnmRKJPSwSp6QRGd7/C54q\nXPkCiwaomr1vtyUDdoCLb5NjuvhQ0wWzUrnj/0FSLympHdEh5giKSdbvmOT5\nHnBD3b3ILIVMt7lJgqeSW7prBpzVdtMsuHSnDSJ8Y9BZFlAWbv6eNn4N42wJ\nutQt\r\n=6fRz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7dcba6a47b77f0011a1f0e22b3540e2a70b285cd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/rtl":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/shape":"13.0.0-canary.d04bda3fb.0","@material/theme":"13.0.0-canary.d04bda3fb.0","@material/button":"13.0.0-canary.d04bda3fb.0","@material/ripple":"13.0.0-canary.d04bda3fb.0","@material/tokens":"13.0.0-canary.d04bda3fb.0","@material/elevation":"13.0.0-canary.d04bda3fb.0","@material/typography":"13.0.0-canary.d04bda3fb.0","@material/feature-targeting":"13.0.0-canary.d04bda3fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.d04bda3fb.0_1631287402990_0.21589580757080862","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/banner","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.5533f73d3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5cde8db6a991307a002aac11a9660ae20412e1c0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.5533f73d3.0.tgz","fileCount":31,"integrity":"sha512-e6k6w3pEe/sUW6m99QnKZx1kginRG4rEKZzwHoJF1jtq1cJLwL8BLwl7rZrg0MGd1FpcPYBWCP9kpOeqLuAjwQ==","signatures":[{"sig":"MEQCIDpEA2P72RRUZ8HPlosfAd/SD2zXXbIaC7knfj0wq7BfAiAgTjuMzHoxRKOpnMBasmLHX8D4cnITBZ55APcymeJxGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":454969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kwCRA9TVsSAnZWagAA0nwP/jPX+vMAlg+pTAPf0tLI\nrKVNmdTiKLztQfarcCwOrmrdAbj+nYTqpSFPvZN7UXv3D4vjpzPJe5HF7ws1\n9h7u04MfMZhRoutFO6ixB46ocn9jz1RryADN3OUG40UN15dIFdXAJEHW+x3o\ncDqI1L0fRgmCaPZRMZEWYDk/+aAARW2n6zH8DHc1q7Mk775/jeKeyNAJaIrh\nDGJBBDz7ciR3lssWjH7ZN7e74HD4WuZFBM6Eip/e2ohcqhnVllfB9zW3Vk+p\n4OXCX5e0D01FTFutAYJ0A+aUwNrC3QWo6HpLwuu8bpbdIzwMABilA/eX4xwA\nWmXf8AwuPyVuLRTnpNEBM17kRSFHLyauYqCsJNuVnsIDrrfuRBvfHgL9qn42\nHCkXDHY6iFRjdn0iRM2zW+Nqb9bJD4ds5EzpbhpV+SOojIjkFin0UK8HCFzJ\nrwCrMCiFKUuaEXlG/FwTfGXoM3kVCNWbZn4uXYTKWHX7ZutYg9SHY/pAGiG3\nmQkG3Et06z0ftT2TXcOqV7Ch+PGzloJJiiiUVLJbSUqK0+cthnDxgobOF8uL\nsMeozPeqv5DPbgk3hDQvO9M7lRkC8dbhXjg5VdyNW1cEiUddSo78wEPpT6gD\n289wQRIyO+gGIgVXDF+WhWSKl8u5dxn3MFBIAjLVLya9uMjB6MjU3LpQS5NA\nKUjk\r\n=19OB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"20bf1d151f241eb77dfa3233eb61f4e35d5b2838","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/rtl":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/shape":"13.0.0-canary.5533f73d3.0","@material/theme":"13.0.0-canary.5533f73d3.0","@material/button":"13.0.0-canary.5533f73d3.0","@material/ripple":"13.0.0-canary.5533f73d3.0","@material/tokens":"13.0.0-canary.5533f73d3.0","@material/elevation":"13.0.0-canary.5533f73d3.0","@material/typography":"13.0.0-canary.5533f73d3.0","@material/feature-targeting":"13.0.0-canary.5533f73d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.5533f73d3.0_1631574320658_0.04620224217522573","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/banner","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.08398f880.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e7a8b009cd7226faab7557197cd14bb77dd1f34","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.08398f880.0.tgz","fileCount":31,"integrity":"sha512-tAfNCzltdnngD5YJVfMD4a9A8bB6JDPrTqIAnCQJUCDZw+pDcys1mz9pjRTTs/4xJFWHqD5pbRw4u4G2qqEj4w==","signatures":[{"sig":"MEQCIGzZKrkcs7mONIgKLS9Xg5fWNetqidxrO0ZzhW1HcXaZAiBNgLXsvqoR2+YJcelJZHuB02fRDHLiS7cm9xMrqyiq8A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":454969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BUCRA9TVsSAnZWagAAegcP/2A7u2WV+N8Q8BxMJ8/M\n3lLZF7rtUaj92zmSn7l8JlnG5UhchoCCAcG5KXi+CuArUTF4eGUAsU4SFOrI\n7XHqv1Wba3tSZq07scFmasRBkab5dK2pWLQHnkha6bnFlQzaCDA5wAoTVzSO\nS1XW1Rm2D3B59T1g9wWpDn5/Tmj8dvnPJ3Axd189ivefKZ/5elz/hlln4cbD\nLTwu+wWg+p90kIGjgEjbVCH6WOcleabQLZ+FVBiAEJJkmxjPq4KOaOoYj16y\n179L2GePdyDLWGyiS5pDOT9zF4RWlJDkcZRzdj2dldCpnHX7cP7BGfPg6pAU\nga3PiCgT+b0oGk4geS+2000E7R5lAUEvpQN8yGvOke0wo4vXkYC0DlgJ9ZDh\nR5PxxX8I8K9TDAjxtlx3NbXVy80NvGjjwsvbkHFkqwXSHmdIks/0BJy2wESA\n2FROoMMt7w6DyU28PfsPCl+VZ/3sPv9byrgOFkt923I3RuH+as3gGpSeimsA\nX9al4rLNGvFduyJkLAVA8r6ErbUyv4lj0c5692+mRDRMkTGa9n3HDmR2GyTI\ns0oPAA2s3CzT7CiPVWnJWfnGQutOPcxIXT9hb+uRz20Ltd0xGw8rjw+wm3n3\n8hXuCNF0QWpnBbNEzATMk6sqsrFnEYVEhUTnxp/F4kFpUGswumExrRilWbGt\nEyDd\r\n=16ZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1a993a7d6bd4a018cc4ae230bf1cc3fecfc16d1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/rtl":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/shape":"13.0.0-canary.08398f880.0","@material/theme":"13.0.0-canary.08398f880.0","@material/button":"13.0.0-canary.08398f880.0","@material/ripple":"13.0.0-canary.08398f880.0","@material/tokens":"13.0.0-canary.08398f880.0","@material/elevation":"13.0.0-canary.08398f880.0","@material/typography":"13.0.0-canary.08398f880.0","@material/feature-targeting":"13.0.0-canary.08398f880.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.08398f880.0_1631576148646_0.9780511385866646","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/banner","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.818f4ee93.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c558cd134f67ecd0fa9f7b6c19b1e24d77e27954","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.818f4ee93.0.tgz","fileCount":31,"integrity":"sha512-T1Gub/Od7HzQSyDGxucWomPW7dEzP8WpXcCtY2pAQmFqS7NwTkYTTV1KSh4klmaPdiw3Wq5l4dHyJCpLVYlsHg==","signatures":[{"sig":"MEUCIQCvMJaaf5wFWpqwMrefx6aE1MfzJxGkDkfP3+i9eGASCwIgUAl9LqT+CQZ2uOJR2vdFVz6P6/oAWOB91deeq67x0Ts=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":454969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjK2CRA9TVsSAnZWagAAzS4P/1gMpSbl72k7cqFeNT61\n5w9NerioqBWqvrLu8uyFD1XBamsTH2912/xQ0EacUtcjlwb0KROlUiQOWCkZ\npPeWch6mT7aE391BPpxIM6FX9t0UxoHBUYsfQ04mGoGumiJvBaerckHT58CH\nq9rrcCx1x2PMhun+unP0dxStb8lbq1e+fwIauw+zlSBZtW7MirazfmEKUHZl\nPqTbDY2CPQEC6Ws/t2AQy/gpm/kWVx4P6jq+c/ftJWkIBzy9IleFUCTUJY/+\nL+SjgmhzlzXQPNc4PIVd2H9S04xktwL0I2xOPLISALQbHKKMYHJVW+fKEEWn\nIKf6LrvY3LixFyAkX1nb39uIC4Awli7bhJuUMPg4zAeHjcNUR9STyMQhHr8J\nIwDk8Em+sf/yFtHrji53XjBP9iK/a57KiTYmrAWrgBo6thCIJMu7/PP/FtmZ\nn1vmDO9GvTAMP3onNNUSqndw8UilxGbSsce1eNRgQp+Fm+1FG4wDwlG9x/Gi\no4e/LTB1AC2VqTg8TGPiIYLMoC3o/QIoe7aPcYe/OX/YIZjubVKN6M18VHwh\n69F3/mey8HfsQMmzSsqsfPLeswnjKR9ezKFFBua/HZP2t9MXQBnzLKIj25Ld\n3gkjyjN6iipCpukFSpBzOrB2u6tOiOQ1EbYSwkviRbt09s0potwLlULA20GO\nYYin\r\n=3UPw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d88a726d331a878c9a8721e3237e8cf6df49f1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/rtl":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/shape":"13.0.0-canary.818f4ee93.0","@material/theme":"13.0.0-canary.818f4ee93.0","@material/button":"13.0.0-canary.818f4ee93.0","@material/ripple":"13.0.0-canary.818f4ee93.0","@material/tokens":"13.0.0-canary.818f4ee93.0","@material/elevation":"13.0.0-canary.818f4ee93.0","@material/typography":"13.0.0-canary.818f4ee93.0","@material/feature-targeting":"13.0.0-canary.818f4ee93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.818f4ee93.0_1631728310469_0.7321943409796601","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/banner","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.8355e14dc.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d7d99ab37c2cd331349909cccacf55f10aeb1bb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.8355e14dc.0.tgz","fileCount":31,"integrity":"sha512-c256E/Xx/KhtnPziwJzp+rC9EC/jfdTsxYzagp0Na+VFi72wO0lkTaoPrBKe6ysSOee8oHP+Smk3g697RiPbEg==","signatures":[{"sig":"MEYCIQChDbt2H7NBGIola7q8zRzHnnho26FOiADkyp0AuJRtagIhAJ4HwOM7XE7ehwcSqED+PKbQFOpzUtly8nkLTqrt3Guj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":454969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXvCRA9TVsSAnZWagAApn4P/11q0r8pjOCATZCdckuK\n6+6Y3nYshqDJEmIoii4FxI8dIkoLMpYsbM6CdKTZ623WnzQ2cuPuhHqVLE05\nsV/rPIb+NMQxOV5mnU+RZ9s9aOTuJKk5qv4nveoUviqKu5wDOlb8WWIVCth1\n6YSqbLSRUvxRxAeiwuuATfYuCRMF/yclfOncTx1/+2mjtyzQUM3o/iG1464/\nma6A/o63vh461hX5eNdMF5p6wc9p7qpylELKmnqqxk6/TvZ80fWEy66h/GCh\n2OClyJ8kNaP6X8ounVUIZ2zIvr4pTCtUcmjT7moBEe5a1M5ZS5JgeNEehlWn\n15aSSgkluYNxkN4ZPDhYWwrx9GsHgKYDx93yhP91V9i2rtkKU+V2zQqm0E/h\nQoJiZhxDeoPjEgi8PuoFZbhXpLlRgWod1ONJRJh/6yebzDg+2zvGT7ThyYfG\nLpZwzGlbwwae5iJPxhZRJaePM/u4UVNoegmmQexHrizj03M8omU95zA2ES53\nyE9Yl3+5MzEIng7IXSeqxK4vqAlHAAWAuJ7ObGIvlvgxIlawqXb3aMtncuws\nYpJ0jJRqHY/uvMWXdBqjc/fj55YB0L6cbhkp3XCffp8uEwVP2Jhxd2PBF1yj\ns0HSIlGb1aDMKpYYnX9i5UlokUimBtB9GZlcIO0zq267Hm70cEV5V4/5hhr6\nqnGV\r\n=0ZP+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"065f64e5cbd54d86f092d8d1406bbd0852b2a6a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/rtl":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/shape":"13.0.0-canary.8355e14dc.0","@material/theme":"13.0.0-canary.8355e14dc.0","@material/button":"13.0.0-canary.8355e14dc.0","@material/ripple":"13.0.0-canary.8355e14dc.0","@material/tokens":"13.0.0-canary.8355e14dc.0","@material/elevation":"13.0.0-canary.8355e14dc.0","@material/typography":"13.0.0-canary.8355e14dc.0","@material/feature-targeting":"13.0.0-canary.8355e14dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.8355e14dc.0_1631733231041_0.5213517434968298","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/banner","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.d4e16a6c4.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22563a1fb4bc53df823026e0a28888c0bf4cafdf","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":31,"integrity":"sha512-r88ajbVDYIdiVcOB/GYvmv9PO2v2+Tzw9xBLH4XyKJbbj3Q0tT0vqcnv88SUR+FwsjJSzH1qsR89Gr61rIbjgg==","signatures":[{"sig":"MEUCIQDTBMB8h0n2elJJepfGl7BndqRy5MkOgFOO79ToCY+qOgIgCwNWHk9kZxJ+++V5HGTqHbq5AIpyrP0QpO8JZC0Qxpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQm0JCRA9TVsSAnZWagAALL4P/04itI/m//fxMznHJx3/\nb7tSReshQNgtrlQDgvZKETV6QzQE8OcRQd7zPbPWEoVrgtBQs+K+wvzErbxz\n9jHuZDJVGM2lVUiAxRrceQ9bKzneTFZcBB9aTs97Rr2jhPip+MPJ44gtUNLD\nH0aUCxLRzwNCFBLtG6/zLFG2mXIjBNJeE5OYRsGYhgtZvc8bDZPwX9nZ0I0C\nj4JaYEsuleuSJzr1WMzO8kcUgJgNDcnPpYo/GpS3wHpPcTT2f4w8e7WWdJXK\nqFVDCzRLr4mwJmO/cea2QnGT6MiEGoRlFirxiXvfpmsVjOU3XEBLA+2Hpg+z\nb9XB+ecPBvyziqknGjHBQVfaz0rTASJc2wWuZBRdNl+s0iqVV/HDZAXfs1dv\n4MJ4U4kIBm0U/yoKRPWIk9R++TiXSt3b6vENLiQIeqvtyCVPbsInArLI+O/a\nCvm1p4B9Yu2eavMoyzSbGPRz4PgkYAo0vbHq4dcwo6UbFPhMlAU9xMLJFep3\n8/dwTCQlBtmwKBtYGK7Cq3iodOVe7qOZ2MiP5iwkfVK0upJiNXeBlV4Beqlq\nN+L965otlj2AwwHfvkBQDv73OC0JHoG9JGMIsc+ndj7UQJzdGVdrKOzOwpjY\ntn2W8nsbmMoRC3J1P4nu6Z/QYxKVY9hKzAsRysfUVIpyiSvRyq39eXklUjf4\nmVFO\r\n=/JyO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2c2d0c3f7c18e3a2b581679df71df5e7a0e2fcb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/rtl":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/shape":"13.0.0-canary.d4e16a6c4.0","@material/theme":"13.0.0-canary.d4e16a6c4.0","@material/button":"13.0.0-canary.d4e16a6c4.0","@material/ripple":"13.0.0-canary.d4e16a6c4.0","@material/tokens":"13.0.0-canary.d4e16a6c4.0","@material/elevation":"13.0.0-canary.d4e16a6c4.0","@material/typography":"13.0.0-canary.d4e16a6c4.0","@material/feature-targeting":"13.0.0-canary.d4e16a6c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.d4e16a6c4.0_1631743241388_0.9318950459861111","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/banner","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.65125b3a6.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f840cef00a4fd3e276caf1f0b086ff0d138a316","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.65125b3a6.0.tgz","fileCount":31,"integrity":"sha512-wTbuImOd0bwxlNHh74gMV4SGEseDwwVy18qZfiBBBFjoAM0w1Ndhju5sa+0TdtnUnDhAV4O9/PFQFVWF40rM8g==","signatures":[{"sig":"MEUCIQCo+6nb24MN5FXhYuZZOBvG8447QkZgwYTzG+QDHhvybwIgCQrgSWk7DFmFpz+oqPc+C5Gs8Cp0Wp7Qdi0PXyLn6kU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456067,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7TFCRA9TVsSAnZWagAApYIP/RqS2VrecRYo56s568pw\n6+AyF+GnF/hWFpFDMrerGhR6RqxqLb+U9OX5Ehk2B32m0dfDPZgfrP+3Slmy\noDEYMlPepJ6fuI58uyr7AgoSfV5SztRuUWDLJbK+7JIdpNI0pscv26lSEyqC\n2VukkhC2Ocue76oQbEUxG9tpiRNxlG0w3JilZDO2uyRGtLGdeRoqC5V5jVic\ncGrrO9IWfiJ0m0icOPd82mtgYuAzP3wxzlytDCOhyCsKU8Tp/4tooY5+h9jW\nUQpnMI3KgGPlb8yuYNo8k6t9BdCwBaNALKT9SSuG9B/vExBwAQGYaCrusWmg\nGM0dG3X6n/IcuGPBwj/cgnEMi9NlnzWYtVaRfsfExmht5Gf/G6Bz1ygiB/Sl\nLGbkAeMkDOpJdmuPFvcqLueJEjceysZwNYDCOGjcFGsoIVl+N8fsllSN7v/S\n3t1WaH1wU1ZjZa/I14ysqfU0x2jTVSkWW5qLQZCvhNkSzXOEkzOxnoMfxx2k\nfd1fuZYZfcVTXwgIaBp9JZ7Xpxnl7RaLsK4VVC4K+YP5UKGGrtBOc3bbgpJ7\nC54DzQFcDi4VW6qBTJMyvNXgEUHsqQA1THAwsPO4jR8mGNpzJvgIPZCT6OEs\nx8ikxq0g222f5d0Eb1yFjHDiVjuQtRE8f7d8K1W/GCj+QMEg+lrx41d+hE0P\nc79O\r\n=FhMW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7f141fcd82e6061ac62fb457dad40c0ad70e52d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/rtl":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/shape":"13.0.0-canary.65125b3a6.0","@material/theme":"13.0.0-canary.65125b3a6.0","@material/button":"13.0.0-canary.65125b3a6.0","@material/ripple":"13.0.0-canary.65125b3a6.0","@material/tokens":"13.0.0-canary.65125b3a6.0","@material/elevation":"13.0.0-canary.65125b3a6.0","@material/typography":"13.0.0-canary.65125b3a6.0","@material/feature-targeting":"13.0.0-canary.65125b3a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.65125b3a6.0_1631827141797_0.7497131840352813","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/banner","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.80a583365.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab929e1e38292369de073c0b3996ba052261374c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.80a583365.0.tgz","fileCount":31,"integrity":"sha512-bm5gKVZf1Xu0a2p5Wy1QSW9jPfNRxBxg4farSBNw7u9ux0Wn0CcJfQ/krp3UkdQTiI13ojKRusHGGuy3+rfQSQ==","signatures":[{"sig":"MEUCIC7nC0EvnOVFDutmlYmGfR7CoeRrccUVnDJBp4O9NbL6AiEApQlB7nRiKIVypaCaAJtTGAoKU3ekxjc/HelxYjPNLrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456067},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c174baf193216601da7fe07831dd2152585c6beb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/rtl":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/shape":"13.0.0-canary.80a583365.0","@material/theme":"13.0.0-canary.80a583365.0","@material/button":"13.0.0-canary.80a583365.0","@material/ripple":"13.0.0-canary.80a583365.0","@material/tokens":"13.0.0-canary.80a583365.0","@material/elevation":"13.0.0-canary.80a583365.0","@material/typography":"13.0.0-canary.80a583365.0","@material/feature-targeting":"13.0.0-canary.80a583365.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.80a583365.0_1631911012769_0.37676143244777216","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/banner","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.83900936a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6d59d960e23653a03e8b29529d2243af454c37a4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.83900936a.0.tgz","fileCount":31,"integrity":"sha512-UVp1fTQ87wODsTKIhgt4+eEWWbnWvkBQCAh1eLWQU/zskVI+I6x561XxWlSquDUE6QImhn2VrBoZQiahbu7DSg==","signatures":[{"sig":"MEQCIFoCYu+EGdoxERGyk284y4X6LTui3PDALj0DC/2q5EuqAiB1lyzFb4+PcqYNA6Dk5m3NUy3+SQTFaJNJk3L8lyPTXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456067},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ca6026fb6b378ac9a4f14997612369fe29f31093","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/rtl":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/shape":"13.0.0-canary.83900936a.0","@material/theme":"13.0.0-canary.83900936a.0","@material/button":"13.0.0-canary.83900936a.0","@material/ripple":"13.0.0-canary.83900936a.0","@material/tokens":"13.0.0-canary.83900936a.0","@material/elevation":"13.0.0-canary.83900936a.0","@material/typography":"13.0.0-canary.83900936a.0","@material/feature-targeting":"13.0.0-canary.83900936a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.83900936a.0_1631921123434_0.7848605003697904","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/banner","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.860ad06a1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3804d03188eae322bb2d337478d2508b494f96a9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.860ad06a1.0.tgz","fileCount":31,"integrity":"sha512-vu95jn1R1aUqgjajb2nqZ1lDKQAXNL0UYIamr73p6u/IhmUpKhgMFODz8JGDlZ4hKKPKBaXDha0Y7hgpsMYWKw==","signatures":[{"sig":"MEUCIQCSNYekxMYtf0YEjibReMwAYL0EC+0rdEccIJ2lyxNLAAIgUeKMHKz0T7w4LV4qiNUEA/FuZAWRvGM80qPlmKM5t6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456067},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8f156ac018a526d53d5f5077762518483bfa7dc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/rtl":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/shape":"13.0.0-canary.860ad06a1.0","@material/theme":"13.0.0-canary.860ad06a1.0","@material/button":"13.0.0-canary.860ad06a1.0","@material/ripple":"13.0.0-canary.860ad06a1.0","@material/tokens":"13.0.0-canary.860ad06a1.0","@material/elevation":"13.0.0-canary.860ad06a1.0","@material/typography":"13.0.0-canary.860ad06a1.0","@material/feature-targeting":"13.0.0-canary.860ad06a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.860ad06a1.0_1631921818715_0.6378972936394349","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/banner","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.3b8d4429e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb3f9e2745696ad133408416831f85df0b141f48","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.3b8d4429e.0.tgz","fileCount":31,"integrity":"sha512-mrFirgnwMTZN/hAj1UDKa1hfdHg76jgUgUHFDyY+eqg5uqh8y2G9ipqhdZJ1ic9p3uma62m8I6v8QCcVgGTioA==","signatures":[{"sig":"MEUCIQD0RkUSJN4lLvZHqS6j3rJLdVaIQwHDvazunXbkqvIjeQIge+Jtb7GLsP8K8lPL16JjYheC5KTEWHYrIS/mehZWJnw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456217},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c548d2fdb2731631683bc92955d6701cd0c2bd14","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/rtl":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/shape":"13.0.0-canary.3b8d4429e.0","@material/theme":"13.0.0-canary.3b8d4429e.0","@material/button":"13.0.0-canary.3b8d4429e.0","@material/ripple":"13.0.0-canary.3b8d4429e.0","@material/tokens":"13.0.0-canary.3b8d4429e.0","@material/elevation":"13.0.0-canary.3b8d4429e.0","@material/typography":"13.0.0-canary.3b8d4429e.0","@material/feature-targeting":"13.0.0-canary.3b8d4429e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.3b8d4429e.0_1632160115293_0.3136663597635623","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/banner","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.2da3606b9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2b15a6f997298a51f440a9529ac10a9ec0766e6c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.2da3606b9.0.tgz","fileCount":31,"integrity":"sha512-B/BWiVZPxAacJBaDVIZQIeYt/MK4B0uqRVCEwmO8+3SWqBNzOEZWaFyyfmSBwIPwtR6zidi8vjUsrGeE6TuDIg==","signatures":[{"sig":"MEUCIQCb6/JhW+KRFTVIcLyhT4nTae5xWuOQyeTts4p+YWhhiwIgJquQC8Lbsu7WewV2kMll2Oat6ufQ1z5i12DIdPviyik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456217},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c452408cf52d900869313ad573c1b84c9d6a3105","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/rtl":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/shape":"13.0.0-canary.2da3606b9.0","@material/theme":"13.0.0-canary.2da3606b9.0","@material/button":"13.0.0-canary.2da3606b9.0","@material/ripple":"13.0.0-canary.2da3606b9.0","@material/tokens":"13.0.0-canary.2da3606b9.0","@material/elevation":"13.0.0-canary.2da3606b9.0","@material/typography":"13.0.0-canary.2da3606b9.0","@material/feature-targeting":"13.0.0-canary.2da3606b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.2da3606b9.0_1632166721698_0.08529064371715589","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/banner","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.e8c598d1e.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"182a892be790278737e41b0024d8e74bd1c76343","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.e8c598d1e.0.tgz","fileCount":31,"integrity":"sha512-as4p5FPORXP2FVSJKuXUnpIjr3HRRjRMGXb9YFeNLBz1g9QjBUDY/BqJkVec2W5dwv57/S7wIqF9kiGFflNYhw==","signatures":[{"sig":"MEQCIDsB48wQdgQ6nDEZy1a4DM91pz/AXWblkJINr2YYyPiRAiBwFkpY9gF0AijvLEMn2/fZk7Mp71aqspYVakyjlB0odQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456217},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"11ab5557b275cc7f950ff2123684083e6245eafe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/rtl":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/shape":"13.0.0-canary.e8c598d1e.0","@material/theme":"13.0.0-canary.e8c598d1e.0","@material/button":"13.0.0-canary.e8c598d1e.0","@material/ripple":"13.0.0-canary.e8c598d1e.0","@material/tokens":"13.0.0-canary.e8c598d1e.0","@material/elevation":"13.0.0-canary.e8c598d1e.0","@material/typography":"13.0.0-canary.e8c598d1e.0","@material/feature-targeting":"13.0.0-canary.e8c598d1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.e8c598d1e.0_1632172389915_0.707618229125331","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/banner","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.1340ee9f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"98eeca207b799d46160cf469333b404ac6c266b7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.1340ee9f7.0.tgz","fileCount":31,"integrity":"sha512-u5mFqu+TYth+sVRNrU3jVxoJiZevLlNIsfPtT3qp/tf3eCQB3wJyfEA1bbJoVsVT46h88OlwsT5bE6QcgV8DDg==","signatures":[{"sig":"MEYCIQDidCwJQCRTy3aut+aED6LLBuxbHsLtdmg0oLWtqU1jiQIhAIgrYd6Y3XI6B9zkvOYqQMnUdJwbyhjyWSmwCM3iwknV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456249},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c9cbdc93fd9954f12cb74ebaf2cfa5806d078879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/rtl":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/shape":"13.0.0-canary.1340ee9f7.0","@material/theme":"13.0.0-canary.1340ee9f7.0","@material/button":"13.0.0-canary.1340ee9f7.0","@material/ripple":"13.0.0-canary.1340ee9f7.0","@material/tokens":"13.0.0-canary.1340ee9f7.0","@material/elevation":"13.0.0-canary.1340ee9f7.0","@material/typography":"13.0.0-canary.1340ee9f7.0","@material/feature-targeting":"13.0.0-canary.1340ee9f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.1340ee9f7.0_1632333541978_0.7246361875767042","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/banner","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.65084baff.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dec1b9226713b11ebd36090ec277fe5689b230f7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.65084baff.0.tgz","fileCount":31,"integrity":"sha512-RwcljRVnCqxs68vMPGpqfJaD3Vu4QV0G00/D0ZoElP+RLJhfpieptoUw6eBS55+CBYasbiQg7LizvUPx24z+vw==","signatures":[{"sig":"MEUCIQCNTablM8ObiiIk5UQOHuBujEPBCinp6RNnojh2uv3OJAIgfl4ONvnp5zj8S8EDEpClE6ZcgoHkEyPmqYzbKpuvjwU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456249},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"afe4cce0d8c7e5038058ea8198ffd72e99e1c941","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/rtl":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/shape":"13.0.0-canary.65084baff.0","@material/theme":"13.0.0-canary.65084baff.0","@material/button":"13.0.0-canary.65084baff.0","@material/ripple":"13.0.0-canary.65084baff.0","@material/tokens":"13.0.0-canary.65084baff.0","@material/elevation":"13.0.0-canary.65084baff.0","@material/typography":"13.0.0-canary.65084baff.0","@material/feature-targeting":"13.0.0-canary.65084baff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.65084baff.0_1632432391218_0.8923334948210553","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/banner","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0-canary.c79aa0cdd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45311216884b805409b25976b26773a51cdb216e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":31,"integrity":"sha512-BI2P81xzNh++llqsSEmQwA1Nm2XGfUGF48CUPdU8wVC+bwFqy/vSERfL56kt+VGagK056AkukUWT71cWLPa9EQ==","signatures":[{"sig":"MEQCIAd09fKYEOHUcS9cq7VcJUYk5+Poz/W1fTavOXxgzEDhAiAPrC87/nojewmoGsZOdh0BlMk/xyxYdtxlp7Q2wIFpeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456249},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2caa02d38f883966fd5f78948743dabdced9b689","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/rtl":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/shape":"13.0.0-canary.c79aa0cdd.0","@material/theme":"13.0.0-canary.c79aa0cdd.0","@material/button":"13.0.0-canary.c79aa0cdd.0","@material/ripple":"13.0.0-canary.c79aa0cdd.0","@material/tokens":"13.0.0-canary.c79aa0cdd.0","@material/elevation":"13.0.0-canary.c79aa0cdd.0","@material/typography":"13.0.0-canary.c79aa0cdd.0","@material/feature-targeting":"13.0.0-canary.c79aa0cdd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0-canary.c79aa0cdd.0_1632490986477_0.8616573364791744","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/banner","version":"13.0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@13.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"853e01977433ca7f0d991d198bc91e1b54adedac","tarball":"https://registry.npmjs.org/@material/banner/-/banner-13.0.0.tgz","fileCount":30,"integrity":"sha512-59M85ezhwRaa+BqguYCCaRS57fV5KQe3Ff2cU6LcQNw0UPMFW1ap0dZ+iZBv/sj+7/QcqBBShL9uu8dWKtI4Gg==","signatures":[{"sig":"MEUCIQDTRcwi5mNSTUr7iASZF6FE1Bh29WRVc82cHGW1mEU7OwIgHX7yf5giYbE50YVPEtUMjNEoZ+sHSiVvGW0sAez9McQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":454170},"main":"dist/mdc.banner.js","module":"index.js","gitHead":"198431fcd8ff3028934d2cf3a5b292f8482a4570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/rtl":"^13.0.0","@material/base":"^13.0.0","@material/shape":"^13.0.0","@material/theme":"^13.0.0","@material/button":"^13.0.0","@material/ripple":"^13.0.0","@material/tokens":"^13.0.0","@material/elevation":"^13.0.0","@material/typography":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_13.0.0_1632512813351_0.8483243856490434","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/banner","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.198431fcd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1bd3dda343ee2f95b587ca764ac5d5db9bc71d0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.198431fcd.0.tgz","fileCount":31,"integrity":"sha512-xkWMqDNk6BuUWmx+Of6yAYq2DGOgf1RrT8pDCQ3OjU8oj7QiZPyl8r89gwXJZbdXlbJgMa/KnFEZ/N6jmUNWSg==","signatures":[{"sig":"MEUCIQDfkKc3goSpg434jhLOPwO2jYdANal7GpzKQSSWh3CP1wIgbSzMUsJFEsq46AvXXjmOzSvQhfYcevWsQcY6lqQOvCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":456249},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"34242e3354729334618dc12d6bc959e0a8f14dd4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/rtl":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/shape":"14.0.0-canary.198431fcd.0","@material/theme":"14.0.0-canary.198431fcd.0","@material/button":"14.0.0-canary.198431fcd.0","@material/ripple":"14.0.0-canary.198431fcd.0","@material/tokens":"14.0.0-canary.198431fcd.0","@material/elevation":"14.0.0-canary.198431fcd.0","@material/typography":"14.0.0-canary.198431fcd.0","@material/feature-targeting":"14.0.0-canary.198431fcd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.198431fcd.0_1632512857118_0.9148483228343833","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/banner","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.9a02b6ef8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e49283c2e108965b70d5334c86e834fb547ea8c1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":31,"integrity":"sha512-xjlLqXn3lscI6r5nmkyFTRUe4C7A2ivnptacjzxEq2NyseqNppIWW6/IBBeCp2RFpvC1JFGxp77eMcXx8Ufi6g==","signatures":[{"sig":"MEQCIEF7LsF4EJ0yQajryZWIKBqD97k7sbgJ620zGyFLLEx3AiAjN5xeGcihN/Sjn7pe1cyb7tZ2pZL//+WyrEzzc5YQDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455242},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"13e91b1150d6339b15d71c44c8743eb9e2026eaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/rtl":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/shape":"14.0.0-canary.9a02b6ef8.0","@material/theme":"14.0.0-canary.9a02b6ef8.0","@material/button":"14.0.0-canary.9a02b6ef8.0","@material/ripple":"14.0.0-canary.9a02b6ef8.0","@material/tokens":"14.0.0-canary.9a02b6ef8.0","@material/elevation":"14.0.0-canary.9a02b6ef8.0","@material/typography":"14.0.0-canary.9a02b6ef8.0","@material/feature-targeting":"14.0.0-canary.9a02b6ef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.9a02b6ef8.0_1632575523074_0.7632729358712305","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/banner","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.758ce31d9.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7714bf45328a8218a7353081ba085caaf3d14ab","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.758ce31d9.0.tgz","fileCount":31,"integrity":"sha512-RuLcKbNlNLh2tbTY5KnOtPfuZph4QcfNATpkAH8ZxZ/OK5GDINArZQrwhZJOhe1wmx4vyC4jUiScRAnpFVNm3g==","signatures":[{"sig":"MEUCIQC05pIT9yL9eyCHf4+waWgqmR0m/HsPFICZ1mPxweY7ZwIgDhA0a462FYMP73iVben8KzbNWlv6FaAIGkzu+QYCXpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455242},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"09083795b738aece76a37f8a1dcc8daf958204b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/rtl":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/shape":"14.0.0-canary.758ce31d9.0","@material/theme":"14.0.0-canary.758ce31d9.0","@material/button":"14.0.0-canary.758ce31d9.0","@material/ripple":"14.0.0-canary.758ce31d9.0","@material/tokens":"14.0.0-canary.758ce31d9.0","@material/elevation":"14.0.0-canary.758ce31d9.0","@material/typography":"14.0.0-canary.758ce31d9.0","@material/feature-targeting":"14.0.0-canary.758ce31d9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.758ce31d9.0_1632763822786_0.7510746093845824","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/banner","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.86b50ef74.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6eef0d264ace635bcd25cfa13291ed561b8d7516","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.86b50ef74.0.tgz","fileCount":31,"integrity":"sha512-pSH6ztYkoKOXvaaWy41A0+rA1xmMFICflX27NADvXpVDRR5/m4iw86iuPGIOQmDq/Q19F1VpV6Fb8z9CWMC11g==","signatures":[{"sig":"MEYCIQDkrXShBQ3UBPEwEFkz90Bc1/MQZxJ+ZgsGhk2jq6RHMAIhAOZIfRHm0UQRQsADQwNjwLNUmdg3kqynCd/Vd0Mlnxb2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455242},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5941ece7c1e494e720865be940d098a5556de149","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/rtl":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/shape":"14.0.0-canary.86b50ef74.0","@material/theme":"14.0.0-canary.86b50ef74.0","@material/button":"14.0.0-canary.86b50ef74.0","@material/ripple":"14.0.0-canary.86b50ef74.0","@material/tokens":"14.0.0-canary.86b50ef74.0","@material/elevation":"14.0.0-canary.86b50ef74.0","@material/typography":"14.0.0-canary.86b50ef74.0","@material/feature-targeting":"14.0.0-canary.86b50ef74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.86b50ef74.0_1632851052793_0.6269641770031016","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/banner","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.b2fe3528b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3163680fe5077fd85abbfa14aa210d1bbe4c903","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.b2fe3528b.0.tgz","fileCount":31,"integrity":"sha512-oBXiT/f/43mKZ1wptcedjQX7sGFrhtLgIj0bROYYwE7m+3PBCa8+9Cy2jqjjK6GnTUa6uOsqHTB5pxcygWYPrg==","signatures":[{"sig":"MEYCIQCwZ6GBaQlPyVodo3KbqmqSPWI42/hGvYQuP/ezm7xEBgIhAOUYcBGwaLTPaaWgl0aQg884ZjAxEAuv5tSFuREHB7UT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455242},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cce11b1c181ea84c0bfdbef26112377518afa98b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/rtl":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/shape":"14.0.0-canary.b2fe3528b.0","@material/theme":"14.0.0-canary.b2fe3528b.0","@material/button":"14.0.0-canary.b2fe3528b.0","@material/ripple":"14.0.0-canary.b2fe3528b.0","@material/tokens":"14.0.0-canary.b2fe3528b.0","@material/elevation":"14.0.0-canary.b2fe3528b.0","@material/typography":"14.0.0-canary.b2fe3528b.0","@material/feature-targeting":"14.0.0-canary.b2fe3528b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.b2fe3528b.0_1632956275277_0.667906182876375","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/banner","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.586e740dd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cb6bd28f92c8619eeacba555acb4fa482a591189","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.586e740dd.0.tgz","fileCount":31,"integrity":"sha512-OYFSh9AcG1fDU86u8MF7lb4ohNorKcCkcPOMQdt2zLQQyyTxSw2Lqj5j9vF/QKLCH/Ixjn3xmdanGX1l0kjK2A==","signatures":[{"sig":"MEQCIQD1Y4IZQE71RAoDoq/yy8TfTaFMMhjRmuwG+3i12glgbgIfDVhBA4PY7yqsH/5g6/17fIi3qnz1KAjRrL4KNACEGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455242},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6c765889db11456de00c45d7bb289b6c7cf3ec27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/rtl":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/shape":"14.0.0-canary.586e740dd.0","@material/theme":"14.0.0-canary.586e740dd.0","@material/button":"14.0.0-canary.586e740dd.0","@material/ripple":"14.0.0-canary.586e740dd.0","@material/tokens":"14.0.0-canary.586e740dd.0","@material/elevation":"14.0.0-canary.586e740dd.0","@material/typography":"14.0.0-canary.586e740dd.0","@material/feature-targeting":"14.0.0-canary.586e740dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.586e740dd.0_1633019540431_0.5635123321967976","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/banner","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.2ac92d766.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34775797fa393764600af72d3e266f59f70e20a3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.2ac92d766.0.tgz","fileCount":31,"integrity":"sha512-TZ7SVCZQXcC+is1UHh6Rc2crXuvm6TAjM7K4OPfUTq9FYTm+cIMhWFMcIIkPMxT3WN3FYg8gMdXruMd46xZj4g==","signatures":[{"sig":"MEUCIQCFlJDKhXBsavyLk3M93XusOf1YprODzKvfuiPeEmRZ+wIgUDTIqu2okr4UetJuxkTBNmG2d0rpR6NvGltzlJcsIME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455242},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3a797e3a01110aeaf8270a13c2cc32d0871a8bd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/rtl":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/shape":"14.0.0-canary.2ac92d766.0","@material/theme":"14.0.0-canary.2ac92d766.0","@material/button":"14.0.0-canary.2ac92d766.0","@material/ripple":"14.0.0-canary.2ac92d766.0","@material/tokens":"14.0.0-canary.2ac92d766.0","@material/elevation":"14.0.0-canary.2ac92d766.0","@material/typography":"14.0.0-canary.2ac92d766.0","@material/feature-targeting":"14.0.0-canary.2ac92d766.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.2ac92d766.0_1633462173695_0.5977227803177321","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/banner","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.353ca7e9f.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24ba8d865fcea2507caccd7286abf62b1b7a7c0f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.353ca7e9f.0.tgz","fileCount":31,"integrity":"sha512-7Ljjl9aGp6smwlnqUQAS6r1kqDwLWHWhU0b9Uzkpd9xeRmXvpxvPQov3Kqi7/F/ZW4FVNibqT+z2ZJC+nv9+fw==","signatures":[{"sig":"MEUCIGhutf0QNexs4dXS5mlptqI1F+ZTK7DvI2x33GDBLwvpAiEAt6cmp8sF3+GGymXSKSVcPps9Y6IWKDqzgL9h8Gp+d9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455242},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4f091efbfcb52d523712f9b99808d737b06a60af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/rtl":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/shape":"14.0.0-canary.353ca7e9f.0","@material/theme":"14.0.0-canary.353ca7e9f.0","@material/button":"14.0.0-canary.353ca7e9f.0","@material/ripple":"14.0.0-canary.353ca7e9f.0","@material/tokens":"14.0.0-canary.353ca7e9f.0","@material/elevation":"14.0.0-canary.353ca7e9f.0","@material/typography":"14.0.0-canary.353ca7e9f.0","@material/feature-targeting":"14.0.0-canary.353ca7e9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.353ca7e9f.0_1633718878341_0.13010197437566395","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/banner","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.c78ff0429.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"158ad66425c5d51fba07dc082fc3cd1a5ac3b371","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.c78ff0429.0.tgz","fileCount":31,"integrity":"sha512-aZbJyJtxQcCC1e3Vyed7as1kSKNVkdEW+Hal2lzHeczw3f08Qlw9pQlOiqAIxvQQAJ4PysfOeKd/+fLQLTIhpA==","signatures":[{"sig":"MEUCIQCcSDcnKUZp9Wq4LK6S1LQTmU7hxW6eqhhUfyrebb8cyQIgbs7IhelFr4zqJ9sJukOrUfOP+TeP3q96Y07FW0ZUg0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"55d918ee5ce9842b93075fa0d0ffd2b64b5f3ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/rtl":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/shape":"14.0.0-canary.c78ff0429.0","@material/theme":"14.0.0-canary.c78ff0429.0","@material/button":"14.0.0-canary.c78ff0429.0","@material/ripple":"14.0.0-canary.c78ff0429.0","@material/tokens":"14.0.0-canary.c78ff0429.0","@material/elevation":"14.0.0-canary.c78ff0429.0","@material/typography":"14.0.0-canary.c78ff0429.0","@material/feature-targeting":"14.0.0-canary.c78ff0429.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.c78ff0429.0_1633972999853_0.44437173315797196","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/banner","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.261f2db59.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fdbb97762574a020d7fd3b94d65af2327f64724a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.261f2db59.0.tgz","fileCount":31,"integrity":"sha512-bpzjc6BH5nuRNbU6ju4hUCkWiWtoc0ReuJxx3EoXamflWXJqoosJ+oX74s2yYTu6ap1KpPffyId3Q44v7p23Yg==","signatures":[{"sig":"MEQCIGPXuDqcRsuMdsQjf+dcJsoH4EXND+ZKtIERcsi2cbUEAiB4tJ3sqsRl/h+7urLJpCSpmdSLTdxs5oLTot8U6wltcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"22c1cb4091a589b9a53b844da4e8d98309c75acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/rtl":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/shape":"14.0.0-canary.261f2db59.0","@material/theme":"14.0.0-canary.261f2db59.0","@material/button":"14.0.0-canary.261f2db59.0","@material/ripple":"14.0.0-canary.261f2db59.0","@material/tokens":"14.0.0-canary.261f2db59.0","@material/elevation":"14.0.0-canary.261f2db59.0","@material/typography":"14.0.0-canary.261f2db59.0","@material/feature-targeting":"14.0.0-canary.261f2db59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.261f2db59.0_1634749241321_0.10736767063169128","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/banner","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.9803d2dc1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48611ae24d3ad0d11a48dd31cbd636388feb13eb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.9803d2dc1.0.tgz","fileCount":31,"integrity":"sha512-ho/BF2bCUiv8ntkaE2F+DyBY6mnbZ/tfCfj21hy+CkrKl4+h2B+uxlcvDpfrut0Qa2Ypl53LzIPvZnIFciYZIg==","signatures":[{"sig":"MEYCIQDURIF+IX6pzndqsl9OZyQ5Vp5Z/457b5ax7TGICba7VgIhALNuN7x2FThXgi/riMKfMkYsPJ3N3V81SGoIO5R4DNlv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4ef0574fd4b362b2609f5dc9bc002ef96f07fcc9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/rtl":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/shape":"14.0.0-canary.9803d2dc1.0","@material/theme":"14.0.0-canary.9803d2dc1.0","@material/button":"14.0.0-canary.9803d2dc1.0","@material/ripple":"14.0.0-canary.9803d2dc1.0","@material/tokens":"14.0.0-canary.9803d2dc1.0","@material/elevation":"14.0.0-canary.9803d2dc1.0","@material/typography":"14.0.0-canary.9803d2dc1.0","@material/feature-targeting":"14.0.0-canary.9803d2dc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.9803d2dc1.0_1634757778626_0.09624848061119873","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/banner","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.348665978.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a0ec97ed3a866839e5d5497b0107ced1bb9cc06","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.348665978.0.tgz","fileCount":31,"integrity":"sha512-cQCLHK5QYqb0R6oBfewl+mr0f7W76iCLgBlJ0fK7p+iYuRcEk4meYgOWJxfNGnJUaU+WwTajTkDJd7ehc2zlSg==","signatures":[{"sig":"MEYCIQCYG2TLWY31TvOho9Moe2wxcUsOrWTHZKSksEnkXMGNFQIhAJKRvtRfvGChbhBa75y5wT99byvjF3Hr1587lV5cRUx5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bf16d95c07dcfc371fc864fe30028299a2d5d0d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/rtl":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/shape":"14.0.0-canary.348665978.0","@material/theme":"14.0.0-canary.348665978.0","@material/button":"14.0.0-canary.348665978.0","@material/ripple":"14.0.0-canary.348665978.0","@material/tokens":"14.0.0-canary.348665978.0","@material/elevation":"14.0.0-canary.348665978.0","@material/typography":"14.0.0-canary.348665978.0","@material/feature-targeting":"14.0.0-canary.348665978.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.348665978.0_1634827915634_0.4165018619662386","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/banner","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.b2b979a8a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fb02b15e4f32cad15b765005605af9ba5cba5174","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.b2b979a8a.0.tgz","fileCount":31,"integrity":"sha512-lqeB5RhU6u8ETBpyzWThk6M5Jp4IMBLf/tI3qBTfHLvZXviuO8kf6Ezo+wU7J/Kw6/TvUMIUpEjc/U5I5SaAsA==","signatures":[{"sig":"MEUCIQDRFixqrW4BAFYQVvZRmo9Z06BF/G2kUHKc9W3MJutE3AIgc3rCcorqN5Qic96eaVEcUeUjXOBwdsLLn6fAtytEsJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"08377359fe2dfa41ac960f776df2ba00e50e9819","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/rtl":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/shape":"14.0.0-canary.b2b979a8a.0","@material/theme":"14.0.0-canary.b2b979a8a.0","@material/button":"14.0.0-canary.b2b979a8a.0","@material/ripple":"14.0.0-canary.b2b979a8a.0","@material/tokens":"14.0.0-canary.b2b979a8a.0","@material/elevation":"14.0.0-canary.b2b979a8a.0","@material/typography":"14.0.0-canary.b2b979a8a.0","@material/feature-targeting":"14.0.0-canary.b2b979a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.b2b979a8a.0_1635434009878_0.5463419891555699","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/banner","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.1af7c1c4a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab1b82b0c76a0af412a2a118806a8427b6e620cd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":31,"integrity":"sha512-+VVNRg2RTciR9o7Oo5+7ghFNXnQ22eMmm8cur7CJ0XhO/iBrQ6lJu3r7F9VgUQpop9EWJS4ghqJ72W8SpMyQDg==","signatures":[{"sig":"MEUCIDNE/G3n1YOmp3wDCnOulVtLW6WC2v9Oz6SIEGgIdBIjAiEA0vUSHKwSTsmbgOiZ8e0q079g2mj71E9Hu9dYfD54lzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3673ef3144cd47c5faba873a239454e11e3d72eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/rtl":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/shape":"14.0.0-canary.1af7c1c4a.0","@material/theme":"14.0.0-canary.1af7c1c4a.0","@material/button":"14.0.0-canary.1af7c1c4a.0","@material/ripple":"14.0.0-canary.1af7c1c4a.0","@material/tokens":"14.0.0-canary.1af7c1c4a.0","@material/elevation":"14.0.0-canary.1af7c1c4a.0","@material/typography":"14.0.0-canary.1af7c1c4a.0","@material/feature-targeting":"14.0.0-canary.1af7c1c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.1af7c1c4a.0_1635443633508_0.22611504631354462","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/banner","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.4afd353cd.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4e33452b92e2f9c5c889b8676ccfa6b6a0c489f3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.4afd353cd.0.tgz","fileCount":31,"integrity":"sha512-89f76swxCT21KAZ4w7gCoGHjkHkUryI50ZI99whwiL0Z5ZWu/lRGDHEqthyfrzWn3rlpyyvlzRruCRB2MWSRLQ==","signatures":[{"sig":"MEUCIDz7HCGCeyI0OqIX3r2EgTTJyySev+D30AuCxPc25mAdAiEAm45hN91VmmtQrUak6Ob3wDkraAC43FHP/Pjuk5knrBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"491d940b4e97c65f274b1b4d42b3842e9bd3a4f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/rtl":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/shape":"14.0.0-canary.4afd353cd.0","@material/theme":"14.0.0-canary.4afd353cd.0","@material/button":"14.0.0-canary.4afd353cd.0","@material/ripple":"14.0.0-canary.4afd353cd.0","@material/tokens":"14.0.0-canary.4afd353cd.0","@material/elevation":"14.0.0-canary.4afd353cd.0","@material/typography":"14.0.0-canary.4afd353cd.0","@material/feature-targeting":"14.0.0-canary.4afd353cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.4afd353cd.0_1635519762951_0.5394100710585323","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/banner","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.a986df922.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a6e5624f1015c85547c9b52aa741c673ef1cf57","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.a986df922.0.tgz","fileCount":31,"integrity":"sha512-v0L29Yh04IgO0/AhGpQADKTDmyrck4RHGkVCLaeE0yAr9/lzTANOlM2xRJtiC26gw/NBXzlGYMt4x5z0BMhraw==","signatures":[{"sig":"MEYCIQCCJkiY0YWhmbzk6yT2wtS9BKarpUkLElheAcZGnvKQsQIhAN9JIQ0Ys8JPsFPeuG7VH/PQ2io4ormJaJD7oBiXFHZc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6fd5c666012fea37f8a5a820b4979cc66e59fe9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/rtl":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/shape":"14.0.0-canary.a986df922.0","@material/theme":"14.0.0-canary.a986df922.0","@material/button":"14.0.0-canary.a986df922.0","@material/ripple":"14.0.0-canary.a986df922.0","@material/tokens":"14.0.0-canary.a986df922.0","@material/elevation":"14.0.0-canary.a986df922.0","@material/typography":"14.0.0-canary.a986df922.0","@material/feature-targeting":"14.0.0-canary.a986df922.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.a986df922.0_1635543362772_0.48107641997321804","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/banner","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.c3cdff07b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"96820137629f5b5d40137f36d464ab6ddc5dd6a9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.c3cdff07b.0.tgz","fileCount":31,"integrity":"sha512-rmzrc86YGRobbDVjOemjhPvMJdWuMXc4/lC/9GLARoDPSaaEeKIAB2qnyYbP16mr0DYwEe4SFOa2FzPbjlk4qg==","signatures":[{"sig":"MEUCIANrLzWB0UQr+bQguQBopv/xtD0tn0BzgfubsfJaWWazAiEAmov0z8PAMTeNDksTwJBfyiqQEk7H67orOyzemouoi0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"078c19c333e3161ad6b51a3fdc993d883bdc19c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/rtl":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/shape":"14.0.0-canary.c3cdff07b.0","@material/theme":"14.0.0-canary.c3cdff07b.0","@material/button":"14.0.0-canary.c3cdff07b.0","@material/ripple":"14.0.0-canary.c3cdff07b.0","@material/tokens":"14.0.0-canary.c3cdff07b.0","@material/elevation":"14.0.0-canary.c3cdff07b.0","@material/typography":"14.0.0-canary.c3cdff07b.0","@material/feature-targeting":"14.0.0-canary.c3cdff07b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.c3cdff07b.0_1636484823639_0.5455010298667888","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/banner","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.468392606.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"595cdc208f65ea1ce3a7bbd9321b8657de576884","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.468392606.0.tgz","fileCount":31,"integrity":"sha512-5/KwnDHZnEvpkIU8XwkxmTJxA75abjkQIADgHIU4f4ZshedUR3uJXLvde73FxktfJsi8MQTJ9mhIODcX1GAblQ==","signatures":[{"sig":"MEUCIQCcb7biusRTq09oOg+L8sHfV0Eg31wbmFhUxOniHIR0CQIgPd1so4WdjIlVRFpJhAOjZ0rJUWR+81KzLLHdDmDJHo0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ac451ce035a924184caaae0df5252896a7392e33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/rtl":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/shape":"14.0.0-canary.468392606.0","@material/theme":"14.0.0-canary.468392606.0","@material/button":"14.0.0-canary.468392606.0","@material/ripple":"14.0.0-canary.468392606.0","@material/tokens":"14.0.0-canary.468392606.0","@material/elevation":"14.0.0-canary.468392606.0","@material/typography":"14.0.0-canary.468392606.0","@material/feature-targeting":"14.0.0-canary.468392606.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.468392606.0_1636659680955_0.2955168856471433","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/banner","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.828f9803b.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07a6a4da11b3fc2733f0f143644dbbdbf29317e8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.828f9803b.0.tgz","fileCount":31,"integrity":"sha512-brnbjAQQE7Ee7ccWtxVaA9OfWao55JNATl+OozcBV/vnTEoUZ1BEGvSH1KGbGQd7y5YYzBcz9Mk12RCtTD47Ew==","signatures":[{"sig":"MEUCIHDag0WaWPwgUooi+mgbsJA7StezFdTtMOsXVJvOjwZzAiEAjB8pzqLau/hA/sqedRB/5UbALTwbkS8FS3JRO3FYqUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c64e9f941d45dc823621c068481be90a0eaa0f39","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/rtl":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/shape":"14.0.0-canary.828f9803b.0","@material/theme":"14.0.0-canary.828f9803b.0","@material/button":"14.0.0-canary.828f9803b.0","@material/ripple":"14.0.0-canary.828f9803b.0","@material/tokens":"14.0.0-canary.828f9803b.0","@material/elevation":"14.0.0-canary.828f9803b.0","@material/typography":"14.0.0-canary.828f9803b.0","@material/feature-targeting":"14.0.0-canary.828f9803b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.828f9803b.0_1636660309533_0.4465877375947893","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/banner","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.8795cba87.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f9400ef1415a80c01ef8b275c319f60beb1df323","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.8795cba87.0.tgz","fileCount":31,"integrity":"sha512-4mBXxanUPnBxe/gSaituRWqAfoqu2+JCtp6Gv8wayleo1S4EOHrR7eAtXjrDC/zaenZe2yZC5dhm+HvaxojAkA==","signatures":[{"sig":"MEUCIQCuVGFSUJXWXgVQVoTtUX4IoqZqK4jaeepwiihuzPjYewIgFSmDA2WSgsEwZaw59TwZ7fLhF8fYt2kknwaIZTodaKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"12c2e8ee797434819828bade998610af66a528ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/rtl":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/shape":"14.0.0-canary.8795cba87.0","@material/theme":"14.0.0-canary.8795cba87.0","@material/button":"14.0.0-canary.8795cba87.0","@material/ripple":"14.0.0-canary.8795cba87.0","@material/tokens":"14.0.0-canary.8795cba87.0","@material/elevation":"14.0.0-canary.8795cba87.0","@material/typography":"14.0.0-canary.8795cba87.0","@material/feature-targeting":"14.0.0-canary.8795cba87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.8795cba87.0_1636660668474_0.7310504101147428","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/banner","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.cd7f8cace.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a4b307e64e59c53855afff1e0640fe667685a4c7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.cd7f8cace.0.tgz","fileCount":31,"integrity":"sha512-YeHEgLxmSSrAdgpy0G+rcMw7Jt1/2MC3+H7v8i9e4enf6YinrCHBoxL9W8ytUQvLNZQrrZ3nasuE6+DG4M+lYw==","signatures":[{"sig":"MEYCIQD64zEpR7QyqgxL5DXjflyTYdWW9eDfM489+PJ9LH5A1AIhAIOY2t/TuSbR9V5Dq8hprIFGo5PAihjBjdvmS15eZv9J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6f1e9f39fe9a43e01e67b849cc2a96a5a31be67c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/rtl":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/shape":"14.0.0-canary.cd7f8cace.0","@material/theme":"14.0.0-canary.cd7f8cace.0","@material/button":"14.0.0-canary.cd7f8cace.0","@material/ripple":"14.0.0-canary.cd7f8cace.0","@material/tokens":"14.0.0-canary.cd7f8cace.0","@material/elevation":"14.0.0-canary.cd7f8cace.0","@material/typography":"14.0.0-canary.cd7f8cace.0","@material/feature-targeting":"14.0.0-canary.cd7f8cace.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.cd7f8cace.0_1636660772156_0.11627174534651075","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/banner","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.207230eb8.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f9f58faaf79696348a4096e92d91562c0e59718","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.207230eb8.0.tgz","fileCount":31,"integrity":"sha512-EfMrCovh16KtQKvFJ7talLWuwGgAeRBWOdGzZ4oq36YXLdqE0lSaYp420/BazP4eP4IvOG71kTrIqC70BLjHlg==","signatures":[{"sig":"MEYCIQCrdf9ErmGGrnn5YE9/FgKX0Az9v9ce5PS9RbYhzNee2AIhAKiNvh6wKusxiNj1v+KJ6BSW+D6HNPY+f8XOS2alZaIL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"de1b12d24234ecfbfbf5a665f46c26b71016be2e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/rtl":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/shape":"14.0.0-canary.207230eb8.0","@material/theme":"14.0.0-canary.207230eb8.0","@material/button":"14.0.0-canary.207230eb8.0","@material/ripple":"14.0.0-canary.207230eb8.0","@material/tokens":"14.0.0-canary.207230eb8.0","@material/elevation":"14.0.0-canary.207230eb8.0","@material/typography":"14.0.0-canary.207230eb8.0","@material/feature-targeting":"14.0.0-canary.207230eb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.207230eb8.0_1636669537232_0.15479890238033556","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/banner","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.991fb99f7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32f05145572ad2a8e19b20621587af1bb5fc8273","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.991fb99f7.0.tgz","fileCount":31,"integrity":"sha512-x3hXAFMPp6HdrnhCf8Zh20BRuwj2JmZx88iLZPjwjCvnweosh+6afnmNGd+rXKlIVZN/znNn/ptFd/F7FTHdZQ==","signatures":[{"sig":"MEUCIAVNmjhXje9qcXEnUvLTv3PTnAx147cA8K4v5GxYHWkaAiEA24nRIiXkJTOnt88hFfieuFdkBgj/0o2LP7F2Q+e9Xv8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d13dee60c11cfef5bdcac33da4fff6f13626c05b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/rtl":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/shape":"14.0.0-canary.991fb99f7.0","@material/theme":"14.0.0-canary.991fb99f7.0","@material/button":"14.0.0-canary.991fb99f7.0","@material/ripple":"14.0.0-canary.991fb99f7.0","@material/tokens":"14.0.0-canary.991fb99f7.0","@material/elevation":"14.0.0-canary.991fb99f7.0","@material/typography":"14.0.0-canary.991fb99f7.0","@material/feature-targeting":"14.0.0-canary.991fb99f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.991fb99f7.0_1636670248419_0.45485309732493917","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/banner","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.15db4f164.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8e04e681edc901101e3e58cb61c25c96698f9f2b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.15db4f164.0.tgz","fileCount":31,"integrity":"sha512-vIaf+waO1tS6cdpY7tJlHq7NTtCcc9PbG3HAr0cgfqF+f4hND//si4Zy0HdvVYUE2IT9CkYG88NRUSbXYiWoMA==","signatures":[{"sig":"MEUCIQDi7/ImPJS4YBi+cFJoYcrGUvFDAX0AHzG2+HNLCx7LDwIgfFDn6CwwO4yBEOHkPibAnkRmsoW+vWFjfR0mBae/Si0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"562e11bb445a0e51783e848adc61b690a7a1ba3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/rtl":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/shape":"14.0.0-canary.15db4f164.0","@material/theme":"14.0.0-canary.15db4f164.0","@material/button":"14.0.0-canary.15db4f164.0","@material/ripple":"14.0.0-canary.15db4f164.0","@material/tokens":"14.0.0-canary.15db4f164.0","@material/elevation":"14.0.0-canary.15db4f164.0","@material/typography":"14.0.0-canary.15db4f164.0","@material/feature-targeting":"14.0.0-canary.15db4f164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.15db4f164.0_1636738256149_0.5805408548473383","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/banner","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.8fcad5a3c.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6695524d0a573fe53e2f2fd369e46728d5b073f7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":31,"integrity":"sha512-bzwCUc/D3Cqn+h/t2+wpKA4kPneRwGLubA4YN69TU7x9wudot5qeDIH2URD4hccehurzQhnXEpyVBIlUMd8dYA==","signatures":[{"sig":"MEUCICtn7lnJKzib10Z8xZkXc0GuiRYWcfDO7wf4y/mgFKXfAiEAp3de2XsJZzZnEHVjpv7Ow5HFOVBfB5WSydhe1N++nn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"14b654013dacdda833d34b73c1a94811202298d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/rtl":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/shape":"14.0.0-canary.8fcad5a3c.0","@material/theme":"14.0.0-canary.8fcad5a3c.0","@material/button":"14.0.0-canary.8fcad5a3c.0","@material/ripple":"14.0.0-canary.8fcad5a3c.0","@material/tokens":"14.0.0-canary.8fcad5a3c.0","@material/elevation":"14.0.0-canary.8fcad5a3c.0","@material/typography":"14.0.0-canary.8fcad5a3c.0","@material/feature-targeting":"14.0.0-canary.8fcad5a3c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.8fcad5a3c.0_1636744491588_0.3350828830383843","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/banner","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.f81fb1d23.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c21433ac91a030b2fc810b29f7ea17769c8a5c6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.f81fb1d23.0.tgz","fileCount":31,"integrity":"sha512-3iby6dKbje299ML5o6ZtKUUDTA4Al2wqJ+emRaS8X86X+sOwr81tgIHEPe3vA4aFHeHGJyxJ66eqUJgd8skDdw==","signatures":[{"sig":"MEUCIBDjiSR8Ge//koHqEHXJPLLjnJA4dfAaCRrWFZPkB8GaAiEArTPrdtgQ8VwpNJ6VnPgEqMoNVpKye310Bg0z6241vNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"60600a1b8cf651dddedd6881a54b20db7b75cdc6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/rtl":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/shape":"14.0.0-canary.f81fb1d23.0","@material/theme":"14.0.0-canary.f81fb1d23.0","@material/button":"14.0.0-canary.f81fb1d23.0","@material/ripple":"14.0.0-canary.f81fb1d23.0","@material/tokens":"14.0.0-canary.f81fb1d23.0","@material/elevation":"14.0.0-canary.f81fb1d23.0","@material/typography":"14.0.0-canary.f81fb1d23.0","@material/feature-targeting":"14.0.0-canary.f81fb1d23.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.f81fb1d23.0_1636756881203_0.5968587995034467","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/banner","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.783f6fd5a.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad34bf8a9563533bdb5a1748e44b66f52c8fdef6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.783f6fd5a.0.tgz","fileCount":31,"integrity":"sha512-j2fPqi32YK0YrL1mxvFSeyHwo2RiUs87zS01EA3FOnxhAvHI85nwu6NpqOIOD1lN0qVr7iaHd4n2KBmFTD7CpA==","signatures":[{"sig":"MEUCIGoytJ2ydzQUQhtKDQKI/ZPW14MXz7/zpIW3k8QjNxaQAiEAha1p37pkimAtbEAMCGbza70JDICYyJMlXgLE8zdAh48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bbCRA9TVsSAnZWagAA9FYP/1ck+wKnMr8UF256I8z2\n9RFwT2CxfD3GNccITFck2yl9udhplq4PZXWpx9yLRN3MAa9plKqDrvk+WLjt\nUiLlKtZkK5ZQZxy9m1cCFipqNal8a/ZmrZBnOsXgRfJDgVuC7eac++GeDQeJ\nFxwJWIgHoqqsqxoxKMKIktEUHLk4RGmOeAu4dXk0GOo18V+eV3l3gRRff9sP\noa/jKs8a64du2V5kM2dq3fH4wqFURYVY/zZJifl7X7SRw63e2cuygU8JBj5F\nXPSsXlObjhkJA1s7EXJ63rQwgaaZBtesw+Kd0Igh0wlEswA+p+gGDQnzD8EN\nfRIhEBd8IffgVSMB2uElNHct2mygm5YwOfDyFVX2s6k6r6cW+pogGBBVX0+9\nHXJzabogj+cZrkmaz5TibwOeEaohguKaLQfxA+Vy6aa5WXz9ry7niPX/oBh6\n7n4YNiM+iO2moX3SHNhElsMvPHPvqoMfki8Xe6gjdL1Fqw39TA07oz6KeEWf\nR+aaznTOyBUeoQjgsgK7Q3ZY20ibuSGs+7lcKQqaErwyOLAaBEXNGVfQAIIa\npUr5wC0EK+vPvA+hKp/WoeUDUKqsqWsuCAEKE7263WBY46DwrszAQmb7kwin\nXVq+C8r2p8CNhYO/hATvo8nILaSyjA2kq+o13zn9btyx6NIzEvgn8hCPPI6x\nq7sO\r\n=MiPM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"29ba9297d5424f35d235c8ff87e393874c1b0a25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/rtl":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/shape":"14.0.0-canary.783f6fd5a.0","@material/theme":"14.0.0-canary.783f6fd5a.0","@material/button":"14.0.0-canary.783f6fd5a.0","@material/ripple":"14.0.0-canary.783f6fd5a.0","@material/tokens":"14.0.0-canary.783f6fd5a.0","@material/elevation":"14.0.0-canary.783f6fd5a.0","@material/typography":"14.0.0-canary.783f6fd5a.0","@material/feature-targeting":"14.0.0-canary.783f6fd5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.783f6fd5a.0_1637041882950_0.4119041845337259","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/banner","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.d57ec74c7.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"65a6b68792575a42e1d30d959e83f95940ea11d2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.d57ec74c7.0.tgz","fileCount":31,"integrity":"sha512-YImxMgjD23wULl+sbArr+uI7grc5cKq9b5x6F019U6JN6TsW16KNsSSyAIAr0uKZng3wo6PsdiJ3I+q9vdiuiw==","signatures":[{"sig":"MEUCIBbi4vBiFhT2dU/1HtI2OPryG8sn+zV1av9P8xJATb/gAiEAxeTE5Qxn/LpIcesBeM6Eq7OeeYCL1Dbw4HOcW2A6PjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9nWCRA9TVsSAnZWagAAN70P/05xG+udu9besg8p4qNx\nIS58NOcj/U5k5oSFvxK/TiUG29a/aERmN12AldosR3BCeYDkH5fIR/MYJe+U\n0qw+UjEX7n/oxXKD0px/Wlfif12RsXhE0qwkkeL/8PV3hMirmShG5kfrDqWc\nmuTgqoWlrn5lEwG8w9SEMK3nulr8Xjwf5akiu/mkUUa6hbfLn0aDfm7uRtYi\nH2WDaVkvkSetOjhAPE7IFNNnbRxe2LyWFYXSejfi2+iTcy36XLlAKnMMl9+C\nAmWdYKfH8abV3F5jRAG3C0tGoRv9IH/F93W/Uk/YKuZITXweFbSPN5Rdpibf\niIwv7h1L2Rh7K2WkTCxqxudz2Z1jaY9GKomeL4IXyjYw6TPYgHxcF9clfaT8\nowQJkijYzq888pKDv6r2eD27YyGo/mkArZ+oYKfj3ECCy6PkNeTyAlgklOTo\nd2vIV68xLfr9+wYScyS9xNNaxJTv32tlADv7ES0la1VU/jVmp8elb7+C++b5\nZY0A1QqzlxA5FZ6xdTJ1GyxoOWSYL4S8Z0bRCTSUiSzM7AsqQ3aOTYx4pkCO\nfMWyOpc3qD+CLRrD2HfugtNq5hR/mEZNWIY00BgMACqFuDTCFnz1IYTTZhay\nYe054IhgdUy4gbW6QdlbSSESJ7Jr6XFHGwxbkc1Ar7VWG/Mm9icbJ9TWAhrG\n3wSQ\r\n=Ug7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dbbd8db21de66e88b3e713faa99419e6b2f53c68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/rtl":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/shape":"14.0.0-canary.d57ec74c7.0","@material/theme":"14.0.0-canary.d57ec74c7.0","@material/button":"14.0.0-canary.d57ec74c7.0","@material/ripple":"14.0.0-canary.d57ec74c7.0","@material/tokens":"14.0.0-canary.d57ec74c7.0","@material/elevation":"14.0.0-canary.d57ec74c7.0","@material/typography":"14.0.0-canary.d57ec74c7.0","@material/feature-targeting":"14.0.0-canary.d57ec74c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.d57ec74c7.0_1637079510527_0.7559732017091794","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/banner","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.554c71829.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fd2ccfd51e18066ca2b324045b80dcc77524da7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.554c71829.0.tgz","fileCount":31,"integrity":"sha512-wG8iqcTCXRZBcpf+epNtChQ76UyeYxiTMQ4RzE99l65LjitBU19hWw8LUg/zvWYlgkYxgY4XU480mh5d2nye/Q==","signatures":[{"sig":"MEYCIQCYc2HlShON+bnlRgFbP2XJzo63IzsQMmPourtRtrKboAIhANo87BBRZyHQ8w/ik4TStkFrz5UWkEPl7RWT/oMPAv00","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pxCRA9TVsSAnZWagAACGMP/A9GCu/cuJaQrx+zl1dS\nlQr6iq0RHnTB6gi1sksMfIE4UrjnaLmklhWSy7cRIcWl+tiu1x2H1lY3KC80\nBFKo7pdR2CtR1PUuATuTuVtL7THzWgPCJR18Ow5vqTIk2k3D9muYZByoPJ7i\n6dmSW6lnIpdwl4GxBXtehpzBByZQqwY2Rn0eXytP2KuX3IW+ICM2ZMBjHirD\nxDTDAaa2/N3EraZEC0GTf1JewvvDcMcF1R+b0gqdaIDnnYXgKCX9zZKIO/dj\nbt7xhVUdHshdW3PaIJsUK0WZOV1Jy3wZldVwu/KWBjJDvKjX82P3rIG5xG4x\n4r9ZB7wzwqD6592JhbDDX7f3250RkZ4SH51uCZvgrdFkU6aJ4fgz+6Z0fft4\nqOWREroAPxz3wK0VBVO3uWr8js0Ix1i1EphFbH3ZYwXBQw0XCBU//L/HkJ4p\nBn4NgnififkJU+bbyU0HUWZx0gt8njEgeBcvCHDI04k+APTkK+OtSn9DehdA\ne3+TpAxxQgs+RtR9aLY92o4ALR/m1hf3F9qE7DTdEttJQOemFAvABolbShn1\nazpT/agb/GxO3LSRFaKX0MGV9FRdUEDMlmsHOHeZIDcJSLDrlnLyP+03O7a5\nTOWCd5MVXy3gL3BPO002qIJdGDHV/KqvA+Ih+JaFoGANKE1C8GFQ5cq6Mt9G\n9oyj\r\n=qVqW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"be0799ddf10fc34b46ab20d754f7ef73d9efbefa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/rtl":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/shape":"14.0.0-canary.554c71829.0","@material/theme":"14.0.0-canary.554c71829.0","@material/button":"14.0.0-canary.554c71829.0","@material/ripple":"14.0.0-canary.554c71829.0","@material/tokens":"14.0.0-canary.554c71829.0","@material/elevation":"14.0.0-canary.554c71829.0","@material/typography":"14.0.0-canary.554c71829.0","@material/feature-targeting":"14.0.0-canary.554c71829.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.554c71829.0_1637079665239_0.5814070132486373","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/banner","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.3ef470efe.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"888179acd00aa741585732eef1f00baa76566327","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.3ef470efe.0.tgz","fileCount":31,"integrity":"sha512-fJdcOUjiDdYeopnAxUeFrtDhTId5jJJMyxi8CY7R5Ig5LYkaNLffzm93LCMxMMWiWLVhotsCpRAbnuv5NpwjFg==","signatures":[{"sig":"MEUCIQDHTl+mqWjTGnx5yWeGZ3Nib0PcpNijdVKrDqnXu/4DFAIgTTnlZqBuj10IVRMICDwXgVWYIgTrIgIoDpBZ/AWN70A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9uPCRA9TVsSAnZWagAAwnEP/R4HbCKNi2lhEV9V6G7o\njcxjcGXoVha5lQul22CGeH2weY8D1qdBqjN7uLtedLKJGK8jAkHztA1pIDdN\ntE7o3Hgtya7prCNPAAl3sFs/0k7ZeuSqMPGS3UFjpMQzhbZe2cEGO+LAOMWw\npTQQWk1KNFoLPrLEhDQpaWDiWvGGXzMOYY4rWYFLQ61SaSJoiW5q/Wm8JJoT\natjMU/MIdyCxcTItAYAOot1Jgbj0yFPEFSrnc1cunERaR/5tPKOziAFGUjls\n9xILPXQrFwklnspWIoSOXfvvbz5XxtIf1dgujmFKL1yy9ekliyA9ok50Xofj\nIpdwrVV3tG8uXPXUWXF1twKwIS/eRo6QrUqEprtIGJbQMPNC8Y33fpQfT3Ci\nHnmrKkLFNPm9ohlQhmRU8a8UkDRK/+NnF0Tx3Z7Zd8kwfYBlT0ykOxUHdoBy\nUAkQ2Ft2Mg8FK+6qi8JnJ92mw/PYe07mxHTTeKu+8jKCyElR/nCrs7inypPk\niNGx3muF8S1K1uWweb3krKg4wTS/lyLVm559YOwqaVeykX2M8QErce7xmI3b\nxvzQBSPWJiwsBqdzGb3Bj9c4/S1LJRSMUKCqmG1t+7aWzgmbTx5FXoz0iqrv\nS4X7+U5XmARPwd9Gne0KXXuSnUzyzdSEA4LEZzQgBDbqDwn+pwpaHPZj7b+x\niB3W\r\n=dODU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"49429a109e0c13bb4f9d8fce0142cc5f142a6afd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/rtl":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/shape":"14.0.0-canary.3ef470efe.0","@material/theme":"14.0.0-canary.3ef470efe.0","@material/button":"14.0.0-canary.3ef470efe.0","@material/ripple":"14.0.0-canary.3ef470efe.0","@material/tokens":"14.0.0-canary.3ef470efe.0","@material/elevation":"14.0.0-canary.3ef470efe.0","@material/typography":"14.0.0-canary.3ef470efe.0","@material/feature-targeting":"14.0.0-canary.3ef470efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.3ef470efe.0_1637079951047_0.2919292055440128","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/banner","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.61a28b2b5.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"30af82a52b1f49c4c01856530080720cf3188874","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.61a28b2b5.0.tgz","fileCount":31,"integrity":"sha512-nG0S/y8DEYFGriHqvD2DLURYBqY7uu/gNBZ1JBi0PXa3CcLQns6XhYBy3UYlh+MzE84VmtYVFNWM4aypvb1VCQ==","signatures":[{"sig":"MEYCIQDKnPnxOfvi5q09Dq/LilF+EGhs9itzcI2TyD341AGTjAIhAPrCR14BWMdD1FrG8di4gijPSw8Ds31yIn/J3NVasyT3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFrCRA9TVsSAnZWagAAzlIP/1Z0uzb6R+xguzxVK/LD\nxFqK19kDeP4+5E0AlQub5UNnJjkmF8e890SQH12krGzQqWnFn6Kwyh2OwywB\njXLLr52b9Z9JhJ2Lspf7SRnRwSCSG3ZUTQe9nkQhtvtmDpcJK4ptaglA/VFY\nIpncEuo4Yj+snI3ku/oHzIcfTaF9PlJX8ProAWKxm3Plp01Z0jcpOcH1lReD\n04jrhF7+WBdR2eQc8JHon2GE1DZVdYNqpXaRjiYVcd5JViLOQr4XXIKilUDv\nF6tRG49n40GSQUqo/Yq1Mn2zl9/MpNkYUwHWedU9ucrHTsiWSAelBFZHtOwy\nOkLmar94vkTh5KrHE78RRBGiPc5ZmJTBWXGn3Gb1auaSJDq4kqZ2u1/A8M61\nH1F1U8+Snt9Q8sPo1MLziR87sFD/JCGWOWNzmIq32U+S0oCiCGHUF03uXnNS\nxsBBhS3GIDBljWuobzHOYJFd90RI1anZTv6XN7ox1M/ECmkDoseUMj1o/Tpk\nTqrn34nycOoL8ni5vD/DI6UPB1FmeLh08NIBB5wA7RhJcD+KPqTeVcd2tJ6A\n2RROUveVwKVF1Usq0cGBbwtWgEX5jZP4S8OIUGGH+QzNT8e1V4DSm0evoEdd\n8aXFQskVQOcU1e/v5Fm1AmRUpGL6TJNIQHP1apiUDXXy8Vl15DvBZtMZy3bN\nIapN\r\n=zK1C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"314b98aa8ec5a35ba8a45706765f4cd7496dd803","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/rtl":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/shape":"14.0.0-canary.61a28b2b5.0","@material/theme":"14.0.0-canary.61a28b2b5.0","@material/button":"14.0.0-canary.61a28b2b5.0","@material/ripple":"14.0.0-canary.61a28b2b5.0","@material/tokens":"14.0.0-canary.61a28b2b5.0","@material/elevation":"14.0.0-canary.61a28b2b5.0","@material/typography":"14.0.0-canary.61a28b2b5.0","@material/feature-targeting":"14.0.0-canary.61a28b2b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.61a28b2b5.0_1637175659245_0.9806620672932354","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/banner","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.fae6c652d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c7baf2590578f8bd1fe76ec814211d84119c9154","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.fae6c652d.0.tgz","fileCount":31,"integrity":"sha512-Pd6REOHFhK3TaU6GbHJnM6VUzEYfsAoklMXzsnKuopLo/n8UUWgOVmzhk4I685fL4c1w1pjMtlpPYcBAboFZvg==","signatures":[{"sig":"MEQCIBa+S+59KeOcf/U+jMEkJ/MO7FNqSNRZnJFYJXmu33zkAiB5pFRfGaQ5rb8/Gt051pHOhRkwx0poKGF1QL+xzeiZBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6wCRA9TVsSAnZWagAAltsQAJnoPbRfBPiuUruqM8GN\noJwGLe/MDa3ezA+kZRY/Tpul8sjZbF+G9NFoSxfKyWBvkHg98shtdA1IaHhb\nviCjutLnyTN9hHB4MbR+LYIVoAhKZsd/OtHMA7qUL5+gn1KZXn2s9+kTyR73\nhcNBCH8fBMrFPrWyFoNe3ITuGHvduOxSNpb2TH1N7Ie9BBAUVaC2itlAiKK+\nxm5l8FIBG16uxWQduE/IHzjEczRzClDPqXl+bAHYDdJae6W7e0J4jDQ9MWUH\nSKxpHFCbinlGrxkHunErruZQC2kRc2mkc4KDr5SCAxWvTiIi152AePqzEr6E\nBOBqD/kg7uIUgrHSHRrra7/iStho9Kx8p0CeYu4pN6t6U+s4m44qY1jcJ93/\nRCUgrLd1J9jWBOJWuH/ey9MWB+P3dexI/+dIojTa+1sgAwU8Y5aCsaYMh80n\njvZlLDRowitBRr3NX18T992RVmikFSDV3c5UqPdAuyyi9GGqAF3DZtRhvNsM\n9dyClfZm4vKFbwXaA7UB0cq6sMnP2WrMUYtrqjO+lMb0aCTi0Y/A6g/2x7R0\n0SSkX9SjHQlF4ll3MRGGmAOO218aR4EKl66rikAwbOBmOYKhvKBQUe8s94Gm\nV1fyQ09IUoYWVHh1vAmgQTA1jETmc6z/q2EYoJnJPNStrEMho6aSXAKiU5ug\n92kL\r\n=NO9L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d27c4bc9db002b9009b70cb7437b393ce59b9992","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/rtl":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/shape":"14.0.0-canary.fae6c652d.0","@material/theme":"14.0.0-canary.fae6c652d.0","@material/button":"14.0.0-canary.fae6c652d.0","@material/ripple":"14.0.0-canary.fae6c652d.0","@material/tokens":"14.0.0-canary.fae6c652d.0","@material/elevation":"14.0.0-canary.fae6c652d.0","@material/typography":"14.0.0-canary.fae6c652d.0","@material/feature-targeting":"14.0.0-canary.fae6c652d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.fae6c652d.0_1637252783946_0.812382762073997","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/banner","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.978a3b5bb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21c9b6f8349c448844f8d99b9f44daa7dd7c88b4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.978a3b5bb.0.tgz","fileCount":31,"integrity":"sha512-zxDf3TzUXAmtJ9y5y/iad6d86OW2jUdiOMPHKhqxktQZBvEEpL9s1cLM1vSXTPy/rgecynkUtuVwNSVcfByT4g==","signatures":[{"sig":"MEUCIQDoGhnbio453vquV2tvsTzKh+8NjjGkvCkRLkEGqhcwaAIgMv/glim2IwN4vrICOppk9ZJP3KWdGVKDMWWrjtxhoqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/3JCRA9TVsSAnZWagAAjQIQAITL2Xi5jdrWwcPiTmPJ\n+vweNPAU01wY24IS9k2rYnuWFk83+9rIyNqalIJ37X2nbH3DT5Lf3VQKnsYH\nni/i4RfoXz342Tthb2z29WLOXFzAqR8YClwfvKDmosHKeQvu9GWiDBvGRlpl\nB76RGw7OwVg6Y8QvDW8yQCq/cQhDxeqPhJbhR5AlaYiX3G280LQvevdCA2XE\n7n0w+zWkYLq8siLPPh5TOVGEHPM9MVa8KwLrsbuu1l99f+Wl9JhcAkmXU8yN\ny78WlF2Ia7p6gjIBfA8A8+odkU1XZfxyHNTvO6TZF6E89Jk0ezJhBsZ1jmNh\n93q2CK+FKJgB1WUv12pO56zWD5roV9dAoX1CtmSp0h7TKGvz5iW6WyybwjMU\nu3R32ecMRLXgnf1Z7tyZ3R1+2xWMeojisqaLRxpwhjgIyHPj12xPnCFo2kZq\n+yQAvB0wGmuNGUY1EVnx1Ivtj0rR6Xgw1SRuso22LSbIPrF1XGVZpxwjc3hS\n3vdrOLvC9wgOxgF7TurJziXok50ML1nL1MZU64ovuCI4zKXYF1H12wctmtwV\ncUv9Z8mpJWG4qnyYtUM26dMsDTpPH6XOeFgNRRUyj8lLj8GGEPsLGMI6YFSI\nlLhuaQiawrLfOFwE5zFUGcIZXiSInRq5s3AV/G/T+jrdO91ZOeXEwIlM8OJS\ni9rZ\r\n=p/DA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0d21a3472967f5ff791662e03961fb034a9227d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/rtl":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/shape":"14.0.0-canary.978a3b5bb.0","@material/theme":"14.0.0-canary.978a3b5bb.0","@material/button":"14.0.0-canary.978a3b5bb.0","@material/ripple":"14.0.0-canary.978a3b5bb.0","@material/tokens":"14.0.0-canary.978a3b5bb.0","@material/elevation":"14.0.0-canary.978a3b5bb.0","@material/typography":"14.0.0-canary.978a3b5bb.0","@material/feature-targeting":"14.0.0-canary.978a3b5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.978a3b5bb.0_1637350857575_0.4171229153117628","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/banner","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.e6f43cf44.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d49b39b87f0c6a919cd57f020f63ef4777101ba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.e6f43cf44.0.tgz","fileCount":31,"integrity":"sha512-JiPq/IXz2jmncHDV6YRPa5m3iIkfGM0sJNXj9q+dFDoOOParSkKeA77VsEELRIOJ/A7ZpimPsFqvH6nwpidcbg==","signatures":[{"sig":"MEYCIQCfM01tqKklojoF2uZRJi8OC+/a641pKpVKutshxA9QjgIhAMOJ8MA3Gf5PmvnCX1Ym1B1d/u6dhUp/jdZMOlSF0x4C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9UsCRA9TVsSAnZWagAA0jAP/16Fcp99ANVtDYObZZBJ\nuESyD2pkSDpOmRQH9tTnhXYxM1fUFw6N2Kn+gnYkxf9Zrrt1eYfNSe+w2elI\n48nmWPlDD+K+GGuMcYzhSBX9mhKv5rjrQ4mg387VDeQr5E9MMtO8LHhr7aoV\nyZ+3+TLlUGmazOqC+rqOxSRXAQb7/7vCys+6iPp+VJXYlBxgbzqqUdJmBJwQ\nn213+OREtpYPuUoeR37GCamZ646KmPN0doUD2cyyfOzQwbCfhCeT+L+cc5jK\n9fjXtlevy+54mTIZs+P5XkhBmrgOzFz8dCBCrcm4OARP2EPx9Lt4Hkjydq+i\nfEOeNxnfK6l4j/h1SnSyyzqq6d3JxdA9vvaXdSjpVgJWawsgjweb0QdE24hP\nhRmrEFwa1oqV9cyr5pTS6hyGWKJ8IFfAx/tOacKAw73kRSTfkWnmM1qTyIyw\nPjHDUX6DcvltT3kYwcUntU7rTdFKylVVUIoC6hq+7M1Uq3+sthUXLr0Bh8Bi\n7cEMc1cao5suX8VZlW2E5ND1OY5fj0LODGqInfXODg8zuUC8VQSC0zpEDALg\ndYDdF3VbHYWMqwqf5Ds/NwyLXBnx55k7MrKRLELPFS2EtUmVssxj7Bfy5RkV\nEGIY8CqqrFDQArYKMClqI4DC9pcseyuyWIM9Fd1oYORHYr4HbCOg83iu+OsH\nvFIG\r\n=SBdk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"36200e7acad50905888cd5fbe17075663a96ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/rtl":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/shape":"14.0.0-canary.e6f43cf44.0","@material/theme":"14.0.0-canary.e6f43cf44.0","@material/button":"14.0.0-canary.e6f43cf44.0","@material/ripple":"14.0.0-canary.e6f43cf44.0","@material/tokens":"14.0.0-canary.e6f43cf44.0","@material/elevation":"14.0.0-canary.e6f43cf44.0","@material/typography":"14.0.0-canary.e6f43cf44.0","@material/feature-targeting":"14.0.0-canary.e6f43cf44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.e6f43cf44.0_1637602604437_0.6494149439459951","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/banner","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.39cf14bc3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"993adff28bb3275e721b744d29405ad76ac0d7f7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.39cf14bc3.0.tgz","fileCount":31,"integrity":"sha512-CUAmFmrSJdmMpQkRMJoP1nHXdhMkM7LdhwyzQI6ErAzdFjRpsKDCLODMeFrIEJg95HzU+hmP4QAqsUK8YYbreA==","signatures":[{"sig":"MEUCIAX9W+vImDGxd1JZ53SIF7io/5X883SQtm2K92+FJsubAiEAtH8VMHmlWu/cMHseqYgFLKvo3OO/UG3dpyQev4ogsR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJjCRA9TVsSAnZWagAA6QYP/3pBjgRCsJgHUJ+H+TRh\nQhXIpMKqUZuxEiy2GwoP3RbZRy7N3+ezOG+/TLqolwhkY9jlqGey+GiG4y2t\n+006HIha+U4tCO2/sgJtWjoLYk5ksrfiFBD/43uFM7PSBtJIE+CSmcmWSnHR\nMQVP6aYcslZxk1oWHfyZYA1jwYRRlHqwxUtsYTuF3bzT+PK7Ym5PjcnsgT+/\nXqHdDoQZqnLv5BSSnB2PaEZkG45XaLOb+7M+Pb8wA1WGkj6VtmgzDeO7vGzW\n129ZSo33y3jP+V91ulydSqBOe5ZaTCEA0huAcjvJP9fsAx2hiOb3Xr//xx3o\nDZFLzC/LlOKam+JuLt3sL1nLZlDkQYh+bgM/TyD4d5zBrEtGbU93XieGy1Kq\nsmjydCbdJxeRXUkHGzRe0k6Tg1gxEm11/xaXXnY9cF4q0MbYIXc3BoD1uZkg\ndvCztFtxvgkq41o7ELHkhL9f40qGuXc4qtNTsniqd5ThY5XzeBi+7lr3eV3X\nzC+NSdzKH99r81ZQ6KUkYJ5LZVaWT+WAL0W+ffa4lI8x9DnQ7jLLtr+dbWnl\nea9ZrRs+ZCYXuIEygT5roDYbbedpEd1DkfXyJ9xb6fwqqB88Nr/MKc21DtS6\nYn6FroW5hpPy+mvjHpQtAjuyj+7sPBJyRvGuaoLQFPOy6WF217qUOJ3VerNm\n1ojl\r\n=bFWt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7a4dadfef1095fc344517a394b0286ecb59751dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/rtl":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/shape":"14.0.0-canary.39cf14bc3.0","@material/theme":"14.0.0-canary.39cf14bc3.0","@material/button":"14.0.0-canary.39cf14bc3.0","@material/ripple":"14.0.0-canary.39cf14bc3.0","@material/tokens":"14.0.0-canary.39cf14bc3.0","@material/elevation":"14.0.0-canary.39cf14bc3.0","@material/typography":"14.0.0-canary.39cf14bc3.0","@material/feature-targeting":"14.0.0-canary.39cf14bc3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.39cf14bc3.0_1637622370898_0.07445123721269353","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/banner","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.93134d453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d2fe8d2147c9361a8c5c2c16832a91d7062db5e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.93134d453.0.tgz","fileCount":31,"integrity":"sha512-5OegP9j4ENBoz3BVkjplkgl8znKIn8PPb60Zf/nnQNAaHoygSoTLeDZTIFMqTKF1HYMyGqPeocKCHhQEOaK6vQ==","signatures":[{"sig":"MEUCIA2v/tAPccowkHvhv410V0c1CVQLsYgLnvivckny/FYxAiEAk9w22tyTl1FyXlf3EXkO8yttQ6IvpMSYmejaALx29MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQuDCRA9TVsSAnZWagAAtZsP+gIo25k6e3eFpN0tuIJ6\n0r7eQUBqgHDmgNhNB6Uq+AJkls9GPBp5SDQKbdWU9ra16oBBsz7cDWhHxOk7\ny/tjgSW832sKepchza2H9C5oCEw52OPhyVjL47Mldh4pvHuP8uD1NPIirXPR\nCRk9p73YEm3fZEAPQzEv00QgF/NVxlnyw4tHQMVAWmhi80DxFTlDoQ+LeLNq\ngSGymc0aoC2WkVqX+HrW6gEKw0HjAvMBYFgt3hEJFLtABmKjIePUpZh/FBQQ\nQcxkt/frFwlLRiwjmHallR/1fgY2J3AlcgtdLjGoFPPhlrXETVxiP28t+DZu\nJoPTwKoDVKmoGlRlly/ODcM0+YoJnQiD6DeooOwfuZfcYstt+iclzPRg1R7H\nvNCjMkPNJmk2TlLER6FRCj5eATtPtkaxQAmwtoiqNzBwYQC4dMPAVITK1Rr7\np+iggfuE0Zij1P79bWeyo5QFyvUAtBSo23+jVq8LZWvKXfc59tB52jmIjHDE\ntfo6PlSRBBMLvs3gXqBY/Ds748MqO1vAS++k66i3gMG9KW/LwV9L0V4xMVZw\nB38jORlqFZEjlv8p5xj0drD5lx3TXTUVTdQdOfKNHADmQ1fGLPjGJQ6V+1mR\nLfqRB2qCumnLuCTHiLVXT8H54E6rRljwmHBP+6eSYISyLnrH8+HSwHLZkV18\ndrtY\r\n=nYEH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f37d4e46e027a3258621f6950e12796013661afc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/rtl":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/shape":"14.0.0-canary.93134d453.0","@material/theme":"14.0.0-canary.93134d453.0","@material/button":"14.0.0-canary.93134d453.0","@material/ripple":"14.0.0-canary.93134d453.0","@material/tokens":"14.0.0-canary.93134d453.0","@material/elevation":"14.0.0-canary.93134d453.0","@material/typography":"14.0.0-canary.93134d453.0","@material/feature-targeting":"14.0.0-canary.93134d453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.93134d453.0_1637682051611_0.9487091987259768","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/banner","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.bbd11268f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc1d299f3d336fce55d9ba8d98e9f330d7586a94","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.bbd11268f.0.tgz","fileCount":31,"integrity":"sha512-L7LMOSph/GvWGZL12jJnZuGdehvS3uDljqaX0ALGF34fU4dQxDiRlSFPV5JSNSpfPDhtvpRCDluiWgiWmc/Lhg==","signatures":[{"sig":"MEQCIHp+XkVIuVg5mj7S8nTm7TUDEZQxdPcmWxgSw+GILtzDAiB5i/xAxjfw7qAS44Kct6CX5u1Ng9u7ssQ+ZAsoM7MB0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWxKCRA9TVsSAnZWagAA4vcP/iT/MSoBezD3TKKQr2s8\nGtBwykFFRa+bOKA2K5xiu1SN4XNwJo5Ivk7yEsY+9ZkVdT22hvoPHmVbXkWv\nU+9lw+gYZuoBZL67VFF2IbQpFp13XI1XF2LrCcD39ZjXC6JcB2y0NPopAtSH\nC1CK+4bYeJOHGZaQey3VD60RMhegWn1q+F/Jeop3fnJxHM+tNHjqkLieq/BE\naurc7LwYhiENIOgMM6ipMwLE00SQwnU2lL+aCDrASHIwuLM26cq3JIsPxw/r\nkvBqu1lVeCVHYltVoLzNlI7cxHqzWgoevnWpeMvE0rYw0g0qw6/bjeJlQeso\nFx91Jgm3xPwc2dEHmg8RCXzNq60JBkU1wzakTCDJXaO70X12N+IvknKyQQlm\nhP5gcDi2MqYwgR+YenbYSNwU4CnLL9k9r594JUUrP0Uf5bKVKWv3YUNQdxyN\ntRbGDemk07zyRuj/JbT41QwK/dA4dMWsVto+7dwCB8YNYy+ZBVTwIbdeKDqt\nQrCakpzceIzKPcQO2UVQLiYU4Zpp2kdEjQGXKIAp64aQ6xsbLxkM9lvu4cG2\nMuInD2k+4uA/u5wEAs035aWX/FFB7nh75zzm74mHyS3bsHfSPEeaGbF0FIuJ\nW4ydTky2/TJNZsOc2ZztBYyLAbjqS/QPLsO8Gy259CZGerzSe+yJ6J175pYj\nCl3d\r\n=FyAN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"46484a77ecd0c6d7b548301f4e92325ffc4f8010","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/rtl":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/shape":"14.0.0-canary.bbd11268f.0","@material/theme":"14.0.0-canary.bbd11268f.0","@material/button":"14.0.0-canary.bbd11268f.0","@material/ripple":"14.0.0-canary.bbd11268f.0","@material/tokens":"14.0.0-canary.bbd11268f.0","@material/elevation":"14.0.0-canary.bbd11268f.0","@material/typography":"14.0.0-canary.bbd11268f.0","@material/feature-targeting":"14.0.0-canary.bbd11268f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.bbd11268f.0_1637706826127_0.9810246216266285","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/banner","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.3db9c4d3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"568d5b52f73510bd3754d00b315ec03f4cf1cd6d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":31,"integrity":"sha512-xlR41JJIsPHffGevTrklblpHLb6fPuH6x0jv778rY/HqLp/ActNoXNYO0iFTmqJcvT5pbGU7mezOK5ztIJlg8A==","signatures":[{"sig":"MEYCIQDYjPX3dFTmXrNGK2ZBtm9he7yVPs36uM1+1aZVr7tjiQIhANMOoMKSPBCJ6vRdOzDChE0QsbU2GO53ynUm9MLCUpY4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlyPCRA9TVsSAnZWagAARBUP/3wH7cxrsLQ+tAF+xYNx\n98PUf+ZRcl3FXE11xUXb3stDOHZ9ZrVTkES76ByWJMFchHpndpdp1ldfxy+m\ndytkFA4mCUZIdHO/yyVzxwaWGmXtlCHm+l0xHYBLfwcdFVyS9z6b8HYfrHME\n6aAKC68kFEAegl07Ag+cmuoj/LWJpQlLrDmKxj83iOOWwUHsOb3lTpciXx9m\nAmcfuHf+id+AFda853cTUKd2NUZIzPYO8+WhJUgC9tZ+4HYkmh9N9B7geA2S\nwM29svsqDoNvZJ7owyOQyMWKNWZ10SnINxAmAfvQegAobxiRByHY7S0jyE7v\n9HqdwILdXbanphfaSOHZKaOL6X/5yXfj2sKSDS+ZMPAqQEtgcov8I+ClaD3z\nI/RglTIgAFm5tRjCb+IccBXxy79ZMXUe6XeMtIGDTUr6WGeFpjRflOQOdpRk\nFO3VVcOJiKOzUvH3J7M4ejy+Y8TgeF3BFUal2FPONdzeB8w1yDdA8GIeUvPQ\nzuIF3dD6vSjpbbBAEX+nsu8+LgtTyhzI/2TOWgIcqaKlAOxq2KlWk32XEuDG\n2LIkbaXFTCF7dBG3eVnsfa3J1mSWDStL0HRblvJJR5qaUyA0PGQWYjX5AU2t\nBGbiNkjBye9KuLk3ISUihccmm5YdbUw1CNQOnWt6VkTr7ksE8H1C3mLwGKhW\n6DNz\r\n=yZOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"61e9de8c9bd6ef83a5f0949cf53ce4a8b689f158","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/rtl":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/shape":"14.0.0-canary.3db9c4d3d.0","@material/theme":"14.0.0-canary.3db9c4d3d.0","@material/button":"14.0.0-canary.3db9c4d3d.0","@material/ripple":"14.0.0-canary.3db9c4d3d.0","@material/tokens":"14.0.0-canary.3db9c4d3d.0","@material/elevation":"14.0.0-canary.3db9c4d3d.0","@material/typography":"14.0.0-canary.3db9c4d3d.0","@material/feature-targeting":"14.0.0-canary.3db9c4d3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.3db9c4d3d.0_1637768335309_0.5235861207507992","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/banner","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.78305b6d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7ff300c752d4bfb5337e66d7cb2994e4d26edf04","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.78305b6d5.0.tgz","fileCount":31,"integrity":"sha512-aT4kGPEKwknLAPYwksyi1t99Ikxc+N1bqTThUFSSNt/zeaxQc/zvWQDuqNpE5UmXCqNExeCPFrDLxd/zG4hghA==","signatures":[{"sig":"MEUCIQCfNoYSEG+fRHRATf2JS6NKIQkHJtcRECzpOPX2LCa6kgIgT5opj/j7GNNzNtgUDrIsT1RNBWsSVEYlQzIBk1gmKXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfoCRA9TVsSAnZWagAA1hMQAKHxLAoY3Yzg6KUuaMD6\najPIUv8BCICtBVleEMRlUqK9y6OFBo45EVInb4I50Eg9lTELYotfM2Bx1W60\nQrOzYoDrlHTRujEK/OaKAkqJHsi0RBkN3bghBP95IeP1vvXkrETvXzuuY/Vy\n2ZcO2jiE9DAF4JQ96OTQIDHkyzvRwtpuRRk4/OacjrS+CCR/brfLrTCcjNUR\nQs15vNsgnHTxuIMqbMnWdkuDS4M+ruc5sWE26jaSjtrb8j8yHfJKihX3BinD\n5eax03PHt1yA3KIl2yKhr7FW9jhhBhTh8futN+s4XDLhzs/vnyyiHVnSeYz7\nHR81ux7T0JMM3vXBem6+GY2RtvFs1RL01+8leWa3bJ+9AmQSY/vrAY/PVIeQ\nTFYB2EPyJ24sGv+gDbNn3wJINuvzUpmre/s0iYMaV1g6xTl3O2kDKi9ILEyF\ns4oqLeToie3NjEyj3HvqrURNmkw6/lPjFUNc5vcSwQXhGXp1norMAhO0QmLh\naDAcFRg0JP9VMscQXLCkzp5xSgM0ABZ+UHcCUdX94uKF5KHK8aftYIM2PB5z\nEgA4Ty86PBTHapQMwPPEWydn4z5L8TJxdmFTCu23tC0pkCgANgTcPbGhw8Iv\nEpXB71I2QGG0l6lNMvJZF7s0wNx48n4YakeDRn5Z6jfzjYLf1veUIqqSER80\nd6LT\r\n=jhrO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2885de69eab36903fec52b85e7001eb561624eff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/rtl":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/shape":"14.0.0-canary.78305b6d5.0","@material/theme":"14.0.0-canary.78305b6d5.0","@material/button":"14.0.0-canary.78305b6d5.0","@material/ripple":"14.0.0-canary.78305b6d5.0","@material/tokens":"14.0.0-canary.78305b6d5.0","@material/elevation":"14.0.0-canary.78305b6d5.0","@material/typography":"14.0.0-canary.78305b6d5.0","@material/feature-targeting":"14.0.0-canary.78305b6d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.78305b6d5.0_1637783527953_0.6208343646217076","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/banner","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.43d08ba77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a11186347f3e65fa3f49e769c6b3de87943ef0f7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.43d08ba77.0.tgz","fileCount":31,"integrity":"sha512-ANdx0mCfGUPDqvZjbB9SLa7BSm38QO6PoJ9zb1EUfRWuQYhWKLe5IXsZutIbLEjr5gAokOqXKp26EIwCK01kWA==","signatures":[{"sig":"MEQCID2+z3MHfz6pXr8erhAxQtIe9ycnQrsOHZAbF/4y/mR7AiAEZRasyS49eFVqGoPnqzV1vdje4pJsGnjOmC6exh5DoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxdCRA9TVsSAnZWagAAKpMQAJ50gES00qke9wxSXCjh\nG/fRXn+W1Pz4bdhWNRoTnTpzmwUvzdd3vh7IzlOkIuQTYXi3n4o2wHiKdITW\nYPETAwvX8TBfqlTxuLysypneOlXwsYIJzDQNu76ATKBjxv9mj/73Rk6eCRyR\n1ya93ONfHn3g1O1vAGVPu4DsG+mhmLPMoVm+9V/xczEEu2QYKVBxM3pY/F5a\nsr4IOaALODVdUcgMzYUdAefNAGpK5NBuitWPxuNsNl2KVqwkEP02dbBALktI\nTM4zQL0+gsbpxifss33a5JLfw/xYRjUsiBMCJlOSndSev05HpEQsmU8C6Zir\ncQDGIMrW56XLUtFidoWUCn7OloTGVwriTWgj69Q07SIYbPaJCy96AOliLj0D\nxrEjEGKlKeh9hl17LOtewLb0ouW0+kDxljwVs3rFH4pDzzX3/u7CqT2XaaWR\n2ngDutjnDBhUsDYPD6ugJOGKXFfnpDet5r0gNUCUz9xJol46Mkd42evl44op\nJO1zhmIGxhS/oAPi2HBk2rShByJQsECdL1LaWhODro/MWjp9Ph11kM98JuZg\naIHAIgyYMqdxauK2eJXZ9HfTfpONsgqgACVECS94DWMz/ZOgDfUKnuDpppdT\nI+72ig8GKgF+qjtdvHntR6AR8jaZBS6lTf4m1dTogB+U5lApTIZ+f0+tmkWO\nRjgV\r\n=oIjA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d1929fe60ad2c7ba249562f1c1702898df8f04d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/rtl":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/shape":"14.0.0-canary.43d08ba77.0","@material/theme":"14.0.0-canary.43d08ba77.0","@material/button":"14.0.0-canary.43d08ba77.0","@material/ripple":"14.0.0-canary.43d08ba77.0","@material/tokens":"14.0.0-canary.43d08ba77.0","@material/elevation":"14.0.0-canary.43d08ba77.0","@material/typography":"14.0.0-canary.43d08ba77.0","@material/feature-targeting":"14.0.0-canary.43d08ba77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.43d08ba77.0_1638313052676_0.11755722337326513","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/banner","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.17a072535.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40bd8a6aae95864fd3450516400357e20d79ece3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.17a072535.0.tgz","fileCount":31,"integrity":"sha512-Wz2igMMWRWnT4pVJf2HjYqjkKil7yIDV83doxJLO9LW7x74it2hEd5wQ5668/4Cs4ow35MKYKsRlkDseZEjodg==","signatures":[{"sig":"MEUCICX34Ltmk5lubL/5QHyN33LSMxG+AuagjWCvcmkX5RIlAiEAwDhRGLxPsmTVH4LmT3MuN7g+t4Z00hx63Y0C6H5VL34=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQs/CRA9TVsSAnZWagAAahUP/jz5OUEh0xHDJMRDlVog\nUCGCk4SmS8CnyXFmQ+bgXTUwhlJ7KvxDWzyDpmmjOvU9xCOPX7aNwwYiVr/m\nX3ykUgLFGDsIlcIJPtFqi7ywmhl9kdOPZvZPvTZ6dpiXTwymFKKvJ1BbH3z/\nhHNfJUXtgZUs8m5Ypttjo6onvYR44jo38BfXMUdNIlu8rL8rFWxcgtSH78sN\naKQftQOxNGc5kPvbAQ+s49rG4/L5Aj8B4WfE8/uIWIkOzNG1mpKCkE37EMgz\nGtIZKE2BGVnZTWrQWyVLELZ2TxuZtZ3a4ja+FtgfHTEdLz2mDGulRqkiC3CB\nZxksYjvy4IZCvN2E4dDolcg5iCfZBUDym/DEOlxU05Yjx3idafOMcmys4ulK\ncPJFst7Zm6LeAZTXjrLH/jZnPNKiPeCN37A3zkpqGPWUgihWGc1JRqILdWCt\nC3gXATbuO31ZkIrJ9g9RjtPQXgSLIBgU/nJUHBlvRDYowrWBUGpHg85I4+Gp\nwVMy3bRLpAOCi0clUcFqUpoO0FvnShNxCApvRa/qRIKnqzEnglXiCGz43DOh\n9oAIyXLmXvbNRPB4o9IxC+uMajpimXuslNZ+ObQvRbpOtajxFY39FGDSxGCz\nmTiwHqGYpR+mA1guzUFG226OkY61U6LHd3QsFiyjhXeLDF+yQasUFaXPYapt\ndTSJ\r\n=tnXC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"317cda93b55159038a12575fec5c35e9ff5460a6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/rtl":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/shape":"14.0.0-canary.17a072535.0","@material/theme":"14.0.0-canary.17a072535.0","@material/button":"14.0.0-canary.17a072535.0","@material/ripple":"14.0.0-canary.17a072535.0","@material/tokens":"14.0.0-canary.17a072535.0","@material/elevation":"14.0.0-canary.17a072535.0","@material/typography":"14.0.0-canary.17a072535.0","@material/feature-targeting":"14.0.0-canary.17a072535.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.17a072535.0_1638468415336_0.9518488992443734","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/banner","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.5d809696c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f4d3d44f637ca240b071bbb36309af1edf9486e9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.5d809696c.0.tgz","fileCount":31,"integrity":"sha512-f6G5d4bcvBggOMzOv2Tau8Zx4VE4EBe+Kdfj0yZDs/U4hvfF76IC7Stcgg+GRgm/qBIz2unPqPp6CmDaiBY/RA==","signatures":[{"sig":"MEQCIATmSD2wpvleikClvn1gXuu8HtFnLwdR0foG4h6R5ViJAiA1hruFAXBPnVgslZhzLO3Z0GLu+IrkbtQGHwuUtqbVKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO9cCRA9TVsSAnZWagAAjmAP+QCkC0Ao5BcoIHVAzVxs\n6yPT2QzKeuzgPdu5G1rGaED9EHCkC+nSx8Vnc85tBooN0vnvjwef/H1Pksp6\nwTWkQx2AJflewXqkGIErZDcHjf4r5oAUfw3N4kHNI6AiR5o5KWPHFWhvYTwe\n1gigkNqQyoGaP+gfOrD2E5lUGtCjDtvwBoJV7uUT6WFU9ysEHBlCRkB1eIdb\nbVI4LSslvlRNZubXSfo+paLHFR/56v03HYTV+KwqBiXirDlJw9GD5wQ6ufwA\na6YhGBpMbreoOJHSySHY71dchjonPOak13TgTSwhKS6nNYW/JkIDNW47Eg3c\nKFjVf2GFEeKwa2w89msBh8C/a1d2hs6WG7uR/1ZR2lYA3x1pH2CdfRwv/8RA\ncyOSnK6iKpFiQwC8RKRlDenKNynxoEfKMfr4XVSwk3lOdkYMt02spida9s+m\nn7g6IktVdFd7jg5hFa8C9JRZzXukw80nz62vB9U+BIUOGc+bahcXOoft6pvZ\nUZQULDNOOc8P3UvECbjTelXavKUe/bdT0fHLgMeDr8HeCgB1WLXqfbW+flLl\nRLhNpVN/phhSe79pGJOxhUzMJthlYvegkkSyxzkhTPbj6J7FaMbt1XkKYwAB\n3SkyHKjWE0qkAmcOEF1NPPZv/NS4RmHmQgwHbcGmgwiLP4kQd9DZ+ZvfJDd8\nRhJC\r\n=YoLH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"955aa3e4252f722f096ceef387b285a197760b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/rtl":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/shape":"14.0.0-canary.5d809696c.0","@material/theme":"14.0.0-canary.5d809696c.0","@material/button":"14.0.0-canary.5d809696c.0","@material/ripple":"14.0.0-canary.5d809696c.0","@material/tokens":"14.0.0-canary.5d809696c.0","@material/elevation":"14.0.0-canary.5d809696c.0","@material/typography":"14.0.0-canary.5d809696c.0","@material/feature-targeting":"14.0.0-canary.5d809696c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.5d809696c.0_1638985564352_0.8835596818022666","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/banner","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.b6510c8c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"72e29bf26d39d2acb6302d4c5dde4f9dda46c05e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.b6510c8c1.0.tgz","fileCount":31,"integrity":"sha512-uo/3WfzmsHU9+aGa6axyNcwl5Je4KuaOBYJUlwfKJJeqW7XhjPIiBFX6pd0rQ+gYpuenpl2/2upNAqFdTZ/Jbw==","signatures":[{"sig":"MEYCIQDWoYqT6T66CTXkI47s0Yu17DmUtkRCXy8ICVobf2hWHgIhAMd8akFnyGgxzyWc79/93/voeimhh/NdqOKRbwKMld10","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPSJCRA9TVsSAnZWagAA5b4P/0m9pJhOja5pmfZu/i81\nWRxG8cIg4z2cckWmzTBHsFJPewWHpgVc0p+5n5Jocw91ho1jhk6VzKGz8Xtd\n6C5eD0e8KG+rmb0Oj+7YVGo0hLvoeNF3Azm1eLU6m/Hiv87Eak/V+xqVFAHf\nir7rwq5vqNlK3a+SxlQvavE3RYNKNgWRutoIF462GFuo3twwr7JiZ9fXRW9c\nHjuUh6OO9NBDgl3ZOiXactUfnld4vMSbdG0CNnvpSz5jK6qg0VY1+DQ5PtH/\ne5zloT/JuDMoa5zMgC9NjHafs/WOs0utwqk4eTBEv9nVRTvwvGcU5D1JFqN+\nN5FEhWVLy+6Jkt5Ov9m6zvLpsFqERK07NSyvTl5GYCuq3dZPPMpPvTwfrZSR\nUCgvLI6IvkYS6qkBQQImQVq3Cf2s4CciL1iaO+UFxWnIgSGTRSgU4PU0MX1b\nXT2L6SoiV1B80yg2w4RL9TXNoPeTe3MRLEKxYdEPTzX/odKmBnm8U0vkJszB\nkuQ56+Z7xmc8sBBoxsBi8QktjSJ9MiwM+j31WyhJ23fpErE4vUkXKqAmNjWo\nKYXq1//A0ngILmajHwDsrmAGNHLc/Qbw2gi57J63zCiXvZsLgWicBXJCvttc\nTqlPnr6ENM0YjnVYg3ZJBIed5vVshG24qIwCXjAUCmnem/mZK9Uj2Py8ch6c\n4l7/\r\n=JABh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7b9b6695d55be857206c67de94ea9741aa48bb38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/rtl":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/shape":"14.0.0-canary.b6510c8c1.0","@material/theme":"14.0.0-canary.b6510c8c1.0","@material/button":"14.0.0-canary.b6510c8c1.0","@material/ripple":"14.0.0-canary.b6510c8c1.0","@material/tokens":"14.0.0-canary.b6510c8c1.0","@material/elevation":"14.0.0-canary.b6510c8c1.0","@material/typography":"14.0.0-canary.b6510c8c1.0","@material/feature-targeting":"14.0.0-canary.b6510c8c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.b6510c8c1.0_1638986889481_0.4435355780585575","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/banner","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.f460e23da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"927ddf60659186903d8d89d2746fb8ab8a518b2e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.f460e23da.0.tgz","fileCount":31,"integrity":"sha512-da+u/+ked1+OOpBxROJLWGpXnjLPYm2gAzhe/HpC74KengaS4IdpIKEIgMo4h2ioSQAwFFMlA8JobpU/wPokJA==","signatures":[{"sig":"MEUCIAofsWWBwVUv8ZdJqSVQDNpP50hgkqGf8ir13gQygwiZAiEA8KcIn4192WHqBjoHk+wlBdXlJ0gpeBbUq7XUhqoPHkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3HACRA9TVsSAnZWagAA4WgP/03kn+jrimA43TDTJGTR\n1Au9S0TzQUen6Iepmirt2rEmGiTCzQnOQxr/C4f3yUU+OVspBBCY9ovFh4uA\n9XPth6zkJL2GBvrqTjctDSxkX5onnp8mHzgfUUU1d5AAglgddlf/WFw4OzfQ\ncaLXeDroR6z95nYnDqN4A5yePuGpN5spgBoal1fZfz8huZfAdWgHQkoapbcI\nGWcN6OCeGHbzphgT7PG+u56CMxIAdah94F7uoefSdhjupnohVepmUjb+Ljpk\n0sgtn1UdVwr5bk/a9xqAl/zkI/dvZ6LpdQbToFJ1t206ZAq2u2z1fJrF3fzB\nPCVXR08rtrNFR7ynnmM7SZ+clWWX+yfiOhP3LsgGfAnJ0/02paYq8Gm9239V\nwFV1aMpLA4DUbso/tG8+jM5OHFyjS+9x8Iig4K/mhvk9pRhT8hQ030TmkKgW\nTyjMbo6hOpaNToco397krUngzau+vmSz0ZBWYaecZR3MrM2evDS3YwE81vxN\nJhKwv8GK73V6YFXnJc7/jReXkeoftL1n7ykNHpn0ak0KbMniv9HD+sXFckCy\nYtrA9ZLlLUyOmhS1zj9hni2KMJz0hMU8rEEgPzPMBeI6FlWDMybM2MJCmRhi\nh5AfF2eZYmJuZAJCSxPnE+c/JJXxxh/8nciEBfbM7Y9Iad+8z+k5QfZmjLDa\nhU0F\r\n=mu0h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6d994090cf732fc4f1fb93f91d64e265cada1b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/rtl":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/shape":"14.0.0-canary.f460e23da.0","@material/theme":"14.0.0-canary.f460e23da.0","@material/button":"14.0.0-canary.f460e23da.0","@material/ripple":"14.0.0-canary.f460e23da.0","@material/tokens":"14.0.0-canary.f460e23da.0","@material/elevation":"14.0.0-canary.f460e23da.0","@material/typography":"14.0.0-canary.f460e23da.0","@material/feature-targeting":"14.0.0-canary.f460e23da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.f460e23da.0_1639150016543_0.5689782133270251","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/banner","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.7d8ea4624.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47225ab582f733fe1b370524e74ac50c566695ee","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.7d8ea4624.0.tgz","fileCount":31,"integrity":"sha512-P4R2eyYpTalfOUJMZIAv3y4fJtCWryf8DNH+pu1iy9humDkQuCdeNqoBs+oOGJCGUegFnKB4Coyth306ooXkDg==","signatures":[{"sig":"MEUCIBJL1l7e+JPg6LIjlEeOx/XsViXTjxXWGdxqqHET9jCMAiEAxZeiGVXkKXnpn12lmNweHfF2LarEtBHOe75CxHordEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rqCRA9TVsSAnZWagAAHk4P/3fF5Q4myvWgeVn+h0SX\nj9yAbESLErPeX2AfW5aYwsMQ+RF6Aw0cpEUiQ4b1KoM2QaTYO/T5JW9wzGxm\njKJxxg+xOQtdtPFBEs+PM9dFDNEQbDxHr5nX2qJv6QypVr5X7ARV2wqYsYQp\naJcedQjnQ/+1XzFF5v6I1FXoDMhJ1q0p0cKV2XNV1WBwu4+DA3pqqWIltxYI\nxtLzCsqIm11d26FfW7dLD6YzhZvTaEJJpZGntKjx7OhDkRKG9YvTDPmGV3Hl\nubrU0aw/jb8/B77hnWSjHRSlHAGC6JY8i+AmjgzYdh99NKPt0lEVUQbSvrKV\nCbzqbUyKF8fEdRsBNjQxREArmGEpwGpRWDQdc5msyT7lg9cNuHSzDVPdIMwS\nuYQbTEO4riYFLwzBoimeRMu9TgbuUBt4/czW3RnDN2vrkhJzhVuDiAESK+xL\n9Aw44BRkBpG3NOhnq7nD6rs98rU/7PT+Td70n8lWmgDv5eyWIfKl6jwdFxWD\nFbghBFs9K34ZlmdbCYfuljJ/gtmmwGCrBfv65JAhBD+Wy0+oKVaJpLq/d6ro\nOJ0EhHhlz5X7NS6gAVPAHlSqpOLPcimxWitGXSzl3aj6l401Wenz3gG6ksSL\n0NGDXLwQ7SF6vcjnPAzakNfjcGi8TUpiijdsQjMK8qQ8YA75Fjjc80Pv2xIA\neKyg\r\n=fffI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c5733baaefa11aaca3bd6f32fb2ac29c20894738","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/rtl":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/shape":"14.0.0-canary.7d8ea4624.0","@material/theme":"14.0.0-canary.7d8ea4624.0","@material/button":"14.0.0-canary.7d8ea4624.0","@material/ripple":"14.0.0-canary.7d8ea4624.0","@material/tokens":"14.0.0-canary.7d8ea4624.0","@material/elevation":"14.0.0-canary.7d8ea4624.0","@material/typography":"14.0.0-canary.7d8ea4624.0","@material/feature-targeting":"14.0.0-canary.7d8ea4624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.7d8ea4624.0_1639164650603_0.9693408975797502","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/banner","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.8fffcb5dd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb544af09cb4e696912eee654fb1322046796410","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":31,"integrity":"sha512-P/XsR+mQOHpuf9WK2HilZiHzS26szQCEn1lBNv11RKDrwFmK7yk6yaxchKumnvafAm3DYVY3kpbmjs02FqT/Vw==","signatures":[{"sig":"MEUCIQChbBlCaqOj76KPykQ5NyO6Q39omLk6A/Y4ZYtQNDG62gIgFNw9rj/26ega3Z6QwuDoQpLufxMYMJWx8092agD/D5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFxYCRA9TVsSAnZWagAAL4wQAKQqC+tcAtVtN869LV9r\nE5dIad9yRKgtivH8Ug8449tMXBDaPRjss0nl0isiXHyaVFA2BlSNGwYmo4CS\nletONuto9M05PWU/j1FfjzSqA/wMvskxlgjMUtzd54KnEmuyt4iS3IMc/nRX\nnTchZ6MsTWbNrNm5KA4ciBM8IWobipWJMb2h3eN3mNK1eSvzSwQ5iZUW9Iyb\nqaJsuVGZAUCv527jSIwmxraTUeDp6EI7McZY7XzLZifSCSOdvTq4rXn7hdmq\nTgT1RT5yFG/6it4OXOAqKajMtmhlXZqeGtCniJL2m/9VY6pcWMS+HZQF9ByH\ni+TIXOtLI/4noBYjJrQgCnsQFMmrGTHqiHZIq1Ao9TLKVMUCRuqFK3XVdPaH\nYjQPlAIJ/AaGFlno/8Mrh3kaU/gO0c0UejpVKA3dQ3nABlelIBiVtUxFQJLL\nKcy+RY61b039/IdzUYebE+ZrvIsz8dIZCfgo1qGN5N59hbj9iJoQWWSseJLj\njSl57yAQZD+ExZTbJVhtmqI8eru5iG+SIJEBQs/Zmff9xHB6ZiSnwynIDkTB\npmLtIbkY+FMZyGAs5nD7zydE+PmuVFUd7rDdcRATFhQkzLN+8eebD8SlVotX\nttsTmNENPI4lODmYfV/1OUYKyBmiubhFz6ssd81Kq9VnN6GJZDssZtpqSF4L\nuDoV\r\n=2RHE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ed22e4daefd7bb5e95668ab484a3a4a65793437f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/rtl":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/shape":"14.0.0-canary.8fffcb5dd.0","@material/theme":"14.0.0-canary.8fffcb5dd.0","@material/button":"14.0.0-canary.8fffcb5dd.0","@material/ripple":"14.0.0-canary.8fffcb5dd.0","@material/tokens":"14.0.0-canary.8fffcb5dd.0","@material/elevation":"14.0.0-canary.8fffcb5dd.0","@material/typography":"14.0.0-canary.8fffcb5dd.0","@material/feature-targeting":"14.0.0-canary.8fffcb5dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.8fffcb5dd.0_1639472215956_0.022525545006319092","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/banner","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.21e1cb9be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb18e812fc2258fb6a8692c8c482d962102f82d0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.21e1cb9be.0.tgz","fileCount":31,"integrity":"sha512-t9VZRDg+Er1kbPrRkIA2Q7r4put2CsK8s2HrekJsYIv29Nbh8pO9RT+NS7wi+0dxG0n8faWWOY78ZVAcOpl4pQ==","signatures":[{"sig":"MEUCIQDycbJMDajUSFZLOVhV5X6FVo9lRd/n1TGR6EYNPGSI4QIgeZT0Hud0F6SrLdWP65rJcyW5SuWQhx+VNZpI3cVPsM8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPNtCRA9TVsSAnZWagAA+d0P/1hoG1tg19j+uGzP3nBl\nhMXvsX7PCYuLfpcwiHR/LznM2jbzotO92NWehKBDugitVeBAINGkJaOXQoQw\nlsGrPEkXPCmxFR6V7UP3ACYj0gUKFHXD3zUNORC2x8pZbw29YuOxx3yNHKt7\nTqUwfMnglnSsB9rTm1UV3scTOkxVSqu4zLJuItdMmp48T9xiJNLL0Ddq87pU\nRG/xzTG9Gp0U2Skrr48GvXMuJDtJdtkGLobJx0TLOHNZslA1fLNGSzv17PcT\nBAveNNY7PEPNk1Skx9E/u3oZo+F6Oi9bkdJCGdQ+3lzqic6jkI63ZUczyAGK\nzIvNPhuRHNgRMt9lvjCTJTVP4wzOjjBqJx16ZOojayZZn9D82Uh0LaHd/5qa\nfczCDY9w3MtHGquHIt76GkbvTUdEoAM7OYQ3Ev+TAhon/6Ke2VD5AvKk99Zh\nlFMb1huiTXH2jawJx56qKfV5Rl++7fTtliqb2LKrmuFk2lkr7TcC1wQyw8KC\niYRyftvPWAjfqulNbW/F99Mj/mgsSsC+HFJTJu2V/KWpsmEyzH884+W5+u6m\nWP5QIuDw4teHRZSRKIeTWceOrZXBoR1BOn/O3jnT8ssQ2JAIVYWQLtTkHhYJ\nfSFJ+zjT+82iGIxcVQso9Je9shBvZRkRuDnTXyvTHcgnX9h9dnJZSf1XXQp7\ny5dI\r\n=WSf3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"091bafb203d13305d394af0cb6817b1bf05c64af","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/rtl":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/shape":"14.0.0-canary.21e1cb9be.0","@material/theme":"14.0.0-canary.21e1cb9be.0","@material/button":"14.0.0-canary.21e1cb9be.0","@material/ripple":"14.0.0-canary.21e1cb9be.0","@material/tokens":"14.0.0-canary.21e1cb9be.0","@material/elevation":"14.0.0-canary.21e1cb9be.0","@material/typography":"14.0.0-canary.21e1cb9be.0","@material/feature-targeting":"14.0.0-canary.21e1cb9be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.21e1cb9be.0_1639510892823_0.04300832773329821","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/banner","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.ba78e8724.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43cc9a8620bc830eb2eeb688c1df4c282c23cf78","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.ba78e8724.0.tgz","fileCount":31,"integrity":"sha512-4ApaVN0ZpjdkGBijxZtoVRjZR/QzJEOqShDxTfQN3JPRoz7tsUzYChHX0lZ1yQxFp2ZePLVIjgp6BIfWEK+Lag==","signatures":[{"sig":"MEQCIA1Zt7Qs+KAyu1i5evZLVWG/WK7tiCk8NpB+7VHz4xiMAiAslyqjyTToJg9RrqseTkeHBxyn/Hmn3i3XWgdok/pn5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumjHCRA9TVsSAnZWagAAroYP/R41y5E3MGSXuu80EjiH\nRwdYxy+7q4OAm88DMncm038wn5xqGVMVGiC8L6PKMRO3QBGAwuVEZt9G+Ca1\n5dRlJ6jDJLJLL1gr6BwD4pj8ecbriJqE80JPXyTxBy+vcCC/G8TPUVC0yuSw\njEQdGbIkiiPrBxEROrg4kUl7J90yNuDxCOD8Md0KqiBHZoc+9Panm8E60qTj\nBGrIHZJuTVtWgE+/OHAMKAkQ6wHBkIH4TsHhxxFDz4Z20u+ew/qOWb8ZOTkM\nkxxnHWC8HWyqQ3m2NDWL/81qIuT3bExojyo34Wsj+JjVFx51d1os1WuJJvt7\nJrTFHN+gXHM8j5F2kE4JoKaryLooYhndXvoRjBQUikZ3itPosxH5E3aFPuvL\nw8AFFHTM3sH16G5ERcE4EObMtPosUasf0sVfuRELKYTRBjHaHKcHB46Ngy4V\nmKG7O+i8ArPf1w956DzNC3btYz+Twl/a+PNT43/pQPVr0pcctZGQ+IcESkRT\nN6YHnk0mzMAFiREWhl3MQhgcxyZ5Bi54d8P1jHscicMEX3VloGO1xrxrkTwO\nWqeUP4MWnt0atONoH371GGIMFPIhA8s3MFqH3FOXM+ISy0saTXzDEnLNZQGc\nM/2i7uGScqO1q5BftLBJHnFPqsbMlFhJ5W0ycHy5/RibYpwFkKhfMumUxeAX\nXFyF\r\n=ATc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"396b66ccff73478ac662f95bc36087e71ae8d980","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/rtl":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/shape":"14.0.0-canary.ba78e8724.0","@material/theme":"14.0.0-canary.ba78e8724.0","@material/button":"14.0.0-canary.ba78e8724.0","@material/ripple":"14.0.0-canary.ba78e8724.0","@material/tokens":"14.0.0-canary.ba78e8724.0","@material/elevation":"14.0.0-canary.ba78e8724.0","@material/typography":"14.0.0-canary.ba78e8724.0","@material/feature-targeting":"14.0.0-canary.ba78e8724.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.ba78e8724.0_1639606470831_0.32916073929723977","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/banner","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.e3e073c00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb7a6ae7c9b463d64a3b6606d17d43cb8f3db8c2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.e3e073c00.0.tgz","fileCount":31,"integrity":"sha512-SCJtxo8CcsPU1ZYrxyKjq/yTtd14KCeJSi3ZhiZRRhQGctnvlAuIpMEEWDFxeh7ohxdKgk6qodSuQNPz1t97Rw==","signatures":[{"sig":"MEYCIQDx9rLbjSyC30LEJ6tyv3+yEypESDwbPRNmwoSjky+YeQIhANyUTtS3D0Q5XzpENWsDrPP45+9A9UCl9QUOTJrOY52b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPF6CRA9TVsSAnZWagAApYAP/RQD+JbLtpTH0ykfDgxq\n9RKijw8Kozq5WUw9WQMz89CqczHUUA+E1Bz0Q0w8W6KRs0xrCNsUUa1hmtUY\n+8YIk+6JZF8fACWb8+6e5oqZihJvmPxIsxeqqSFvI1xYkdgJdFVijnHUT4zW\ncRZ21RROKoxBiJ6lGb1sp8qL6ipLzmaloUhQfdZD+eb0mczRi65HCoSOqzQX\n8bUiHBZFi6TvE/iYsv+bS1Cyvc2Z1F3KHAdpcp9lSEkMWax9nz07L2Nl1G/5\nyNbBqAImNLySGdCCMaIASIfWsSxwHfUjYBlFsataEHnXXTfTnctLiFtJSD7V\neQm4jBp+XxO3UlCzTEbiBNfJenlRgEWeskmeDTq1LG30LVC9q5A+aWZb6itL\ntzd1diJcCxGgtWjiFzoD+EnVTNC/2vJ4UlFnIfEf+OiFRs4E0xFpNBvMFRql\nKik/Adkovmjc0/C5z5TactEWSBMrcbrc0wKPwTNhfbU6ES2sLmz5vi7i0CKx\nEAH/E220W3TPNMJ/Lph+c2UNj//8r4xWA/67gZGxzJePCYWfdklzlU6JCil9\n0vLmcQeiVD4mw14DKC1W+uKLBYEtKq2RUTch/a6FTRbkVPx2UWKGbMuyk6Sq\nb0psW4aDnCiMNNqsEytNiKF2nt9TKObheeYnem/4aFZeqlknuNo4SfTsqsWF\ntPgr\r\n=orm6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6ed0d4833cc10e9b5406989bcd66b072aaa259d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/rtl":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/shape":"14.0.0-canary.e3e073c00.0","@material/theme":"14.0.0-canary.e3e073c00.0","@material/button":"14.0.0-canary.e3e073c00.0","@material/ripple":"14.0.0-canary.e3e073c00.0","@material/tokens":"14.0.0-canary.e3e073c00.0","@material/elevation":"14.0.0-canary.e3e073c00.0","@material/typography":"14.0.0-canary.e3e073c00.0","@material/feature-targeting":"14.0.0-canary.e3e073c00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.e3e073c00.0_1640034681823_0.050515443075427546","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/banner","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.3366a71d7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"344bee7607501193b3721f32b6c57743188a6a7e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.3366a71d7.0.tgz","fileCount":31,"integrity":"sha512-9modnhAwbOVZ0bgsFFdXba1VGhEacEt/e4WTJhsweDOt+tMlmOcUd4WNMqyCn9Bu8Udmyea1hizP2eQ6DaFhjQ==","signatures":[{"sig":"MEUCIQDlXP+r5GsrNUpc2/vtlivot48mJWotmhNNHSW0MXaAegIgHQO8OQMPgCB6/CKcqsO+yyDqslVw5AmIeTcDfKjvjxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxs7CRA9TVsSAnZWagAAlPwP/0NvHFH13xvdAt1eqJrV\nyvYvpLrmhantBJyYVZRsMJAcq1Jkv+kJD1PrdTvEJiN8/D2sGNVU9ys6UWjS\nsdNpR49ZN0A39lsaBFk5pdTkn7frpR5zrmbHEmn/q/qR/3TH6Vg31Up5MSPx\nvaQ8pUBH32oF8pIykSpaDGYAeQIaZY12JEU5VtFkyb7jY29bJVPqMP8vS3sQ\ndXJqGLfDjk/sOpC2WE4wZ1Oj2GOi8nGRnTiamGbEmzM5xUdi/HM0/OXmEQtd\nAm7qq4LiBmyY/pMO1DOwofVR43xYLmWnqdbIyoitHQDwdHI2YfFMNicWj4/b\nL3S19ezZ2wqt8Cts7kDKJpTSTRHn0x5XO3xwwLOShUMOm5Zc1nyQzGmTQpd1\n0hF6DONfRngaQECGfD1ieUvdf9OFtJoWr9p2VDfQGjVjCfoWj6D7y7vsdoiR\n0FqWaQGoJmvPBIx7EEeoshUoB1zne+zxi/lSqnjsTVlHOEVzsyWZHCQ4lLmh\n3uADfARHRYnnuCWYHoxUYJf+yP2eLVnJsinZSnJU2VuHAu7crUZTOD8oxJfl\nxdBFIGayv7DhrsjI5zRxxXfs88XRllD1TXjZ9pnst2yu8juLg5mvbuwvGHpi\ngP1eij2eWMSZJaMXv4D3y8Zew9fwLG70HqvuRRJotSjpfl9wYcg2ljAIeqZH\nMRyj\r\n=TNYf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"36f8040c2829cecee06f5c8f52e08e9cabc9004c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/rtl":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/shape":"14.0.0-canary.3366a71d7.0","@material/theme":"14.0.0-canary.3366a71d7.0","@material/button":"14.0.0-canary.3366a71d7.0","@material/ripple":"14.0.0-canary.3366a71d7.0","@material/tokens":"14.0.0-canary.3366a71d7.0","@material/elevation":"14.0.0-canary.3366a71d7.0","@material/typography":"14.0.0-canary.3366a71d7.0","@material/feature-targeting":"14.0.0-canary.3366a71d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.3366a71d7.0_1640176443256_0.47035570761181944","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/banner","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.c047f7c19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"53740c984fafa33985d56e3b954e5efef02215b0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.c047f7c19.0.tgz","fileCount":31,"integrity":"sha512-3J2ayEe57wlBcfVLxHA5zxDWHrvaZaohm/sAU+0hpIv/X44zAyhbYLubpFR9DLVEhP+CcAESGBHgseHHFeEXdQ==","signatures":[{"sig":"MEQCIClmH/NYyeB1dhfHcjQPKXsR+wjH/f5Cdsg4Hu7ANCC9AiBZRFRpNzkWOpywRSoltmMB/skKcb1GA/kaDjOx5/8FQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cukCRA9TVsSAnZWagAAs0oP/1bM8I7lslRpn9RchPtP\nyJ+vBusZBK5SumD0BYlq7wRmNWYwN6TmAEPmaOz0kdj6+wbgOCE1A6FyFX/Y\ncu0JoAobraD7XWMYxjHxVb7kMhYZd9/f1+m2GcAYi6qC7zZPbiHsaNzqae7W\nWs5k78NsdQpS0WzjPesxHqfviuqqfIwi4JzUMbNHAqs63wUhBJ06vg3v8RXd\nDUH85JQleYQZg6YZ9VWULlbB0B1GyRKs3DcQ7dJE43qcenJLHTULnc2xje3m\nHFETgdxHMHgtvYnTMkMXNZhAay7sKHHwG9qm/WPQ7SQDMwtjUzzU2slLDBUL\nDS+b20JkNJzeYCfGS+Y5aFaS2UAsZmqj9OlxYTWCcxHzbDpbzsNUIpC0OrbX\nqqm7lFypgJC4Ke2FzvvghuxucldQRrwuuDrw2fpt/HGSvP7nKvjhtipyEpsA\n1uQwgG0WI/jz81LuMN11rU16ERkImbdfi+1Jw+q4g/xxtJ2tLmD+3mbhBG0Y\nEae7dPmCVaxRnTRfA/FSeGNrDS/QIBJmwwJtd8Rio//tFUXXhDI0bC8UJ9N5\nf6zJjcKbu2duXqpkWDYcFGAJ3repS8+UnNdjQ5zlpbNCJeX1+YHASsZ2RTYz\nL2eavBtAjzFiV7mViO5lTZ2SoTawIAe1/SRryGL+20ULN0jdG4iGhK0vVzMH\nggEr\r\n=0KUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f89c0e152ba1bb64d7b262b279d38cf5d93dd788","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/rtl":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/shape":"14.0.0-canary.c047f7c19.0","@material/theme":"14.0.0-canary.c047f7c19.0","@material/button":"14.0.0-canary.c047f7c19.0","@material/ripple":"14.0.0-canary.c047f7c19.0","@material/tokens":"14.0.0-canary.c047f7c19.0","@material/elevation":"14.0.0-canary.c047f7c19.0","@material/typography":"14.0.0-canary.c047f7c19.0","@material/feature-targeting":"14.0.0-canary.c047f7c19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.c047f7c19.0_1641401251956_0.09850418060332955","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/banner","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.05db65ec0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f7242662c81f554466d9cdfa5b7e669e36b1292","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.05db65ec0.0.tgz","fileCount":31,"integrity":"sha512-NG7WGjg8121uVazUTO7EFSFQIYevrBfnY31ZppAJgsEQGCQgJy257vLYR9Mwo2RSwjQ1jgAq6DtMvFd1vD6wcg==","signatures":[{"sig":"MEQCIG/uKEousl/woh+8iM8+hXxO3PL+bZ9auvfOTvFEz7W1AiA4ycnIPgNnRm7MzJYSBrHIr5MjX1aPKOLpt6+S+U1ghA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yPBCRA9TVsSAnZWagAAHI4P/26GEPmt6kV1lIZ9iKRl\n23xx/4hK38LbyzJOtty3Rlbxzxd1WX5rm/lkaVKsdfGJ8iopUi/w/FVVOJNF\nvxkAOXiNqcub3J3nxkYOo42DFdcDUlb4Q6jugGkW10f88L+oCvMTOSwBUaay\neYEx3giUnTEn9Nbk3GDTSaURkkziK4sqenqWIJNLAXRNugYjBLGpOdLE5HS/\nKTGrFvprX4X3fYAygQmxyNYsJtAMTeGBxzdVouXr4Zw5xmcHd62O3QKqU9XN\nuGcKWNHHC5hQk/5syWh8k8ItV1NcNbAE27qmNjmD8zppMJJiRKFAXI40sbHE\nBZ+xiTMANaN5BOmcRYgegqJ4GEBg/8/FC6qAqX9LwxaWhAC4r+2a412+0/UG\nQhHokMIBUrcwm2E2kG7ENqwHmLvL0i60+F9Fmgv1DD41GCKYLrvxD04BWOBj\nxGao9U8QPEI8n1vFJat7OmdtVa/MVtso9PKA8ghE9Pqo434njbWkWToiYla4\nAmlqszphf94ZSuTNXtKOTtQ3HekQ08+RTke3eHPTsqK6+3EgLwJWuedsdrO4\n1fwdft2MADVsnWTNFFPF40MZr8xa1KikoV27ASVllMgXQaMhZSU33FB3LqlJ\nD11Wmx346hcx8zY4tbcZC2YXYMDDltXMT6FdRSeAiOxbhP3rdQFbbyJe5Rtg\ng+xG\r\n=N+dn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4ee3c4fadb795ccabc127e2a968744c5bed23d38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/rtl":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/shape":"14.0.0-canary.05db65ec0.0","@material/theme":"14.0.0-canary.05db65ec0.0","@material/button":"14.0.0-canary.05db65ec0.0","@material/ripple":"14.0.0-canary.05db65ec0.0","@material/tokens":"14.0.0-canary.05db65ec0.0","@material/elevation":"14.0.0-canary.05db65ec0.0","@material/typography":"14.0.0-canary.05db65ec0.0","@material/feature-targeting":"14.0.0-canary.05db65ec0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.05db65ec0.0_1641489345400_0.7994774407189771","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/banner","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.6ca8b8f85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3758bafa2450505b17d2fc7e0c0166cdb3a100ab","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":31,"integrity":"sha512-+QX4SncCk+29+Ah2TiAJjIOwv0fTEw07Eg8PbWWis/XskFbRxsFy0Acmiozmiz4CNDouG1ikrQBLx/wP51W8Vg==","signatures":[{"sig":"MEQCIHXCbMLxXkAQUHG5vitGKHIcUuwz/GXT3wDtBDzxmuakAiB2wR4HqCEBolEV858jWFWgjOe1nDCJBvKrBlpRSzJ+EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQuCRA9TVsSAnZWagAAFscP/3L4cvRVHxfHE7PdNyxG\np65ftBvgjMUt5DnQzCl9n+Uf/E+wHlPpef2j3NQu17gywfQLXnr+iZNUId7p\nIkD+uQo1D+/usTr6z1NGmNFTl8DpWp4T5B05izhfx1DToLOxuyfZYqQHqCC6\nr3yED0v8NMVg8ibszkdwiuI/8Tg1rh9nJXVaP/Odpa1fydI8IlMhxQyOy+5p\ngZpKTM4yVZMgnvaeh98YRIZ+ejY0ptn+XUiuYwoV0F3glNcb2fYy7Q/KLwFR\nAFFF12XyNUXB8vPsIAcJbBtc0Y50dEbThz4Lu8nRE4eX1SFy/mHtfELHS1Ir\nosi7r3JcX2NE8hS9QJhg4YGkkrGGrW5O2Zq8iG9q8GxPCHacC3eKA5F+7osH\nc2bhkV6La22GrdRnVQ96Le/5S7KFtzzQr5AKmAkN7HDqZdjAfnzI4Qm22KxO\n21zwqmZQVP/FoGv29wROnMpYn2Z28xXrPz9Rl74X52zareZta+heyYp1x24J\nvbFZ325AQTjLB0BjD0L0iEeL4TlsAjYg48x3KYc2GFfXysEFUKlLa7ytZwIU\nly98O2plWhp6+xURyPzEy+vrxhDzg57Zi7PBc2kwzHka88eoyREXhXI/B+at\nfb6YPs0vBnBb+mwOjVLmG1GVmrHDYnEXWbsiBbgX5HsvjhmSo23tCO73qhWd\nV5Y5\r\n=lqoh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b3237bcea052016fff824f201904a358e2cbeeaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/rtl":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/shape":"14.0.0-canary.6ca8b8f85.0","@material/theme":"14.0.0-canary.6ca8b8f85.0","@material/button":"14.0.0-canary.6ca8b8f85.0","@material/ripple":"14.0.0-canary.6ca8b8f85.0","@material/tokens":"14.0.0-canary.6ca8b8f85.0","@material/elevation":"14.0.0-canary.6ca8b8f85.0","@material/typography":"14.0.0-canary.6ca8b8f85.0","@material/feature-targeting":"14.0.0-canary.6ca8b8f85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.6ca8b8f85.0_1641571374196_0.8325482603738257","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/banner","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.173ee7a7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba3349ceb757fbf809b5966501aa99a2b6757fbe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.173ee7a7a.0.tgz","fileCount":31,"integrity":"sha512-aEmjR1DvAhz/MXvArqbKnQ6CRpt8HsrXyzVMUztN1+qQYcqxbSqEFbp5NcDdayEnRSZaE8ZZSVHo7d9A2K631w==","signatures":[{"sig":"MEQCICeKHm9M1TcO6Z329JzoAJQtskjE2J1fDm5W634oUak5AiB2gj9Y+mZPwCib8VRV9mKAmWcqfN09QkrqQJLtxtNiAg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GUgCRA9TVsSAnZWagAA6iEP/0JQHYFGq2B4FVcvU/T6\nSG0gVO85yEqPJhL3t34FLZYlLdBjmDkxqfnLJT1DcDucVWo8fyRTnF9cuZqo\nDfQEqbxzn9r5+1XtCpNTUqPM5x6nfIw0Am5knVQBL3gruIEG5pOxrKnTUfq7\nT+g/zosdapweqqc3nhIh8Zo/Q4t3O66cAEAHzbTM0EdRazR99G5399lsfB5L\nmouCEIPnzqYQX9rN6IZkc+3kSbnmDbl9zWzGAzTLWf4eV8lDbIPoj6LMllXJ\nomVh/T2pUC8s2uODFwMNPmD9j0H4bgDtio66JYGofvLTtlQNpPWmJwvWFzvI\neAVe4RD2HGYckx7iBQk78Bi9GhUoGwbRI8Xy1WBWfLtWoZtwaFEBpbUQIRQO\n8VCFBWoij1siSl/HVvMZYD1n+PUzwC+oZaehsJTgXZU5ijiPHEtdakHDM0HP\nL8w4TL7LeIKkahCQL//YzZp4jpRME43VNWArIedyOcxgwPu6WbphiXC+FGDM\njjv9nfDGkE+R12hSx5qUzdgFquBPRGhYJFDTSwyWu7wSzS/asGPgCs0F1YOf\nZJ2N2wQpF2bKnZWk/eeUoGur4dRhs+y9DIvJ/y2yMNQGV2cehN4br6srNlYZ\nBscafyov+cr7dsBwawHlgFQ3wVS2RAvx60yy4/7naIHcfG8Rw9L5aIVi/21f\n/9Qj\r\n=hDK/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f034f9d63d29784b9608c7c25ea586070efbd27a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/rtl":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/shape":"14.0.0-canary.173ee7a7a.0","@material/theme":"14.0.0-canary.173ee7a7a.0","@material/button":"14.0.0-canary.173ee7a7a.0","@material/ripple":"14.0.0-canary.173ee7a7a.0","@material/tokens":"14.0.0-canary.173ee7a7a.0","@material/elevation":"14.0.0-canary.173ee7a7a.0","@material/typography":"14.0.0-canary.173ee7a7a.0","@material/feature-targeting":"14.0.0-canary.173ee7a7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.173ee7a7a.0_1641833759890_0.39132931322692777","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/banner","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.b704e4dfc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5e6a23760a4c19285dfa284b122ec704e3b90193","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.b704e4dfc.0.tgz","fileCount":31,"integrity":"sha512-SKkCYQcOzaKdWAmlKBnHjnptarhkrrvxOOTkakTKJejRSxgxCLGVW1qdbnIrsJRanA5WenLRrE8aZs5xnDau3Q==","signatures":[{"sig":"MEQCIGK1Ondnc0GXPES5N4U7n6gzC1MQDiE+WGFLuNqkZvubAiABFT1lTs64rJnR0GyNuMCVGuJVxCZ+cVU7ouWhoirJXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":455240,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3Hw4CRA9TVsSAnZWagAAOBAP/1y362u8QxP2Rc6lVids\nxcufou44TuIDbyS7U/6Mjo7/VN/opSm1f4RJLfRpsTEVDLHPVskohnY8URN/\nMdJKhqTY9H3w3T/h4YtMdTIYWHrnXjeo6JSopunS1ov0uR5wLynYdXZnK7gK\n1jw6GtkJPcBmP6g5ioX+uYs/bUaFgGpE5TqUJqduMNyvdPCUoU6M4XJDh4hL\nka6S6vYPn3AHFfAEv3j5gZbipWdQr4CfHbyE88Yamp8UKNo8itdq54RfcCiP\nZVPEjMw+6p/gjG6bxCX53G6g3ujWw7dILfGz/uQkHFTo6rN1dwZDojfRvHli\ndgEA4/XKoJpX0uGp050xCieRu9WnxeK2/EtRnDGla0TeFV2vwjY30590yJqy\nC31toPacE8fQaxMz5z+a+rTacW1XRYzoD4Qt3TT1dL4J0Sx6AGxZIGhFbPZy\nWEHTBIOvUEfrfwLzi/E3GvWhfDjMA7Mx6SYSM1ndn5M+uCRJb/cqUXKvHc5/\nBB9mNf8GScMd7xSPUhc7ROPMGcBznCJN9zuzKr+G0s/geQpSGfxY1CnQFEOh\nuYBCv41Etp40MHGmkGyjKSnG7QQdwWhI6rwOVikcquHZKeKrc37OLxUZRqaf\nNYzZm9vdwUJWwCTUf3awwO4JmmhdPSed379zHj668ylqPQAN0PyNINSe9sAL\nm7om\r\n=NJDe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7aa8626c10b7e0fe9826c55e7f08c4ab0aa493bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/rtl":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/shape":"14.0.0-canary.b704e4dfc.0","@material/theme":"14.0.0-canary.b704e4dfc.0","@material/button":"14.0.0-canary.b704e4dfc.0","@material/ripple":"14.0.0-canary.b704e4dfc.0","@material/tokens":"14.0.0-canary.b704e4dfc.0","@material/elevation":"14.0.0-canary.b704e4dfc.0","@material/typography":"14.0.0-canary.b704e4dfc.0","@material/feature-targeting":"14.0.0-canary.b704e4dfc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.b704e4dfc.0_1641839672605_0.48472955912920845","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/banner","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.c14e977ee.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d434d9b87c244df025272ea6d0ca550b11d03117","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.c14e977ee.0.tgz","fileCount":31,"integrity":"sha512-yK6Gceu81SxWCxRn8T0uEEm2r/tqElkNKH7ZnXP62qGVg4vJp1628RpML1oqaNIjdB0Gp7HFwXc4I+C9/WIpZw==","signatures":[{"sig":"MEQCIEtSLCwNYh+Co3IfP8ODRGtOfxng/onx2sNE4rwxHYG7AiARnpqXsrQaLq1b/oLExpQ5tzBbad7F65eqmyUOIK7Fig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":454668,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3ad2CRA9TVsSAnZWagAAtqcP/AqRvr8WtHnpV89khWJ4\nuu/dtEtPs2zrM4SVNNlm5F6lZJcwBknM28E3YJd8JvVwBHrfBhPZR9vFKrp1\nmuc98JnJXjB0QLh3OEAc9rvtoQBk/7H5I/VAS79ECb2E+tHVhJ+w07C7HSdd\n45U4Dfuao8EE6UI7LIrXyU9ufN9qc74PW2MT0z3qE8nb+3wmpryelFZFhkk8\nAIO1Fke71rj90wGF9ufPVKzEr6++03DGxKRayr8hUZR5T5+u2DMaYCoYS41i\nCzQ3ZJSEzWxiA0tfBvuhsFW9mXuBEmGWl7YyBUoWR6U7NIA506bzNfoeJpis\nKorjdpGly3ahgA9makv1p6BiEjUDsFhf3FbdM5LOWb4dCZtw8yPCv+UKhq9l\nNyZ8c/CntyVk5goUaey1/x/WxINa9ZsCu+RJiEmBZPUCUJGEVeitYCyASeX0\nnldPI4u4XF4tGfUWxbiVD7jR+Ruehtet6amf9LSFgs5Cv0TW3DqL14Q5NyO/\nA+8HpW7vJGQQLegooWlM/hq+KBBMx46yFwB2RaX5Z+3i7Qt83O82VYnlxj0Z\naC0+U4nr/wMShrbrtzEbXs1ag4t4Ct1MPdge0xA9s+4/gZ9jI1Dz0SqXL4mM\nIXRqJ1xQbMHQgpO0IaFoKrWba+WifmLVg7830EHAYIeBncP8Lv/y2ZFEQDSO\nYZ80\r\n=l5eR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9f7e1b7371c604a5d4692bdbe25aecc578fb16f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/rtl":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/shape":"14.0.0-canary.c14e977ee.0","@material/theme":"14.0.0-canary.c14e977ee.0","@material/button":"14.0.0-canary.c14e977ee.0","@material/ripple":"14.0.0-canary.c14e977ee.0","@material/tokens":"14.0.0-canary.c14e977ee.0","@material/elevation":"14.0.0-canary.c14e977ee.0","@material/typography":"14.0.0-canary.c14e977ee.0","@material/feature-targeting":"14.0.0-canary.c14e977ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.c14e977ee.0_1641916277901_0.08852924792520134","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/banner","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.b094eaa4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"190ad4511e444d6c433ebe132d92e6a6721d49e6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.b094eaa4e.0.tgz","fileCount":31,"integrity":"sha512-rgYsGB7aPzrrwztUxEzjvsxfTKoxW8pdZPmipOVlQIZZUjXyTnCk5BGCmyhRjeYfyDbdXXLgAsmTLrn+jrDovA==","signatures":[{"sig":"MEUCIQDgVLXB86+2CSV/WeY3HJeVdsKlm5aDLxigsvbl+uqczQIgFy88T/icBGoVIBB2ZlmKIudiidqBkwpxUeX+OF6ncmQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cR0CRA9TVsSAnZWagAAu/UP/A/7W1jdx/ltV+II6oEm\ns4BuIlWvB+O9TC6aetzusr772XNMvzcYjJs8TP2OOHrlzgoZcBZv0SNweFCq\nb3zp+90TGNLg+oaddk2/VnQb2Nqjv8H6R7Ux/Q8/GPTAhZAciikEkyKMcOrN\nd0r8KfJ2N82p/57o2yFBh2mjLuUXoBwNoub83QgJk5p+fQt5lC0YGmxlHo3V\n/idbZtwAYJOzcM2pN2314+Yey04EzDduUMGEkYdOhc0CMpUl9wyhspbZIcv6\nUVjBKVm8VImfgBH+/JjV5gHBaHmLrndiWGFytZbQjKfpdA6qX3rLS0UqD2k7\nxb1R+7dXOANjEMd6tjbBw/P7jJrhetnPUdVVuiGSD6F53QkWJcJXo68FBHkr\nJXq0hI1VTqufJp+sIrnGWym5SdMvVqrfutMwnDZWJA1J5cz8AZT/9KPfa/H4\n1su0v5qpjV3JuzyNFcseq2xNAYKScN/CclQAJQwydQnYX3rV2kEmFZA0ZsCF\nrmwgUspxMWTOXYJV46jT/x94rFbyb3G/QyXsgWr2bXuSFqnUdYgmnwae3YEc\nBs1W6Z98M3pdoo4U6g7gVdpsoIcUyuFgZECVvKCTvPdf8MGY9ZCqR6b+6xZ3\nP4zE0wF6FF+0wLGA+QzHJPVRF9PgbQ6YIubYBTGJdPih7xPRv/z6yUCgTFjp\nhJai\r\n=Ljqs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6b11b48b933746de14be90d79974d10e1fd48289","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/rtl":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/shape":"14.0.0-canary.b094eaa4e.0","@material/theme":"14.0.0-canary.b094eaa4e.0","@material/button":"14.0.0-canary.b094eaa4e.0","@material/ripple":"14.0.0-canary.b094eaa4e.0","@material/tokens":"14.0.0-canary.b094eaa4e.0","@material/elevation":"14.0.0-canary.b094eaa4e.0","@material/typography":"14.0.0-canary.b094eaa4e.0","@material/feature-targeting":"14.0.0-canary.b094eaa4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.b094eaa4e.0_1642185844633_0.7715194325530896","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/banner","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.390220e42.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84fa248fb28d166e021d72bbd37a2b5536f29dee","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.390220e42.0.tgz","fileCount":31,"integrity":"sha512-Rblo8/5dViaCKA2WpFFXL/R3ATiaad5kvQtspyTZNgH12BwSp2y1fVnLeVMtVh4i9Y9LA34mWjp/fMZHfC5Q1Q==","signatures":[{"sig":"MEYCIQCOBQ93mI4eOzgbm4jcMdEaTndmQN1qYYs1Klgu/uRs1gIhAJYdzE1Ld4Ma2drWq5hZD4p+JpvrMiedt+3z8UMY+h36","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z26CRA9TVsSAnZWagAA9x0P/3GiCYuogPLlNMFRCeSS\nstANXZZiT2b4if6ebacP15+t5KztsDjDldaPRlFbKE2TAOOYLT1sC/CGLNAV\nBbyBy2YKtGEWLR+ID7mA30wOObLsBgDrqNHyNLztSRBc59KTeJuqwFR4Oq+t\nlPnlJ99Ts7kuyKA+vdrqRADHfGS61mBd2svfMrZznPszVu6XgufhMetlJWoQ\nlgsOlsJvrRfcck2NsoSm49SlAaReFEsq6xGv9QU2sARRI8OOkXw25E5UuPvJ\nUInFyojJpK/hPsMHZBENUOwOGT+8npWHJjNw0ZTnIofCFg9pbV7JtS2cC6he\nmAQqwWVnQ0ksbGpQc9Ws57PviDaMU2fQd9x1VhJ/memGVJUncoE8X1fP2Ece\nvtxt+cl7y22eNZbFpoejO5YQSTaTZk4DYnJ36hQsVVRlPCxjmWdOd5P89hrn\nbGmLVefxmCiFk6uyUMdsred78I12JWdfm26Aq9GhzOKK1dfJTFaoT2awBLjV\n1qkTR9g3aFQ0V4qbvYgwThSomabEzGiye0Rmm3vC5PCWv+kpSCe9NQd9yHs5\nXsMw11jazSWVqgkAFtd6JTh1STHHNh6igj3iAWtH+jKkOBf97A0zK6/Mw2Vn\nyRGR5NS3m+IxBqmkYR/8mrcWSf0PUWWnQlIdwrDtPWzXaqeRzyRFkSB9h9gE\n5EoN\r\n=z+Yw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dd9f4e499bf257838f40df3957ee3c321500fe37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/rtl":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/shape":"14.0.0-canary.390220e42.0","@material/theme":"14.0.0-canary.390220e42.0","@material/button":"14.0.0-canary.390220e42.0","@material/ripple":"14.0.0-canary.390220e42.0","@material/tokens":"14.0.0-canary.390220e42.0","@material/elevation":"14.0.0-canary.390220e42.0","@material/typography":"14.0.0-canary.390220e42.0","@material/feature-targeting":"14.0.0-canary.390220e42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.390220e42.0_1642438074269_0.28390763354055326","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/banner","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.4b5391f8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0c678032b04efa733f8885fd929f0c0436c84554","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.4b5391f8b.0.tgz","fileCount":31,"integrity":"sha512-VCA9HLMc4LAJKnsCzFBHDvlQ2r409xrncv95AxVzwCMlUCc0gV+/fKS3TpOSXfulVZnsTScT/Psp7qvZsRerpQ==","signatures":[{"sig":"MEQCIFAKu20OH3pxPYh65OM7dV1k5Bmg0T0XO2V5Q+b5zgCFAiBTR4MjZyXOE0L6PcvNBARixU1XlBkE1ZxsPesXib2HrA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSrCRA9TVsSAnZWagAAA94P/1Rl7smbPVUB8KItYNEU\nRE9/ztFNvFIQaQNrd8LbuXsvlVIatxb+l3nb1fFISjgWfxnmweFqqBNQVP4P\nYHcO76VSN8KX4FLad5ggj5J7CJdscvlT5xkhwWIt+txG36mqKKZYg8nDRMzt\nhodnmSBFQpC7FJmfWmwef6Ie4EMHhruGfmpmds666Wx0A69nqkCGdzwgw5cK\n6J48PxTegyGm4+OK1bRlpCy5l59g423TKlASDdlNfKZfevm7DBi+X7l/JDm8\nds2dQqcw514Nr/vLXYj34D1IsaoZKaAXTltItkYRFLp+oHFiYhENCp/bOzjO\n8NOIxVzA12K5F/49jPX4C9KfBoUUc8t8e148qHpL0nAKJyBQcX7ayk1dE4zq\nSa+U7+fI2kB/HWSXUyLOPJYRI9JuaVjAauq6++vG3HaVwfbQkJKK5cSYDIIM\nVvAdWqBBwRAXFyEpE0ayrhCXYF+PBPRdnga+xjIQvO1YpEMTK96ix4RibWpF\nqzPRmnqPJ86xAqUpLUSbMdQ+90Na4/QYefnqycy43QTevWM1AZr1J7PGvqyG\n4cUy0UzETI5avz57ISX/srfKmlDGNdK7cPeSb/GBLXckWKhLI4RQlOFg8BJF\nzVwWWHYcqkwXCaoB6LSr67VtdDcqnhR/9H/1Ps0lVhDpPKqp97VV7TBZN+ZC\n0JWf\r\n=jCt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"09410b4524a4005be30dd18c47d4214d6eeffca0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/rtl":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/shape":"14.0.0-canary.4b5391f8b.0","@material/theme":"14.0.0-canary.4b5391f8b.0","@material/button":"14.0.0-canary.4b5391f8b.0","@material/ripple":"14.0.0-canary.4b5391f8b.0","@material/tokens":"14.0.0-canary.4b5391f8b.0","@material/elevation":"14.0.0-canary.4b5391f8b.0","@material/typography":"14.0.0-canary.4b5391f8b.0","@material/feature-targeting":"14.0.0-canary.4b5391f8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.4b5391f8b.0_1642636459626_0.7055654539257956","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/banner","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.cef6bc623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b804484f0527a537a736912852160571e743b137","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.cef6bc623.0.tgz","fileCount":31,"integrity":"sha512-WoX71b3XWaSbwwe44GGtIoFjaf+Ik2Shiem5IARlpr8umIRh+cQORZb+vMZiXLDLMgnxOwuLMLmSa6UllYn3GQ==","signatures":[{"sig":"MEUCIHLDGh+XWd+/GRKZaJRbrDMVYRqo/oaGUPzSG7llWs/uAiEAz+PchRI7StVNSIp6f2TDwDUIHWQp7dRYLXuYtAaUUDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6Kp3CRA9TVsSAnZWagAADvQP/j/YA2af+m5NpZdjQXzS\n/M/0lVaOa81NJuY1DSvYETet3t4/5YIfdbpggPyeh2P1oppIpNZI8sEBmVPd\nhKRBzKRlJRaauEex5zSBloW4VMI9OHbMfbOwDPXMYh6pIalSMsT8d1u+cSMK\n/fy8jAllOk0xnYxsGgx87zuvLtqCdTTml6+HXvjkUis+62CMV8eq0boEAPUV\nsReikBAcbT1PI3Gs1cVHPdvEouyBK48pD01abWomL0gWtAVxngPdXYHbjkeO\ndWlb+XuORUanz5N3peNBNsaG17KqvhJWLQd6HY/1gT7OIGBha9VvhzcQvjbU\nRyr2suq2pjgv0kEWKxfjuzCGnP3diysWVUnnirlQ6sn0/w9qmqC0XkcFYMLg\nu3YOJt+MrH2oy49U4lZDC5tZ9F2rr1K4F4TmZ87CXUfhaqaZpPvkc++8k+QH\nKuJPLV0JI09OHf2hKwhUGhVEDADpy45mXnUxJCYOndcZh+8oW8Gxn3vVVRTP\nQAg+EjxPGmX7MNjpA+g4V5MC1MYmSFrFXxl0r4xP33SCEAHVand2iMfA7pvx\nM90k4dr3gXsO4LzmMhp/twgMeg7tmChuOwY2MYCPYJJMMOlmHe0wito88ovo\ncOU//bS2JVzId2x8Jkiw1QoVv0R3vfDidW9+qLc0dy23sX2X7cK7hHH7ql/7\nYwz2\r\n=/O7S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6bfb214d1f6768cd968026313c7de32009b2da1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/rtl":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/shape":"14.0.0-canary.cef6bc623.0","@material/theme":"14.0.0-canary.cef6bc623.0","@material/button":"14.0.0-canary.cef6bc623.0","@material/ripple":"14.0.0-canary.cef6bc623.0","@material/tokens":"14.0.0-canary.cef6bc623.0","@material/elevation":"14.0.0-canary.cef6bc623.0","@material/typography":"14.0.0-canary.cef6bc623.0","@material/feature-targeting":"14.0.0-canary.cef6bc623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.cef6bc623.0_1642637943555_0.20221952051973968","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/banner","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.0379179c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cab5f9ec01bf02acf427a8567d0fc256085b00f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.0379179c4.0.tgz","fileCount":31,"integrity":"sha512-EkSFO3MTwnerzmAYq6l7xIhUgU7TUdZWYaC7tBtnwFfbkVuWWycovSdzs6F0QiS3bH/knc6ardC51EHUaRXllA==","signatures":[{"sig":"MEUCIQC2M79kt3XTNK+hJlCFmge5BqXFHb8S5UJRySoGXNsX8wIgWZuR1yRDEZ+OjtSL/TKen6zVdAAwUu3+BclcNf1HPVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bBFCRA9TVsSAnZWagAAhgYP/A9u094/5TZ3UmOsNW4v\nm/DNBHtz/Mb+CukK9ixeqbx3TB4KlIP8EAwZeeWFGjczYzPwaYpHH92WNV3K\nywwA365fRgXDnKzvq7p4qAwdKB5GGA/6Y6FR++ef9XdaSLDyMrpHS4VqOPZl\nWdeDreDmbbXXiZPXi0UVMqGQUrBnTdZd7IoVEr0Et28wgar5XqmxBHciK3UX\n1CgEif9b6C7TEPmqIY+xsSHgsC2GR0tGg5APa34YCEnIUZ9cX3sLjAPA1CAM\nfGWcguwarRCPrETknRw8vFBelWBWGU8h04pWPf4coT2Nwdd8cDm71b96DGWS\nmlWHbQN3xZjSbdTrX/dbTH+mgkGrEbobJTXxDZJSj0uTTBQUL3eD1RCxqUkc\noPv3fbR2a4ZdMmd6jN04XA5gvHe9D1VdmJjHxvqy9RTF6xnlQrA3cQnJIpkx\ntFYKkIZX93bjnrQvAhzmoLhQVOwpUiDFiXObgmAx2ZkcZ+C3+S71X1rV7zI6\n4t1ZRoEAdpsFUQCH4XH/8k4DUZ+hzmH6X73oQDPxQbyQNwfrrhSeM703T0GB\n59Rkd2NQmKzhTYp6ByzB3zWX1eFTKefvDA0pjK4Zkw+0rHh0Ni5W3paDau9/\nXABxx1WuP3NiZDnXH5f5moYXsds6PB3MdTgRNLs0GgW4vb8W6JDriyX7285+\nIkvU\r\n=Nma4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fd62b4e352900f807c8308b282906b51227baeac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/rtl":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/shape":"14.0.0-canary.0379179c4.0","@material/theme":"14.0.0-canary.0379179c4.0","@material/button":"14.0.0-canary.0379179c4.0","@material/ripple":"14.0.0-canary.0379179c4.0","@material/tokens":"14.0.0-canary.0379179c4.0","@material/elevation":"14.0.0-canary.0379179c4.0","@material/typography":"14.0.0-canary.0379179c4.0","@material/feature-targeting":"14.0.0-canary.0379179c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.0379179c4.0_1642704964913_0.8262872915556363","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/banner","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.e62f3dabf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6fdc593b9fed45dc02faeaff5d09fbdd52ccd8b9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.e62f3dabf.0.tgz","fileCount":31,"integrity":"sha512-O492pwMP7QsuBHkPKkSN7aT18VkVu8gY2c4TPzyiXCqJlTJLjDpXSi57EdUBPUBzOamQoWoYS7teklvxoty/yQ==","signatures":[{"sig":"MEUCIG2wPFPHNT8hhk2lk0gbWJgDS+qKPJ0BjFcNtbjpe6dvAiEArso4sZ9a5H7ImE8hquX6FHi9G5YoPnvgSpFkJxbFWBA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zwYCRA9TVsSAnZWagAAZeAP/i/SzOJLVx2iiI72K4yF\nq5AdEMdRqjLEsmjNOKSUBbC9dAKjNgapHm6Wx9pKuxAsxyamj2rqYpWxlEaT\n4ushJ4J9m8zaLWqwQfxuwLLd4vphpeog9pIfM1xv8qnZIXDPqrTxm2ipKlwL\nHAJs4OP6BbhMOlL4WBPqtYKfIJgSF11ILQT1W7mqcFFM766SsX8odEjDDiaS\n7HN+QjhIIHu6yR7UejgOmadbV6bSRJyzgKkZf+eFH+ES1nwcmASzE1YKvUL7\nIHEweOOU1M2Yey8ob8LWE6EsceZwhYMT545lQ+GkORwbQaDcucvxlGVVhUqi\nUdMnipVuYeK+Lcc4I7VOR1XeAXHRaDosQI5fqSaUg0ZXuHteiMm85APtKdSW\nCy2Yjk6DkkhCmnAke+nI2PLJugfJi33uuSV1Ip3Su4NoPr72LNLlTwNZmAXH\nnsxWo+wHzoUMz8Ox7M1roqOtSTkpn/aK234DXj0XW3Ba8iT0Necpcx76arhJ\nbUippNbHu/iJJKL9yD4pY8V7vHb5S45F8xVoR9rPdSGd9UtMpESM1GbcfLam\n9+VnXUEahAWYkGWYnEyYIUv1JKiBO4PaSC+yEvn1aDDQp4zCeL0CFl5YXFcc\nDrq4kcMb7Xaaxk6t4Gac+s4RVaDRFC05zraIjXCXYxFBkayLPdZ/t1eY8qfL\n18zB\r\n=krRm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7f7d12458af5eaac6bd913db605b5afc3753906d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/rtl":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/shape":"14.0.0-canary.e62f3dabf.0","@material/theme":"14.0.0-canary.e62f3dabf.0","@material/button":"14.0.0-canary.e62f3dabf.0","@material/ripple":"14.0.0-canary.e62f3dabf.0","@material/tokens":"14.0.0-canary.e62f3dabf.0","@material/elevation":"14.0.0-canary.e62f3dabf.0","@material/typography":"14.0.0-canary.e62f3dabf.0","@material/feature-targeting":"14.0.0-canary.e62f3dabf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.e62f3dabf.0_1642806296550_0.9308407817615938","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/banner","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.3e20c1de8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8260e4225f8ec3ebea717be181541f0a2e783328","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.3e20c1de8.0.tgz","fileCount":31,"integrity":"sha512-a6dmqqG666zc49g5A7ti9SXtonsycPIRGEOSqM675h0Vk7Us5RjnEayGdjqXyZFb/8vHcCIDFkW7Ubof1aSQwA==","signatures":[{"sig":"MEUCICwGaBu/LXry/mnhjv0q0RKbM3ic4nwwyZIaxk++wR8TAiEApjjpXILWsit4j6WGS9zMGzMuv+hRR2+8SIHi8v36Vc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8BhUCRA9TVsSAnZWagAAwSsQAJG3OYCcUUFw7f4LpHqP\ny3U3GQMnu4KXY/N/5Q+qeyNBRJ3AjpgQtlODLfL1Sn7prwk4vWYWCjzwFFXJ\nzMMn6JnFF0j0H6ZOKCyjwBmmbNZz3+l6OZzf5kXXW/jIUChzPZ3Tb3w89o2l\nD3DKI1/YV2bV3xI8omhE+FhuaVQ2NtOowRlu1qiB6YrD2WqU/EPZy6h68/me\nFBZMHrcz1cC+xSkKhwl1XX7O6I39HcmnR9zx/lMTdAAADTwAOnBo3v5Ejz7S\nxeSFm88u5BuK9WeYuY5tl7axBQcT5sxBqrnCJVaU9VDf0cU7KeEB18gzbY+1\nqvdGMYZBZa8awpOn0RImW4RTvNmYZ+YZvC6/IOgt1jXFjwwCVmEfXR36c+Hh\nW/GlP2IvhgdC4HMgAHTSWBpuguA61LdZ5lhINWOP367SiC4MVHhT4TTKuW/c\nkAMVBGLVG44ZnD1YPgvMyAsuD6rLiy03CGcpEroG83sl5LbIvxA3UWrMu3Kt\nLBUIszHineAcCk3xW7P4eqp3uWg2Ge4+egp/0I9WSD87SUohOO4c4lN97YRd\n6hq+jjv38o/jbim0GaLOXoopuMSD3y9DgffO+zFweA0iXm9cfX6pf4zSk/1t\nK1LOlWUSnJxFgNklGmnx+dQCu6wMzMK7uFSkFYIIAtvD8P8WrrS5zSosAetk\nqRZd\r\n=dUZE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"29fe61f3aef5a85c7a462638b6c2b809a3be57c3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/rtl":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/shape":"14.0.0-canary.3e20c1de8.0","@material/theme":"14.0.0-canary.3e20c1de8.0","@material/button":"14.0.0-canary.3e20c1de8.0","@material/ripple":"14.0.0-canary.3e20c1de8.0","@material/tokens":"14.0.0-canary.3e20c1de8.0","@material/elevation":"14.0.0-canary.3e20c1de8.0","@material/typography":"14.0.0-canary.3e20c1de8.0","@material/feature-targeting":"14.0.0-canary.3e20c1de8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.3e20c1de8.0_1643124820659_0.30743273640064617","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/banner","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.9f9d928b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"45088ddb76a0412cb5ad7392537bb606fda8a534","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.9f9d928b2.0.tgz","fileCount":31,"integrity":"sha512-5S/dJIkKmwKlfIPG/JHnQOrYoTxMNHT1cJzaG8bvYjFi3sRR5CVUf7gwPxgfOy/yEbY39SmgcIs06iX/NmJSGQ==","signatures":[{"sig":"MEUCIGIVQXE4elOE9dS4NeAj9AzINi7NAYYZxwDVHdvXVOnKAiEA/Od2QR7ZevUbBBMWrRuFMM3y8EfGr0+YErGNMb8MVXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uEUCRA9TVsSAnZWagAAbUcP/3rXHWNPI5NF4wKZW2DP\nLxWTtoKcAWUq3HtCn8UnKs4cmzpl2+AZOva21KS++zgyOa61+N/hu3rSCG4e\nAabVDNuR9JY3y8wmumWhGYcy0cRgwAOAfUUBOw47NFSKnDmWWhTCDV2TCgq7\nya6UDVhI2EmnZ04glmPvAuEc8hyZL/NwMYdfKRSI3JbSfrn931i93i2C5Yt2\nEnjPJsDONT59N82P2wz8wtEvZdHU0FSE/QJIBl+ynlrXr/yQeRDkSGGqjZVE\nrPaPOMkgNs7ygQ1c0gGR73N4lVaM8KPVlo+qpJm+Jx5JesYo2psyWQ9sndIW\nPcTRp1asz7UZoYn4IZPhn5H3gskn3dReNPMRSjMsO5xST+6TIEJFkYoS3hJc\nmO0rqKOBrOwo9WQ3fJN3UPUayypri78HGcEQ11BTveWnKS7jARtGz8tQFV7I\nPqs51KdLrnbfjzwkkPPWaTWVExw3JzRg0iclV0HIl1o4DTlVZwck951uWUFP\nYUH8xqBvZ+PRp2xORyDOs1+i//30ZJYfTOqEyPiK9lfD9FCC+Q1Y8UQMwFA6\noW7uInICO0pIIhfrnlGk4SoVB+rZwas99VmNmRhsoXB+vsxInBE38G4F4+ZJ\nIQ9VKXKl02DwpJGUG4UAqM5bU4DB8a+8QEpCUDkcXs40/HT+ruqHgV6azcxQ\nTEi0\r\n=FmPs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2983c7f2f01e1912809d6004e47ff0c7c27de38b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/rtl":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/shape":"14.0.0-canary.9f9d928b2.0","@material/theme":"14.0.0-canary.9f9d928b2.0","@material/button":"14.0.0-canary.9f9d928b2.0","@material/ripple":"14.0.0-canary.9f9d928b2.0","@material/tokens":"14.0.0-canary.9f9d928b2.0","@material/elevation":"14.0.0-canary.9f9d928b2.0","@material/typography":"14.0.0-canary.9f9d928b2.0","@material/feature-targeting":"14.0.0-canary.9f9d928b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.9f9d928b2.0_1643307284555_0.8849553807192791","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/banner","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.a2bcb065c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe661c5a53ca3badf0960b0d019a489b76e78524","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.a2bcb065c.0.tgz","fileCount":31,"integrity":"sha512-YhH/yrhLlazqr6sk64IXEZVculVs6g32O48PfT9so2gNdboRVhi7xXbxOCCiJLNT4blDUhrsExd0mNZ72TZ6Dw==","signatures":[{"sig":"MEQCIDS/bDX0UjHv44Fc9hPOP7FarIBhcYxoUhnamMUxSHiGAiBR3y7/h49mv89aa94AAwLJfd2abreUmydMe7ZM0Kt2Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EZKCRA9TVsSAnZWagAAzsUP/1UJ2BY3pg5SX5rfUOfj\nt1C0jnChOB2Xj5ZpLQrShtAdD5cmc4fqn85qzaAJlPIMFTKyCRwNP1yICVKj\nVSe174INVYpacNGka6VbdYXrQRjXxpQvOQHAjhN95O/ERoHffP8h9RXaSoRa\nv1pitlNLUP5FaZRhGrnjvZv2r/YhBWLRF94BmSRb0XyRc66ogWjSSkTkJlFg\nkOhgiO3Tm+1aTTUKV0eQ6EMiAYCqEnujLYzHnNcdtkGnTjdXLNNcGGHrVAzW\nEs001ODp0o0AtafJ3RTPGpg8ynTKbEqDEruERtpZNAVVyAypZjtos85KAFZS\n6RIDj3ZNMZnV0osZ5aQywxBNVL/gqZIjQ9RW7wnYYJOGFOtqo0YkQxAV14f0\n1MKjDYMc2KB1788WAGKJp3LyPwPDtxfavEq6VL29k83MlBq+kOXjlMMQYaYg\ntk84Ubyic1sY4M/mlvCEQtF1dH3xuUQznkUdTHNq8RO4juMTq0hyvJ246LCH\n/MxQXRFhm3KCYFCU5u61okBgTI7IGyT2y/IX3gYH9U7p6h1s/PdJRWI86Xgq\nKM0R3FvJLY5Gx4m5nsom9DYu1vSZyaT8gcUXbMFIF0yLI+c4z31gDWazZeFh\ntQ+KJaYT4D/mm34cAqh7V4tIUsR+Q09UEK0apX71AjfSOq+AKEKyIrITyIc2\n4Ck5\r\n=wtfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7f175ca37545bf0bacc2b94f7a18a2a3fbd5eec5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/rtl":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/shape":"14.0.0-canary.a2bcb065c.0","@material/theme":"14.0.0-canary.a2bcb065c.0","@material/button":"14.0.0-canary.a2bcb065c.0","@material/ripple":"14.0.0-canary.a2bcb065c.0","@material/tokens":"14.0.0-canary.a2bcb065c.0","@material/elevation":"14.0.0-canary.a2bcb065c.0","@material/typography":"14.0.0-canary.a2bcb065c.0","@material/feature-targeting":"14.0.0-canary.a2bcb065c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.a2bcb065c.0_1643398729621_0.11741599664124602","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/banner","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.4e66fb2e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"52d76214052c08bc8877ec7a9983909cc4e38af5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":31,"integrity":"sha512-jW6vyZeIMy5f9TpdPMPHOqnzr4j6d32s2UdXZJAqJOm2bf6t82p9mfUGmDVEntbJ6RnKJpXrHBdKyp72TQS+pw==","signatures":[{"sig":"MEQCIAEXL2bnFpwJNA7yLr9+Pc7du+EgX5Bvcazzrtbq5aE5AiAv1y57mT9gyCTJ1I0nYLH9M0FBPOXABZI7Y107Dc29Kg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EdCCRA9TVsSAnZWagAAa5QQAKDyPab3nnDyrqN+or1X\nZTL919w5kHXZex/arVXzALXFtwJtNKGPl7MmhpyTIgdD3Ddfv1qJxnu75eE1\nt+XFSDr3Mkdq2AReFGzTXo6WmnsoBYBD5kav2wDXk0ft/eiQw5ks54gZt7qh\nen+GhSTUzZ5Vwz9stC+YCNYNwFL68fAWeGPE6MztYBE7xSjGO4GsFRdaabvI\n1KSHh3xAPjJDUP/PNfiR5sTAa+F5yLNERm9kybtO4StTM0hZhQBbHd3MT+rx\nLtc2wPtPhCm74wPmcGPmEELO7NFqD2lyqtvVPwcAUN76Z2kjofZRfTjXudXa\n6U4BW9k+UAoIpR8FFgdlFLoNsVpMRaWAbmuZWo2Gw7NhS24WiZyCeO7SrS4r\nwRRHxbl1uFYbNQWVtOKJnOZUwChiJBo/4L4IKct8Tp91FnUZbfyZR5+d5O+7\n37dQ/wj5e9ZYKp9GnpaeQrk8Fc8O3TAsPU5/drnQGZfj8wPLLr2nQwnjhQqV\nUNEcRqPVU5VYtWZu/07KvsKpRIKHyh52XvTWWbmq/CKultZ4Abiy9o2ksQR5\nSDr/PnxsysM6LzKl/3V/x+PcrnX3eNoUqCO/t/ikJjVu234SoxsGZ/4lHjmR\nE0v2dlQpMqHuwDsvvTzxDMDWk2mYajSBI4Lo5JrN2UeXEHC8kZ0Uxngu7q5L\nBuVD\r\n=MATZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"edee6a64c210815507bd8460fea3df2591cf0d65","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/rtl":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/shape":"14.0.0-canary.4e66fb2e1.0","@material/theme":"14.0.0-canary.4e66fb2e1.0","@material/button":"14.0.0-canary.4e66fb2e1.0","@material/ripple":"14.0.0-canary.4e66fb2e1.0","@material/tokens":"14.0.0-canary.4e66fb2e1.0","@material/elevation":"14.0.0-canary.4e66fb2e1.0","@material/typography":"14.0.0-canary.4e66fb2e1.0","@material/feature-targeting":"14.0.0-canary.4e66fb2e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.4e66fb2e1.0_1643398978704_0.4816029033335809","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/banner","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.9736ddce9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"888948accc13c1d5b24372052403ac5bde6fc2db","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.9736ddce9.0.tgz","fileCount":31,"integrity":"sha512-A0vdLqIfZugM3sEUh9j7GMSWIwTum7wkleYCdf/jAWOUXzE7dVrKsNj3MG6GTcfjKnFmxCSrhuRHYm+gX/PriA==","signatures":[{"sig":"MEUCIDmr5UsJj5Zpseb/VszeXIPEElhOi4FR1aJ7kEhkql94AiEAgahMEPeZ1vc3bgNCPf9QDYRteBamrzmLChwGWWOkPTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4fCRA9TVsSAnZWagAAdJsP/ii5hfkPUM068YMBB3ti\nYy5zgNp9OFDrmTWLictWUPSiCOTZxo7zoD3g6BkIkHpfY4hmSI65wGWBUg7z\nhZUsGefRLmTYEWHjsoE966li3NDd8YmGjBmiKZjHiZnhAb10CxecZa7nqFph\n3OvzSOCBziFuPi99XL3BmvPH0krss2zSVn9FbP6uxvdur+4f246BL9Z2F53W\nmfR+vFsFmOXQ65Abbd9y5VUbTyQX0fZ2hiR467k7Aa/Y5otPeU+CfhdN/Q0I\nPz5Gxl4kM9bteBDcYHChWH9IxvWImYexnPr5Pjk/9NNtUkEkdAgHa7BCs15A\ngn4RBGaUdqf4N3ZMISdTr+9giJXUQ9Xw2bfPICDaSR50fIV+YOBIEy4tWU22\n7tvQ7L5+v/q623oPO9Wk9ql33X89QYKGCFagQ1sXyN4IgJNRGFrA7ZplrdX0\nKzXV1NuBVcghT6yzg0tX9VXeHdqwfQ7ohiOznO95McVmIIm6k3qz291Ekk5R\nkxEcF8m/1h4XWgaJIsWKw90WXhzZgb8GtwCGNxmNXWGE92it7ZRekNqsQsVy\nIlW99kJeKIVMQ+YVZP1IKqlFyM6DmqqPKRqyp2drEpbJGwcJVDem0P3EqMtn\nEMKN3DsjLJpXxGN24+AGkDmxCChfP+1tQkKuA9zbFKTRV11TyqhMCacYjkz4\nS3Ll\r\n=pUbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d76de36ce796a981bf5e48388104bdb581d17529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/rtl":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/shape":"14.0.0-canary.9736ddce9.0","@material/theme":"14.0.0-canary.9736ddce9.0","@material/button":"14.0.0-canary.9736ddce9.0","@material/ripple":"14.0.0-canary.9736ddce9.0","@material/tokens":"14.0.0-canary.9736ddce9.0","@material/elevation":"14.0.0-canary.9736ddce9.0","@material/typography":"14.0.0-canary.9736ddce9.0","@material/feature-targeting":"14.0.0-canary.9736ddce9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.9736ddce9.0_1643449887081_0.8722855639769485","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/banner","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.cc4ed13cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6203165cf1bf66dddd7171a31c63a1772f535c0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":31,"integrity":"sha512-3wD+2hJA9Vsg4+CGMAo29SBYcPCr2eynNiKYtJhod7u9JpsEcQvIKuFqMei5xmk2x8bP/ajAUw5qXzDQQCZkYQ==","signatures":[{"sig":"MEUCIQDxWJSMHVIAcR8s5dznG4445hD5p5UK3pKVA1+WRI0HKwIgYt9c0P63cGFUstsdwVghJzv2FaF+da3jCln7Y+AjBuU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W9gCRA9TVsSAnZWagAAZ1cP/iS+NE+KYJM10vPd9qU2\nGzMkol82hJPIVdItb2c/nP+kaLg5IYe3V+zRh+f5VUSlsmFNThTfqzfTqSg9\nPMuTZv9vkvGubSfmtkzTYeP5iZpgOoyIDeXTbl/aPov+5hVS/WkQ9p8+6R6u\nG5RyqbrAPOUZ0sDUp45ZsRIZkb0Bg8uQqEtFZG3dh2Yt+NtEXCVOhfsZ1NUq\nhJAzgUg6nlzh1pd8+cZeyUjHye/DbJ8z28oBIvYD7XK88IABN1HDAqZmCDxR\nUIAV9AV3MKNB8mePGWgP7cBL8GHvJ2HZUElnGD4wZ8jEzE4+BH59CvzGKdGk\nHl3OsuVxum9ZDsWMLbgMT17b7cnzla7tsSquJbyOqVRsU9wHEld2uXUl5QE6\nVZ+LXJ6+5p2lCyB/lhQ7GoqKt9C7MGxjXH47AOssNAXoaMIfLDCgenJ4q7xu\n74DxEmoYzsOjvLVqmnbqQbq8eWD/8ICMp7R8Mjg3ahc8lT+utcXOCl7KRuHT\nJEF6dK1Ntt6kEk6B0v6RYi4owLfeDya/xgt3Q8g5qTlze7O69fjXevKWpirI\nzzHt8gSawQGHJ4DEZOr9IelOqTpM0Wu4I3Ycq1WsdHV+6Z+lMWYGuwvWrvj/\nFsxk3WO0yUkn+2xp3DhAvbumMfM+zxjpNpuZaWejzSFOmXKFkFVS6zO+CTG0\n6AWp\r\n=XN/C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"15c769412cb0230363c372a7d45bc6bc10eff8e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/rtl":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/shape":"14.0.0-canary.cc4ed13cc.0","@material/theme":"14.0.0-canary.cc4ed13cc.0","@material/button":"14.0.0-canary.cc4ed13cc.0","@material/ripple":"14.0.0-canary.cc4ed13cc.0","@material/tokens":"14.0.0-canary.cc4ed13cc.0","@material/elevation":"14.0.0-canary.cc4ed13cc.0","@material/typography":"14.0.0-canary.cc4ed13cc.0","@material/feature-targeting":"14.0.0-canary.cc4ed13cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.cc4ed13cc.0_1643999072435_0.8805699736699262","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/banner","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.dcba26fe1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85bfa16ae4ddc1c8b75755de5d1f7dcc748ada54","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.dcba26fe1.0.tgz","fileCount":31,"integrity":"sha512-r5U11ZMoay2QFNobEQrmQmc6yNIkpg8WgPxe7IzlN6QreQ8lij3T6+IIKnNSTlsSXCVgxKJ4SX7T7KIQkL5HhQ==","signatures":[{"sig":"MEYCIQDNmUidysbQMgNaYl6qLRy4KRcoIoFJrU9fbLClScUKFQIhAMuXpRYPE7CzZ2rLE/NvMgEe2iSecu0brHAJTdH/3NQ2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aGTCRA9TVsSAnZWagAAZsoP/0szQIN/k3GG4GOW9omj\nqAOj0qYSdsOcACmEvuBW3SbfhoGDVqw8N6xxUqka050TVimVC6MU8c3x3ORh\nk9GpbfpPhcrvKHAE+jhArHO7OBrNo5jo6GaswRq3oBcvktr86iRLSnoJuhB8\nHY82JdkoErfDUTdbZka6UhSmrtjHXbjDGhY3as411ANAxcFZnHcLTg8DcWWh\n/FctGqOgT7mti4Y8bm3oiVuYKiG5Nh7PjJrEcAnMr3tav6U7bFlxxE7XHZvR\nMhn+tQES4Zlw3MvE8H0bGWwTwgl94xhLVobunrxEtXnRY/hNRuxP8N5y2CpC\n51eDoAEODSwfr0S4gn+ytpveqJYv7mwQ78msQAhY+y9qLAKFxXYC17A4lQFb\np0aM11tmc4jAY2jHOJdZiRxhIu+MB/8OUSYIB7Q/jhgm+jK7GsIyVyprk9BJ\nAqKhQ7A852VIZRhN5kDjGw4nhw2VH5ySBbIb3ThLvdbspQ1JwsWL81z789xl\n2ybpk9xix/gdzVZoWeTquLI/WtT3Wvm3GjsiF2Xu3XFvYQxm2Ke8eZ1Lj9aV\nOvBMvd8tgsoWgugb3RviI5CJnJXqCoRbSgE72+AJ49TFJsLkvmgxUDMYltSC\n8OhQD/sRU4+GEJ8/c7+XRCmYtrgmhZLPkP+bZBm+ggeJGEqheAEZYwYg7FXZ\nzmai\r\n=LjFz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ced7dd56d5d3b017288f0575d6e773c03f01d0ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/rtl":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/shape":"14.0.0-canary.dcba26fe1.0","@material/theme":"14.0.0-canary.dcba26fe1.0","@material/button":"14.0.0-canary.dcba26fe1.0","@material/ripple":"14.0.0-canary.dcba26fe1.0","@material/tokens":"14.0.0-canary.dcba26fe1.0","@material/elevation":"14.0.0-canary.dcba26fe1.0","@material/typography":"14.0.0-canary.dcba26fe1.0","@material/feature-targeting":"14.0.0-canary.dcba26fe1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.dcba26fe1.0_1644011923757_0.8713433633147163","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/banner","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.ec54d9046.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fd7a68b2af9f07b8de2b8abbb48770c08a060b9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.ec54d9046.0.tgz","fileCount":31,"integrity":"sha512-UYsJByIKDaDDLJ+lE0CQuFjw9n82T5G8wfQttLNrvF40s8js+Ffh5l+K82clgfvRghQt+FV7MViivYZo278zrg==","signatures":[{"sig":"MEUCIDZNsUfSG2fzL1V1gkhFFduz9I/PENiF3Jh0Vn/AjLpMAiEAzz/1vb5wyGHJarsSTdWpt2q5NUlAqIW5oUkDRkyvOGs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT9JCRA9TVsSAnZWagAAnSIP/iGzXJ/k+Hi3Ijv1835O\nErAcDuZJWDkigC8bsF6/E7VCjQ0spvzfKAZNOWge1VAl2omkWmXIbYqiRVcD\nfcSRMQChJya4dTmXd2CJM7+PrnxtgwIPoyGfZtrf6+US2ngIUwmo25URkMG5\nf1wR+7m13eleiz/wUGJRJhxzPL+x7c3Bof+6uB8c5nvc5UslbPI0hCW6Rhtq\nCsUubwFki0p7lV3ktQT2pzHaNlsawhSCknmLNOR0FMuvuLHiY2RESurcibZd\nJO0pNb1J2+pIOs5k1lUBPz+i2I0hdKQkDY41+JavD42o9jmGvYiYbNVVm1Vt\nYcHxe9PO7n/rLLTlzvf0ygTNjABUj2xZm9eiPcVihmWpXgpBl2PmAg/FGZXg\n7YKv+GI9/Pbdr1YbgutKTp6DAxJ5GKwcTI1G9M/5KgbcTTkbKfdZtpWeWIad\n381k8q0FfZZ5bhZreOKDU7BS3GMahN8/eE8kVJLlVwcE3YeWr3pH4Ove9bSA\n05cZZMqDQfgpMdzFR/44L+mH6wuPBFFUEiIfh5SfcDisWNOBx4SQ3NE7bOnz\nkAg9kX1IElEDiHKK+5UemGTTSZU3fvB+FMeMwW9poYbhAm+pEm6wzUVOTkik\nV4x/luOi0pXHY7Ws8bb+2lg329QYCdxhDVLsyNklFp8nv1D6L54mB8fpb6M3\nQwxi\r\n=mtCN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"68f6bb151595e8790d7092842d6c137ef93ed770","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/rtl":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/shape":"14.0.0-canary.ec54d9046.0","@material/theme":"14.0.0-canary.ec54d9046.0","@material/button":"14.0.0-canary.ec54d9046.0","@material/ripple":"14.0.0-canary.ec54d9046.0","@material/tokens":"14.0.0-canary.ec54d9046.0","@material/elevation":"14.0.0-canary.ec54d9046.0","@material/typography":"14.0.0-canary.ec54d9046.0","@material/feature-targeting":"14.0.0-canary.ec54d9046.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.ec54d9046.0_1644248904951_0.07093856327498305","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/banner","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.ea9b5b463.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ecb0a2a88c9d506c8f1107b5855e87808523a63a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.ea9b5b463.0.tgz","fileCount":31,"integrity":"sha512-h4luKq/rFxImlC/gPY0lp5hD+vuZEmLmsp5OdtvdRFbx7ZSMI/EJIcVFmchW92vIHvzdi8Yqe9W2/qDHHnMr6w==","signatures":[{"sig":"MEUCIQCQJcM80HJ1A19t0WFLjTsXd+G6itcjhkriLwyQbjQtLQIgK6tyisB61BTwz3vpT/OEDX3Vplfzbq7NBVcSuPgNWnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBAAJCRA9TVsSAnZWagAAX0sQAJsrUAsFTNCmYy8JPSUK\n0scBzXNKkvnHZS5x3DVu7XcIZ/nZSEfxw5/f5kjM8UGjD/RBlF2+sIP8Ss4t\nM5zzrwwx4wINquFppPwlAfR2MJTZEP6YPFG08ezF8YqsEpleoYbj1wmUHyQR\nAtdsXEFAHCrrlWsePKn19mwer+JwXijyr/J78ZNVVc8YilpIkN91ologb4Cu\na2Gvlz1C3AhS5qftEqXwt0iU34FdsAjZY52i4UPGHSKRuokyL3W7lQrOwvzd\nO2BiGJ2Ed89A7IEOPg4CTMn830mDVZYKA11fpFdoPB0hqWg+M0sYkBBM0cpF\nh0g/eMNdmiYW1B0T4BY5Ks0WdQ0NsG4QS3byNO4Lr8VgXi0+71IROlaRsKAy\n/Z/S1L6smm7PIPE79VLHq8zr99r7iK+r0dtO4poSauibkeZZj6qSaJRtk9ok\n/cnsQQeMr52ZEOGrAEgJozlIxV3TXJ+4Vyje50NY+/86EkoYudcsPsgqvTfm\naW3l9Zz2yFqvr8cO1G6+ms8FyTjFxBJygn5vo6CkGFXeW2+OyGmNPAKt+ZBW\n+Fs1YO3UoT9/XGxsn1tJU9fv9q1zl+V/pdnPS6vYgbZO+/CGjBwMggc8CtSb\n2piVx278DXdRt6Z7U1qEyac+KVA26Qf7bIaq/w+s5h6BXzsUzYqBzPsCtl3Y\nFsLu\r\n=9my2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ee827dceb9fd1c47516461b8ddc28b66702f2c04","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/rtl":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/shape":"14.0.0-canary.ea9b5b463.0","@material/theme":"14.0.0-canary.ea9b5b463.0","@material/button":"14.0.0-canary.ea9b5b463.0","@material/ripple":"14.0.0-canary.ea9b5b463.0","@material/tokens":"14.0.0-canary.ea9b5b463.0","@material/elevation":"14.0.0-canary.ea9b5b463.0","@material/typography":"14.0.0-canary.ea9b5b463.0","@material/feature-targeting":"14.0.0-canary.ea9b5b463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.ea9b5b463.0_1644429321214_0.8679151159303748","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/banner","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.96ea061c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3feb990bbc30bd7644da7914324496a81539eedc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.96ea061c1.0.tgz","fileCount":31,"integrity":"sha512-PGzDDaVv7UYX24Hkbj6HJG0W+G6akI80/zEwEfQL0igq5+YgH2dXyII5Ftf4As96IRdeUxvYiVJaqNbK5Db0Zw==","signatures":[{"sig":"MEUCIQCi5uDCfz8VvUxgVKGvYRh1W6t4QJQ3d0h/8NhFDx0gDAIgFjzvBm7JgqsLpddOq/xlRDl0Mgffg9bbSdzL+ws+ux4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9qCRA9TVsSAnZWagAAk6AP/RnqcRHlpoqwUWy4P2u4\nT+z/b7m/wxyy3wkEJMLHzA6yJ/D+cyLIGT5jIQW9FueOZKeL06LBJlKEpnAw\nxhmG9MTH3Xgwmfn2epda8YNhCvNY9zvvbM8oLHzuFv5mzJReb9dcb9srd2sn\nHQzxSyFXHbHDdLum7V76s/lQnBdQpqfKsrdypOXdcDyqBokZJKIGbulr+0Bu\nNBU5MSeuRlk7ToH5iHZmGCyTNRwGosMcbcBm/oLf4wDRmim9Q/mJSUb5d1C7\nwXZfZn7QwhBIrSZN6giM7r5Z2t+lAWcHsO/jyck70pU5RO33iYTuPYoTjcOl\nMuIa2efDsUUG4Q+XbgyLvdELmFHX6vI/vuOM8uj7WSyeLzb7Zj1ISdZk1dD/\nz8K+ZVLgxYzyGZWBYTug4B3oLiz99du/lR0nraU3yViSLb7XOLcSFStFF62O\nDrao/hLD33QIC+TB926rGQTXHmIDb9ebsq5ETok0BhY8nPdok9ASlzUlEDcV\nCR+3NlISaEY4FigiynDP6ITXcLaeZ4l8YU89pNTDAm47u6WsttuAJ+rJLwJw\ndbgqC1P4AHw5w4NsJG9PKvPS51e8wesO5tPfT4nw16TMb1KO6ibOXjj2/urZ\nirAQ6QKUMR+52kPxb1JchxO0ExdGZdgfeLcfrhqodpuj/AG5RopYk4uS5Pn+\n6IqV\r\n=+vbZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b1a410c21f8ac6405b364e437b5af7eec06a2020","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/rtl":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/shape":"14.0.0-canary.96ea061c1.0","@material/theme":"14.0.0-canary.96ea061c1.0","@material/button":"14.0.0-canary.96ea061c1.0","@material/ripple":"14.0.0-canary.96ea061c1.0","@material/tokens":"14.0.0-canary.96ea061c1.0","@material/elevation":"14.0.0-canary.96ea061c1.0","@material/typography":"14.0.0-canary.96ea061c1.0","@material/feature-targeting":"14.0.0-canary.96ea061c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.96ea061c1.0_1644433258136_0.426490997233854","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/banner","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.e00181e59.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1d971a2bbc47c81ec94609b792f607accd1e95a9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.e00181e59.0.tgz","fileCount":31,"integrity":"sha512-YE+Oo4/o5//yODZfoqzumSN+f3CZsH2e5LJAdoQ4VQBU8+bbm5am8js+5n/uKWHS34Yu0SpZBd7zR2xVVwHlAw==","signatures":[{"sig":"MEUCIQCb5B1GswDVOTWw2AnZPTd2ac79h9VerzQpst/LGuqAUgIgB3YnLuThANVNjdQBAu1vkkfCO5JcI/i4Bf934ooQZ3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCuCRA9TVsSAnZWagAAePIQAJLxW9by4XIcxeoGeNJ0\nWnyBZ1PYVA478u/LdA0vubQk6V9i4+gBhEaBj+vBfGWozSydzS6qnCoI629L\nM9QjmI49L2a3k27BYjKiWrJ+ikyvqrL29+iZlp62gv2Gk90dPiAXJv/ZHkE/\naWiVrrxjOWHxWWe1quopPvzBBM6/HYAeNgjsHccItyG2YjwQELG5uZWOUasq\ngpQn8v52ZVzfPTi337xwcHkJXOoW5Ows5TU7vglYSiBh/9kbP+0CSlQ8LN/0\nX12EcNtTWkrwfhBMRbVrGo4c7s5kepgxXz6Tp91vsau0WRg4OCTJvoRFs98x\nCQ9BFSVCVbeOfXo+KDu2aJKfIgyPXgKGfGE7WZFt+rpQ5eNMDy0Z8OrrOav1\nAc1400zpSziCAmvm22W0OXE43vOBgp1RgZ06VjA4FEDUWcN1GGCF9Xv5ywSe\nz3Mkk0UfsN6U7PZwZkajt1FB/EYL+ocd+lMuSawg+z29ILRtWK5tNrdPN0EE\nlRjjp1u2oxsV1rL6/HRUIp8ksQOxLY2WsrrwZVNCv295ZRMp9pxei+bjHXXl\nfBIrCKXt4+kAS6th4CwCY/9/8OsdrgYISE6Tn5PLIKRW2Pcak3JopD9ADxeB\naPT9ZNyRMPaAu92wMRl87sa+xNG2qOZo1fdyNpMOBSfFlhWtR8FXEZt4DwjE\nLs0b\r\n=D+Pb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7e9ce072e9ec1ce5820d347b59d99209542a2bfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/rtl":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/shape":"14.0.0-canary.e00181e59.0","@material/theme":"14.0.0-canary.e00181e59.0","@material/button":"14.0.0-canary.e00181e59.0","@material/ripple":"14.0.0-canary.e00181e59.0","@material/tokens":"14.0.0-canary.e00181e59.0","@material/elevation":"14.0.0-canary.e00181e59.0","@material/typography":"14.0.0-canary.e00181e59.0","@material/feature-targeting":"14.0.0-canary.e00181e59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.e00181e59.0_1644523694768_0.06765836463973907","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/banner","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.037285f9b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a6271a43d8fbd0c88a944446061d826644966fd4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.037285f9b.0.tgz","fileCount":31,"integrity":"sha512-kJiJwC2HpwUOFa9E7L+SQIwEA8rjE5U3p5uEvgEP/1eBe7/zeWv5uKb0qhpoxZf2jeXpxYRbED9wVluJokYZCw==","signatures":[{"sig":"MEYCIQCmLxctnpYAdF4pJTk0oxI4ob0GnymtZBkbla1+7/oNaAIhAIv2F9XV9O5LOKIvaKDS5x5slJwwzYkg8Q3el3ooqiXA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtkCRA9TVsSAnZWagAAje4P/2WsyeOWnIrfdtwf22mE\n4b/shAVsWkmZkpRq2f+Ecke5U5xA/zMSQpZYbOT+xhDwnKZ0WMlNJE9StuRO\nQYP1+bOguuy5M/LzoondMSMh8u6rxUHn/imdkV8wadjfKBxl0/8zq8WcR51Q\n0OIgF+lGtmwlHNATbwHuieNGUacQ6Ijecvin1xRTQQqoVGWs6BxM8XWlz1vm\nqD0wtPuecInS13YUGbKz7nIhddXy+F5vJbwdkB0Kpo2DgqyWQ40BFiMT/USC\nZgQE4U0j6nmZNBSPP0B0Y/WXuVqpI1qmteJf3D7GstmwjQyeFlGMEWAPeTy3\nNdXg4tOng2dxz1tKCJp9UR3uf6YOyZl6lQi4nJypaR8vkEf4BrTam3t53gyE\ncc35JU6Bh8/Hs7+7VJH/91k6KV/gYC71Ph0xmPOvoD129zGJgq2sHYU9mC2B\n7k8saPlCUpOsyp22DTt/urkn3SiYSyOIuy7j3hBblrK3b5ZwDjAfmr4JnJiS\n5SqBOczK3fRXkXBxtiPuSGjTOnCVy23JXrpAYvAvErH7koMrg8bymhOtFJul\n8Ppcd0GtUJ/H+fT066Jjj/8VGCLglD7QgyD9lVQJCxz16MhRGIJZsE20EGi0\nU5J5fG18uexQczDntbAvEtFS7pA6YiO12GdM5si6EtJKhOWz8aax3NjfQ2kC\no7c+\r\n=hy1q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a9bca201560da3f96e435e6e070baee148bcabe2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/rtl":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/shape":"14.0.0-canary.037285f9b.0","@material/theme":"14.0.0-canary.037285f9b.0","@material/button":"14.0.0-canary.037285f9b.0","@material/ripple":"14.0.0-canary.037285f9b.0","@material/tokens":"14.0.0-canary.037285f9b.0","@material/elevation":"14.0.0-canary.037285f9b.0","@material/typography":"14.0.0-canary.037285f9b.0","@material/feature-targeting":"14.0.0-canary.037285f9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.037285f9b.0_1644604260061_0.4474931455294784","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/banner","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.1aaa68dda.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99f261bc90b9057f39adb49f6ea656ccf9b85891","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.1aaa68dda.0.tgz","fileCount":31,"integrity":"sha512-ZfM1MZ9Vi6bYTDM2ZesAYO0oxui43HCU79WgmaqQUUJnpATVEQF6z798laMXMk/214hQzySEMGY+xliNhGeEZQ==","signatures":[{"sig":"MEUCIQCmsg/3RaoZUleuoPn/pG2mJe63PDePklhVNoOgVDeTSAIgRLeftRJ1W/0keQ5S7UynUjjM6rojkXyOfACk1Wc3DbI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVWGCRA9TVsSAnZWagAAVyoP/ipLvKUbU+EDixg0Aq7t\n+qBvm8ziOf/rVZl63Isan0NrejC+966qJ0bP+BdWzMpesEGrYBP0u0njTLuW\nlklXby/cX5KHL9iL/6r5I+aiCMCmjGQnRzXXhAEJD+QehQEXKKwRGbnA2ynP\n8pDCJ7+ux4G0eMAfXzLxqkCKxrKWHb0ADhlgmdNrgzB4zSoVQA5RQOshcIbd\nzzHng7MyuSKv/fUwCXJEXcnO3z/wvFhl6LlLfe+B4inD94+JX+BMbfYXV7C1\nuijdfHi4K8+aGSN/YhfqP8yxd15PAz34AHmGbPZyMSAx+WQfZMqUMVnc4qTH\nC1KU6AoFNKHPr2XUuakpBN2YGCHjHGOzYu+2IW9OLVe2Oy9JC7libpsuptxo\nyrcd5J8/kU4GPGMy+XE4MPs5Dc84CtZlwjUEZpzpi986q1MgYLA3M+GD33EK\nOCgtDbvGHEGyXE0faB9YaKci5bzn7q9rZIwYg5AUDVIs8VOCAmk7W1jfE0fj\nBBzNKObVht0mkhE3GvxGj0KmsfPrwMyaLiEgWg5vJ8N9VdI8Z1xFv+82YGSY\naWe2xnRuPnZ7umEJau+s9PfaBc8z/rez/cun7pYMnTJJZZNAdbGyskRB0qK3\nnH/1qgJY4sFnLj4/rICPa0Yauxl5teYackpNx0IlVWNbJfAjD/jNXBPZUg12\n7kYf\r\n=HOtI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"49eaedc3ce6f1f8db6a6929143c077e8f65694f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/rtl":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/shape":"14.0.0-canary.1aaa68dda.0","@material/theme":"14.0.0-canary.1aaa68dda.0","@material/button":"14.0.0-canary.1aaa68dda.0","@material/ripple":"14.0.0-canary.1aaa68dda.0","@material/tokens":"14.0.0-canary.1aaa68dda.0","@material/elevation":"14.0.0-canary.1aaa68dda.0","@material/typography":"14.0.0-canary.1aaa68dda.0","@material/feature-targeting":"14.0.0-canary.1aaa68dda.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.1aaa68dda.0_1645041029913_0.39737044161974167","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/banner","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.ab4aba1af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7341549d1fb36e46c15cdd31fc4c2b6199493653","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.ab4aba1af.0.tgz","fileCount":31,"integrity":"sha512-JWoqUKSLfhzwJN+U4+D9stJkM8UMcbA1JPOc7w49/BQ2iflqfusF2l6iUfi2+lQCb2eF1IyPB7KW8YvSjCr66g==","signatures":[{"sig":"MEYCIQDtt6Bx2nYVBnG60mL5NtiqF31TX1toytOJUmx+vkti1QIhAM3lEKQEHJtzSB8vGOe6ih5ZvJ42Qi9bs89WNYZpCJZx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpE/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFGQ//XAmMDjA/N0H5DVNNfiUgOznNhrnqs+ngYPIilB/Wd0UKO3Yp\r\nZldxz4QSfQka+JB9jiXFkq/7Af9fHmR9xpZ0nnoXz3bCeZA2IKTufYdmtIfK\r\nPtIUGP9FCuDAlcXV9MXPVVvYW/Tcnc4K+i7n5n1v2TQGruU/jgjSx0oqd2QN\r\n5FJ/ksdsggPgAS1ePi3vzea8iN08PUHiCecD6Lc4wRj8uWqX7b1c4PjMqte2\r\nfCdI7/6+XiEm6b+CIYGFer9wIEywhxOaY1qk0uPLJsFITjnGuU4vcwBp9ADw\r\np1PfEMZTY1cNr6j6DomVZ2JFbAgUNyhiGoCeWzFzxXLdMEGenYWqDRidTEqx\r\nR72v7ns8HLHiNopEoFDqWe66B6j3Rz9NiCJlJX4O5pGLDEqEVu1jECWBcB8u\r\nPO6LEQpseS8l+w2Bv1J8WtGrSBDZlNcpdAONP8jH73H7zewWJwt/N88RwnI6\r\nffkex+ZY1ORQJhbefw29dUV/YeEbpz53wcRZQ73iWzgLvW6dDoxY7bOYnAal\r\nTxleBG/yAK5WOuKi9wUS3tiYbEvH4JVSHYtnMsavwNZhHxoAO3tmhu7VulTj\r\nkOdnkol7y3PBz/HoS3Xpw/B+HtMNFm5PSNF/HYB0/ERggBgXsir1ZzN4YZwX\r\nd0FrItjdpj4rFH+36V+gkWubYFCEsIWaNWY=\r\n=ncJV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"89aa095a35d4a006012f1de893cf181c5725f676","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/rtl":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/shape":"14.0.0-canary.ab4aba1af.0","@material/theme":"14.0.0-canary.ab4aba1af.0","@material/button":"14.0.0-canary.ab4aba1af.0","@material/ripple":"14.0.0-canary.ab4aba1af.0","@material/tokens":"14.0.0-canary.ab4aba1af.0","@material/elevation":"14.0.0-canary.ab4aba1af.0","@material/typography":"14.0.0-canary.ab4aba1af.0","@material/feature-targeting":"14.0.0-canary.ab4aba1af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.ab4aba1af.0_1645121854901_0.9309977849469504","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/banner","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.e58552c6e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90043bb3f0c97d53d06ada35952bb2190122ad53","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.e58552c6e.0.tgz","fileCount":31,"integrity":"sha512-2wRcwRVQIWpX8EuUo9JfXtM8t/YZZEDlFJLtGSxZarnya0U/p/n8NXMN+OS/xfDnGDHP0a6AWjb8cGqeeYns3A==","signatures":[{"sig":"MEUCICi94k/9AqfIizPruDSJUtc8lfDY/e5VHSPlmTB7raJKAiEAvBI8JG9EZEsc3QqEXKBqEteo+LIXuuEcMFc6uVJzAg4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk/g//Tk64My0HKd1pUOfY9GCoSUVq3DF8ep3oKe43YPricBzaO4ag\r\nVgLmxtirxKHKRHXXbLpzOP5FU9XT/YAIespGeG3D5ireVDuxZRHZ2oMOHQJa\r\npJiVfba4EoI47xeI66dLCZtbo0vUFSHGwlZZJkxoEnJBMRNUV5JGLhFIElHp\r\n9rBiHvsPcohZG0lrjZCiblK7ST2wNkAC2e/fhCblSvGX0/rrsDzhORaoT3gX\r\nhh3d1W8sZ0aoE99mQkv4Vtw1s4nWZRqmrATPFzjq31f1VNOUOgMYar1oH5/T\r\nzupjcX0tFHiLAs5ziEODoEoNDcIna9kpTore8ivQMQdKIHT2/xYpIP+3w01k\r\n2zh99rnZN7fBlxhOKQIJNavqGJUVmRStPCAAsWTHpNNcJO/JwEFM4vpcPeK7\r\nEjnb5Ix3uE68/u+XW9IwVwhb1o2BTrq1L0taRhXTjUaVPCKZXDPR6qSO784o\r\nqgazPGQwDSL1xqsTIQVjDZMzPe5EARsq6ph63GdZR0cKKVQbUSLPq/77hzUr\r\nLdsU5sS7gpatgXOD7dnfZtCqLeMjWsKjqJw2ubetW34wZKJk77hzFlkkRHfB\r\nyGuTWjgWoXAWoZK6vD21g1MCEE+TD/5EgYlhaOjZ9u6fsBa95v990bptHAr+\r\nZOcRV24tTAnc2TevmJyseRn7yqpJProtGak=\r\n=oBzd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6d5c1a026de93c3896f05529594e5b025f79a060","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/rtl":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/shape":"14.0.0-canary.e58552c6e.0","@material/theme":"14.0.0-canary.e58552c6e.0","@material/button":"14.0.0-canary.e58552c6e.0","@material/ripple":"14.0.0-canary.e58552c6e.0","@material/tokens":"14.0.0-canary.e58552c6e.0","@material/elevation":"14.0.0-canary.e58552c6e.0","@material/typography":"14.0.0-canary.e58552c6e.0","@material/feature-targeting":"14.0.0-canary.e58552c6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.e58552c6e.0_1645207521457_0.6130425858002468","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/banner","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.868793776.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ad86dd381fe757441d50b1b0a6cb139629a0176a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.868793776.0.tgz","fileCount":31,"integrity":"sha512-24nvIwdsSrdWc76P8dcNEUJMIBei7fmridiv9XkSKZ9f1tE4cz65h6chr3lRZMbctSSx5gIrmcisuye9gk8pKQ==","signatures":[{"sig":"MEUCIQD1Krrrqlfi/jlJgDAg9SQ50XKuxQ12en/WB9hFxf5G2gIgRR0ndN52cjsr61iX9RlHGUt8Ynij03GdQStaWJImGas=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTuFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrepg/9Hn1ELbh9mwqkSVUlUPP37dhlgtXOXmJDwIcDD1QZrbJW5fqR\r\n95vkI99nHH65e+6AkuBDvgwKRjz9fsssrAytRav4jxPyoOQHfGvU1PSAlfyf\r\nyWrkgJu8XJtCKGPLZtOsjE23rrx1hbust2Y2DGgHn8cWkblLRUcumDNu4KST\r\njlXFDHPTn+JC0ilDZnzlR9YJVY6YmNmFMr9TpuqKHFtK0CV0QVCp0DFh/mkE\r\nhqYFK47LZKJkkPmDQV6LGlFFH5KHCqWZK1N3tvYfLXSpv6ixVdjhHAxu91IB\r\nsj6XcBtji2HwkrXc4dlNFZVvFYkN+Vxe2haE4yw8r8sMJkX74cPq4txSvcFE\r\nuV0SmAUayMgyEvfmB0MoeGhcThor4v3JH5IJFTxotoqdnrgpo4uGOhsC8K7p\r\neLi3oSvhBqEK1teCGXycjYzbrpGJycFZgEEBCGXPEOW6YReBStZN95DxRVS2\r\ny8mtS4KCXCMfFlmtB6kePVIMx0SrRvBpxq92BSZGmM1BJlXjiLRuGzwN6Vhp\r\n8G5ts5Hyhj6gfBmrVcsoJRF5pAZOgG8FVZuzrrqYl1b4RMX9yGRPk+PYUPz3\r\ndv86afqnGF4fQBZejh1PkSymkmBJDSH4J69nJukAJGQGqfTRM9Pnd5vK6r3j\r\nGf6ttBiTgFfk0CRvWcYmsOlvOzEwsA/yf+0=\r\n=Vr2m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"78272b55e375cfc80b8f288ad4bcd4bba3d8493c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/rtl":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/shape":"14.0.0-canary.868793776.0","@material/theme":"14.0.0-canary.868793776.0","@material/button":"14.0.0-canary.868793776.0","@material/ripple":"14.0.0-canary.868793776.0","@material/tokens":"14.0.0-canary.868793776.0","@material/elevation":"14.0.0-canary.868793776.0","@material/typography":"14.0.0-canary.868793776.0","@material/feature-targeting":"14.0.0-canary.868793776.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.868793776.0_1645558661246_0.9316993968519005","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/banner","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.fdc37a445.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56d59900628429729eabd132f01eca751c8b8143","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.fdc37a445.0.tgz","fileCount":31,"integrity":"sha512-IkvVaDQHwVvZvQaC/sDwlWww+ZJ+6n79/r6Lpv+w6J5xmH4XjWktZ5IllQYgL4jVQ3rFi/95FHILYBd5a9VqTw==","signatures":[{"sig":"MEUCIBks3jitPWLkbJ+82s0hKayPBaa279VS1Z/sIEpldStsAiEA9NP2Bh94fGR8aK0jjJcvJPiKoD3tlhIgElTXteaDG08=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRi3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+yQ/+PIzltQAugxazxOa2CnnodxW3RRwiNe1Prd5hrTdczB+oKQw6\r\n+3lZXDUuDttwY2xoXtOqN2DWDFPRhiLX3xYtuZsIR2PRBHHAaSkeIuYZr85/\r\nyXCY5S8lR8McLo4wa+2XZRUgumzsFvZ/yJ5Q6nLC1UX5ZI/mQM5f9a2N5k3g\r\nh46shD2LN08DMSq9oJghixtl/7Cl7gy8v4BkJbOzZC8RViDuuVA1nESiyyo3\r\nwjfqiY8BQ/sQZWtujY4QECCNFha8kbJLowCwEJRbzYPndAigrvycNtosoHEm\r\njrTs4Fe7AYzrC51nH7bC/hwDEOEQJZsyHds0+Z7fnDbXptFB6M+nSAUxupoH\r\nlARD4xX+l/nCX5tRztQ8eoFedpc1+2CyBJG6Cx0KDWjnjqYX8XHCvBFcEcVz\r\nq1/Oy3fu6Ie8SSq/BF2ItyWxvyHxce6u/1twLwQftvA+cGYYqQmnvxAt0rGd\r\nKIKmRx5kEOmSjzDm86N/3zs6DYw7CSO8jCOj/VE14/9h4nlvI9XbS8dXu529\r\nCnR+RXkpnlR2U1e/MSI+4E10Q0zEjYo4hB6xMAfOZYZpo4ubGmnr0v92QWdq\r\nNgMH/50anKsX91Xp19r6Twi+0d6B19SOmSK2wRCkKzIgz4nD5xXPqEPqTJV9\r\nSnT1OUhBmW/GnnxzdK6q2GB8KvyjiahEKuY=\r\n=SqLp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5a8fd2fd927d036e44b0b22f48d858fb848e504d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/rtl":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/shape":"14.0.0-canary.fdc37a445.0","@material/theme":"14.0.0-canary.fdc37a445.0","@material/button":"14.0.0-canary.fdc37a445.0","@material/ripple":"14.0.0-canary.fdc37a445.0","@material/tokens":"14.0.0-canary.fdc37a445.0","@material/elevation":"14.0.0-canary.fdc37a445.0","@material/typography":"14.0.0-canary.fdc37a445.0","@material/feature-targeting":"14.0.0-canary.fdc37a445.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.fdc37a445.0_1646074038835_0.36959042776662954","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/banner","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.43c7d87dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3edccadea35c74cee5f579c936354b8a011d5c66","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.43c7d87dc.0.tgz","fileCount":31,"integrity":"sha512-7Qbk4m08Jf/b9smBkUovzgnZIOyoi/JUK2Lx2CZpQaLQ9fqtJUHVlKYlyBLuISBiHLCyp4bo31HIOdvmFeVgXQ==","signatures":[{"sig":"MEUCIQCeOSxTXwG4O1gej9+9uREGKtu6S1WYMvEXIc2qdMofxwIgOootNmJyqQMdq2E68dd9WxYu0A/ERDkEgQz1rKUjyQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjz/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbIQ/6A/+FAPy070cvftlUAPMyR/MROemLcyO8UpeDpspkJncvxyEh\r\nBZDw/iVBbc/vmgUy4Y95PWo1lvvJABpCL8/bWKGZIZ7ROZn4gSVlpdDcyzsX\r\nbK3VefPfE2e2On+c8W+MZ1hJFzSt3n18GC01Z1A9PBPTx3k820CtTzzXtvO0\r\nXYg4Km80DMioBabshmSeu0aBAwU2jv61tj5YxBlLvRARif/NQcVSvTGCe6mi\r\nlnfMb0V/fGY/qvnZilncGQlsjy/xwaSNjtpEJV4WQrBW+Df1t5qlqDz2fPvn\r\nUBZYa+oBYhVA1pcgYIQ1KxftHuMJRYeCUMxoZ915xgqSmo+KhorpmbJWnW4M\r\nZ1p4THvprJPPicKy6nsgo9CTcjQvSkyAQFSx1E0jc8wGMDrnrfVSR08YPDsJ\r\n5p6R/UmOoXviQSKqPl90r8eYSS25+J3wRM/JE6bA2MWDY887PKdU0ZCPyECd\r\nv7Pxv4mMwkUbUl/398awwCjZQBP+Auyr4yimgrfu0Cfyq+u2Yxnw8XBPthYI\r\n/ApQrV2Ou9D08kxr52giA4WUYG8uKRzo9RT8fJ2pMcYSIoBdTWoTjcmYUmVQ\r\nOoQk0WBB+kqMFrCgjlz4qLTpfwn9gzSYKqjBrkJ2fYMzty/+2loiJ6tEsQCD\r\nfz3ZRazpRhz56LNoGx1WYEEUZ7dFoqMcBVQ=\r\n=dFwL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c03dfa84e200bc6d570c73762d7ce507d0659e76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/rtl":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/shape":"14.0.0-canary.43c7d87dc.0","@material/theme":"14.0.0-canary.43c7d87dc.0","@material/button":"14.0.0-canary.43c7d87dc.0","@material/ripple":"14.0.0-canary.43c7d87dc.0","@material/tokens":"14.0.0-canary.43c7d87dc.0","@material/elevation":"14.0.0-canary.43c7d87dc.0","@material/typography":"14.0.0-canary.43c7d87dc.0","@material/feature-targeting":"14.0.0-canary.43c7d87dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.43c7d87dc.0_1646148863716_0.9785736050757379","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/banner","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.23043acd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a78ff74e2722b0c6632aba6a7002d111c26f9c8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.23043acd0.0.tgz","fileCount":31,"integrity":"sha512-16UKOVPXUUopz7qsF8zU8GmYCP40WKsBuVwP50rWNCaBHCWyl0gt3x+kADrhG2l7jix5CDW9VD+Svc6z5jG9Vw==","signatures":[{"sig":"MEUCIAstrTEuVi23cS0qpBzKpMjqqLys8pVcUmQx4qPj+1MwAiEA8xWhFIzpts8IfhHXs/94YC3FnMLF2GQ3ce22puhUvQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrW2A/+JU4uAQ8JM6+r1ug9TXaY8o+kGK3shHxLm7I9yd+eeWq3AT/D\r\n6H0T+VMXOOaaiqlPBmmweMREPLleps4fVr1ws4eOpgh90PdF5IdlrB9g2g4+\r\nkT3LJeSqwZBfOu9jS9uOI3hPPJzi5m1ECoPszgbJf0BNEaNKrncPBUJgvLTg\r\n3K1UEHBCw8FW7y/+ljG74xstsO5UYobKATV8jCVVDy43AhazHjPxghOiTbQz\r\nfypRYldda4uET/+LRfDaNQqzaBeYjIAa3vPwWQAj/5cunokWVVLrJqIr3Je+\r\nhXjySVcFu4csTsZMgMRhsbR77NvwiBvKhiZNMcTRlM2vV8ma3KysvmR2olnT\r\nShcHTDjNUpITwmiLEcmHWEiplaEeHtB+UP3xckCZIYhTm3mXaao3jp8zzmbm\r\n4eEga13VrO/GkTJleLrAEufhUJaMDDikp0XkwKB2b0QoGihTRAFBk4XqqnOU\r\nhUtLDgMXwjKYu9hEwXedj1UmV542Z2sFuWNgKNnOyjblFrqcBZT7Mr5ZcjAF\r\nf9thHtlinm1n+VJT9mlincvtyi8B6lqAprjmkWRIlLEEkyHiSAEL/qmHYN7l\r\nQMxzEhACxTeqo8kuTHY7+UtPOWCCuns35TEk53BZUbXHQhO0euHHrvdey8tU\r\nfk34dOWSwSFe3XhibOMvQm2tXQyJexwVmqY=\r\n=Dw/l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b1cfc3908c111a04a69dbaa90966642093f79e86","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/rtl":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/shape":"14.0.0-canary.23043acd0.0","@material/theme":"14.0.0-canary.23043acd0.0","@material/button":"14.0.0-canary.23043acd0.0","@material/ripple":"14.0.0-canary.23043acd0.0","@material/tokens":"14.0.0-canary.23043acd0.0","@material/elevation":"14.0.0-canary.23043acd0.0","@material/typography":"14.0.0-canary.23043acd0.0","@material/feature-targeting":"14.0.0-canary.23043acd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.23043acd0.0_1646252914030_0.6970627414825588","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/banner","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.6505e61c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"85c0a61affa690e9a090067ef1d6d6d7d01d4512","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.6505e61c5.0.tgz","fileCount":31,"integrity":"sha512-pm2iGcawEPzeYfsWKAg5trxtgbE/WHkP9QIL5ESNCqAvT5VqCTVAPlXWXiuhCeY+uhlcu/VtH5SoUzR6q/lIXQ==","signatures":[{"sig":"MEUCID9aJd3022DDAd8FIiWOmkPXH6dMBU90kHME4bRjPusOAiEArGaAypPmEhHfT4izBK8fPtXVQK+bzd8LjN2Ro4W8RME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460009,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR65ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqDg//SAEua/CQMzCXDQWPxW23uLCi3eT6nc6N2szmGvaJSOBDBF20\r\n8L/i3TYepzYFVJEVQ7VbdrXkCT2bSlPGxPkc9v0zn5n903xgI9jICQpQ08Vg\r\n1y3ZMtFpnqobzP64TE9JjMiBobfjYvl+fVgM8bvj8eWitiyyfIt6MmM9ohs/\r\n9TSKl2Vj7OV3abFzHfA/oU0e+xGZiHERMKICIJnOMiQ8nhFPEDTSFJkjH0ms\r\n5ZZRMYbrQMzHQas2NkLxb/SKKKGRglng2ZFpIyYk365fKr0Z8xibClJZElgv\r\nfNnNRItZ2Egnhl1QSn1HtQ2CYxxzv+yIC6+DPRcEgIRciZBapzwwLuVGg2jE\r\nRHd7rp1XPcEwPu/73dk9cDvIuzzuKONqi7REAGAvulDPVmpT8yghKHsCHo2E\r\nbc88KCZuZHt+Yz1N4/lGlJLZYmTVEMKbFMhp45a93Tc74CWfV11HfHE1Vy43\r\ngOGaG2MaFPGE07tiI2yb7/nDvDm5yn54lBkmqU78Yw20pDQ9he7Sr2dyGel9\r\n2CDOaXPSFpgZUYaOct9zjnGfF2qkLgEqWzhO/ykP4+LLfZeGbPIv4dedE4SW\r\n0lkMenJGIVY1U2PfWdqM51cENixoKTPG2HnYQFucrr39YtDCtexGchGEbsiI\r\nRE1pZqCnxbvaFyvlTod06FSqCwp1apNieVU=\r\n=cK4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c9070f0099aa35dc2460994d2d83a8330b996c5c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/rtl":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/shape":"14.0.0-canary.6505e61c5.0","@material/theme":"14.0.0-canary.6505e61c5.0","@material/button":"14.0.0-canary.6505e61c5.0","@material/ripple":"14.0.0-canary.6505e61c5.0","@material/tokens":"14.0.0-canary.6505e61c5.0","@material/elevation":"14.0.0-canary.6505e61c5.0","@material/typography":"14.0.0-canary.6505e61c5.0","@material/feature-targeting":"14.0.0-canary.6505e61c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.6505e61c5.0_1646337721547_0.3234912065545186","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/banner","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.16c166154.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82649e71f1a3be68e98006b6b6d96c6068a4e7c7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.16c166154.0.tgz","fileCount":31,"integrity":"sha512-tL7DwNaUuvIk4jQsAb4OkjDAb4w0Ep+92UAplUXgExF/yVtOjQm5A8n7Vbox4l3GLg0VcTgXLE6JMooPP0wRYw==","signatures":[{"sig":"MEYCIQDCAswq8wwwSRRkh6+f+YwQ3CWx4hP0zwVtP1IvS4gmGAIhAJWGP2wz8y5mJ5wBt278VYhOtJKG4ozFEUZEBaf1pafv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXjQ/6An20yiQwnRfTPPsxrJCMwRFxHWBWXN9Bulz+GsMLEtH5kWl+\r\noTJiDZo0akv0Dt4lPjLrMgvwukAx+fbHpwprPlNXl7DLZT334PM11yAkAwyb\r\nC1+KF2qsE45r9MksW2qHcY7JgVNiSTEf3W4zjQIyLSYsGHbz9bbEYFEo+lWe\r\nEdYJVHvPY4lYTcz4PYWkvW60DQ0OM0+oGvGOCjMVPFWo2MasTmZCgLadtpjh\r\nhwnwsvXahjRuLNmIgE2b6sc7R/36V1KYvnty4vijYHmdeF8r1Y8lUff6JyjT\r\nKGo8XL3DyMJV0+i3xeOPKcb8YU3yDkQ92P2kBgIkRZvygyEy6WOGFJ3n7iMm\r\nL8lyWmfdNSwF9mNM2aQk2h6WpSHwCTFYW5iAIUGU0GnThcv2Bs3mQUaSuVFe\r\ni2im5rCxVE5A/ZlnDJc845Y8nvYs3CSR5iO2VJrhpBf3isIIx+a7YvRwB6RB\r\n7tv3i9Bnp74UD22DpbVCLrCq07xET0SXobkWYurgpQER1udmK4MXcVu6/xIk\r\n0m7d3x6lWBiIlYldkWIZEHWU1Zs1SMoxBkRpdj0CRGNkRGKEhNf6VkXYp6Bq\r\nvqDIRsCfOikWp4x6xdsouOO8W0Tr7i3LAbrU+Kd9rQvdjgLWAHGG23gx44zN\r\nj2yLB5+l0IBiI46SzhXkCS5ZWYxUSEDSA2c=\r\n=/2D8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dd1bb8b4a67220dc0120ba2dbdac900e51002949","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/rtl":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/shape":"14.0.0-canary.16c166154.0","@material/theme":"14.0.0-canary.16c166154.0","@material/button":"14.0.0-canary.16c166154.0","@material/ripple":"14.0.0-canary.16c166154.0","@material/tokens":"14.0.0-canary.16c166154.0","@material/elevation":"14.0.0-canary.16c166154.0","@material/typography":"14.0.0-canary.16c166154.0","@material/feature-targeting":"14.0.0-canary.16c166154.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.16c166154.0_1646781809917_0.9022758549916325","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/banner","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.bdf1d3771.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2dfba0329aa156d32979dfcb9bb599e808d9bada","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.bdf1d3771.0.tgz","fileCount":31,"integrity":"sha512-Ilc2j6XQ4grHFhKVWFyNBoYrL9QMFTfweyMfVuBX3ew2bK9LQK85zgk7Og0+T/O2a/e4PcF20+m6JDp/ZCgwVA==","signatures":[{"sig":"MEUCIQC8YPprgqfE3wW3JXDXWp73vGmkC4wk+gJTMmpcK6hnvwIgD/thsJBEL0mqJTWCcEUKw36z+k/RT3IPfX91JSsk50Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraKw//YUDPAH42Iynj89HllVFhHXhMk+oHHgNi/duerBTarSxBKMXh\r\nmYJkecVtBHWSpycRxYpmrkBDHceOOLzjsR5tbIKy/PNrO9+C0cc2DDyDFHmS\r\nWYaagJ5aP7F+4n3f09y98MUIQ6dm2wptAo6bEkJC+5FHLczT6c07M2xz1ska\r\nPIVNs2Lz7RcfqHBtBHnBTkmCfkfbHyRMOINiOnqE2Ee/eaQR23Fz4CCh1YGE\r\n6M/sP1PTcDEc+4QgOfn09RMWCZpTXCneS6qCpdLZL/3fbtkEp0FMxtV8hCBe\r\nH+1slUHdZ9gryUPs/fkOZgF3ZjF+fRVWkoCOiGp6JCZa5WzqTQlg89p7Jyfs\r\ncwrbQtoJxGqNn55XqlBF79ISeTSB5jA2cZNpb5DDelp9/5f1k14bNbr3o0/S\r\naOj4lNykESNo/kyv4Pq7UPBoBPReJ5LSJe4U5a1ipic4wRwSyCa2CNxZUTIT\r\nyX/voHvt83+E9HaK6OFVWqVMVLU6fSyv6vAuZzh/wxrjsbpsSasDI6vzPVf5\r\nT/Wj5g2C0iPML0RTEIf8PODMTlPeCM5MBbRYABp/HlWFEGah1462KOSIX6wL\r\nPU3lfwioRi0xqU9tmbxWc1D+BT18UER97Nb+OwfwXX3CP8ag5LddGstoqIH/\r\npC1WB9JFfP4ESh1YKdP8x3mG9V1dMd6zARU=\r\n=Qkve\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bf598649c7389f49207c410e58144f75a67cc4f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/rtl":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/shape":"14.0.0-canary.bdf1d3771.0","@material/theme":"14.0.0-canary.bdf1d3771.0","@material/button":"14.0.0-canary.bdf1d3771.0","@material/ripple":"14.0.0-canary.bdf1d3771.0","@material/tokens":"14.0.0-canary.bdf1d3771.0","@material/elevation":"14.0.0-canary.bdf1d3771.0","@material/typography":"14.0.0-canary.bdf1d3771.0","@material/feature-targeting":"14.0.0-canary.bdf1d3771.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.bdf1d3771.0_1647268195300_0.6294076640759945","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/banner","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.cf4292778.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db3ee431eea18fa22771accd030a66880c1b4925","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.cf4292778.0.tgz","fileCount":31,"integrity":"sha512-7uTaNtV3O4A88N92+7c4Qq3Rt7l7EmYSyVtiEhe2xR2pN/8Q8B9WlcjbRiRufi/PeNRKKYl6sG9dIEUyedRRWQ==","signatures":[{"sig":"MEQCIAD2ylaGkS6M6iORjjaAAPOrtnKr8iCceIBT319QCpjzAiBBTl9JseDnjppO9twdXz3Rd7/nEV0Ok8SZeMR+JcQ33A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL947ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmra5A//csAFaY/f1iO2hGoTYMF31+LlxXXjCancu3QAQi1FKWODRNqg\r\nPcln98rjq2bl2l68heACZDJGbjLp0nSJO8QuboltsDv3JR1F5UprnE41Nc0b\r\n35ZU2m+DqgvzF9UJBwV5HZS8Jhjy2UepNHPFDgAkFBxALhXDnq6vfHJNen2T\r\nVefkNgrHJ0FXbomdS+7obKmOEk3m6OzphlnrzDUH0m0u4sN10DHwKjSob/Xb\r\nf50pKOgcaSmuLfzMAFkolz9j6ShI2IuuxtDXiH61y2gEiU9hICgvUqEI3X90\r\nhe/AEkvERHGmyfLFzIdSiHmnywKFLzw8LqUo6rFeCTDvZ+VqY8YPywz/yO8R\r\nUw363wTAQT6QNcIOGFcUnsF2rr97DQ8sfJVvjOF5+PJP6IaRcUTA25JdPlI7\r\nD3J7sJU7FvogCf6ENPqCAZ01n5TqmQZKx7mZ6yU2Qxv/tF4loZaDflravA36\r\nca6vVFLopMSEGM5dr/+k2xDZRHA5lBh7Ui2SA98UnyaBUy1vWLB2/A2G0pQq\r\nLykWC4sjo5M9Y+mtfmGJFTUMWcjdS+FhrFmhJoyr3vcqezGj7sBhecC0zx01\r\n1WcS6aUsN/4MzgLNQSJuwoK/XgdwUpVtAa5I9dKmVWMdNEzfVomHq8lcaowm\r\nuj1TFKNlLAaHHRZdnBtPLwLLlNDz+J0BztY=\r\n=Q7ch\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"85b1d5db9650586ff51d999fc12531d07489d13b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/rtl":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/shape":"14.0.0-canary.cf4292778.0","@material/theme":"14.0.0-canary.cf4292778.0","@material/button":"14.0.0-canary.cf4292778.0","@material/ripple":"14.0.0-canary.cf4292778.0","@material/tokens":"14.0.0-canary.cf4292778.0","@material/elevation":"14.0.0-canary.cf4292778.0","@material/typography":"14.0.0-canary.cf4292778.0","@material/feature-targeting":"14.0.0-canary.cf4292778.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.cf4292778.0_1647304250741_0.4695489495178231","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/banner","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.bbd43e0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"272bbb890f664b4b40486b9c53a592b5420c6179","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":31,"integrity":"sha512-FoEJIM/jl15A3yooCgitlv0QzOjHSUs2Mg0I6TblVZNs9KvLq72rjgtddeH43zfkZ5kFBzkRU6cQ7sT7QmRVNw==","signatures":[{"sig":"MEYCIQD+JeOwRdtfE3rmpj9Axl64A4+7tM3f2P7KA7qdbKmYjgIhAOTZm1+u5xotVKOwAdKrcsdOWOWxEBFlkd+C19yYQ/7S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459590,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk3BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIQxAAmTJQ46s+TzITPJYCueCs9xvDtkFvrL81odxDPmv582XowXix\r\nDc8wo++unwfAvnxeUmIjgLi1d7z3gISJ5/FZkCqAhS/LQe9oZ2O0mQ8uJ9lk\r\nX3k4xdX9D1Etv6lnlHiFVFWJXl/Uww+QAl9h5uCPwd7/bXskUbylOCWRSEp9\r\nkG8qJ/AtYcAROLlrSxVgM9QZxYcHTA/Eh0jTxLknTASYSFsWVgNS3pYTWO2B\r\nObFwcAANnyCCJgOtmRho8n07qgW4IMwUV9awrD3/ymwE61Z9+LcP9kCpvgoL\r\nyfxe2Gf9nI9QC8nOk0Y3VSNWZ9ELWRfQ/Xv9ZmHlE7AqOvYO2EehdB8785Sx\r\n6tfQaJ+Sm1NZguK0vsmTJvMxZ/oB2M2jfiI0fTTGSGj3MPOnKZH/fXaTZ10h\r\ndu0/2Yg/+eBNK7oX991hPr4Gocffr8uGGcOQmwilWQwELvrsOcHJauEoSmdL\r\nz/OdpPNLoevTAhVONmE95Af/RKquKshiLkdKHHRsOMOGf4yCq/cKfVhi03NR\r\nQvYahz4aoF7r1cpnukUCQF7Cs1+0+VkY/CylPZZnGkdtCrOMLv/qogYswBTA\r\nY+PMcPLYYq7547q+rQrMAtEJWFR8iJDk3iQVE3ZDiWEqYxwOGAFoS2LhtOPI\r\ncEdBggQ+snKPrw6OYnhbGI6+hsr+Wr9evVk=\r\n=vb+b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bd60ebc6c6267688058726d6f98421b0e815336d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/rtl":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/shape":"14.0.0-canary.bbd43e0e0.0","@material/theme":"14.0.0-canary.bbd43e0e0.0","@material/button":"14.0.0-canary.bbd43e0e0.0","@material/ripple":"14.0.0-canary.bbd43e0e0.0","@material/tokens":"14.0.0-canary.bbd43e0e0.0","@material/elevation":"14.0.0-canary.bbd43e0e0.0","@material/typography":"14.0.0-canary.bbd43e0e0.0","@material/feature-targeting":"14.0.0-canary.bbd43e0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.bbd43e0e0.0_1647463873321_0.5240894415556916","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/banner","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.1b6afad86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf12957c81849ad6e94366b78740350ac236ab13","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.1b6afad86.0.tgz","fileCount":31,"integrity":"sha512-Fab8hR9uDoHdT8kz/5i00/KDDK2kLySDUAwMsAHx2GyJ+JTzTUDeCBX5N+o/zCYRDQb1i/j1RItHez63uJuECA==","signatures":[{"sig":"MEYCIQD8QNBAUdWg51GJoWIi7NiRj+WA2GlVwgiVesA0hLz79AIhAIg8iM/tUMmBslSb0r2QMvoZNS7VKfJJwxuH5L1bYL45","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDGg//TLGvtahTDNYrlFA84wfQg2RfFkEeOg5pFgXFbVVhphBMrr5x\r\nbyR5WyGAmSwBMgC+zs4T/afp093NmAfDnW1DcxYv1WC4ei78iSrqLb9JfrCT\r\nATooqhzoEz67/Vl/NpX894iWNJaekrwFhw66cP19WAw2xnawWyC4NP4oAfon\r\nGWsobzKp79YxcG0dLVa+HVgUSiJ0Nwx2Pp2wxFQJjgsYcWHQnr9ASt1q8FYQ\r\nMFK+EJQc9oNru6ky8MSsZkfk3C8E4IzI17G1zXkMleS1/WRcPoxgSPtFAyVU\r\no3lTRrpZ95EZ+rNjCxyAdrzK4KGF442mcpraO0DwI5VZZAN4mVZy3ac4dZZm\r\nb2MqDiIZHHiX/r4FbVAcJLFF7oBIQd90Q4RnomiPudtj1ivRVCHg+/y/t8Qe\r\nQvkVYwmsZvDeQy+LtuZljHw0/eVYJdzbKYFnEUyfDp0mTiHW4txKuZ4E7MAt\r\n9uClHLGjoYyiiKbtzGr675iu4GxCtWMmbp3iBH94TzO7C2B+sdkeC/6i0Ggn\r\n+1AVGiofv1A5xQYIt/ST0ovcO7V3y9Op/W6BZUptwbNNv7Kqkx5yGzdU/AWk\r\nCj7IGf4qQ37Ut4eKfMXKSeYmBiKkb7RGOORNSj4eEWRHKwFqfiEDE3cUHYyX\r\nlNutnRDAcAhM6o12TDzPMKEE2PE+XMMBQ/A=\r\n=NtVr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5e32cc72145fa47fd2155c83c81cfa7ba5e27db8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/rtl":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/shape":"14.0.0-canary.1b6afad86.0","@material/theme":"14.0.0-canary.1b6afad86.0","@material/button":"14.0.0-canary.1b6afad86.0","@material/ripple":"14.0.0-canary.1b6afad86.0","@material/tokens":"14.0.0-canary.1b6afad86.0","@material/elevation":"14.0.0-canary.1b6afad86.0","@material/typography":"14.0.0-canary.1b6afad86.0","@material/feature-targeting":"14.0.0-canary.1b6afad86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.1b6afad86.0_1647464684390_0.21963393383460295","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/banner","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.bdf9d4af9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"788cb5a38b256fc0d66421991ac1318ab8fb54e1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":31,"integrity":"sha512-s2SX09E90cbi/Jvwv1JDUZ4uYBI/kdI2+0mWc9iOt30lx0KRaoz5+2SXfU9x0iWZj1pm0g08z88FfHxiC17Vzw==","signatures":[{"sig":"MEUCIB0UXwmVqHqLeZboEChyc+eTugDd4n0Nw/n1wZbHers5AiEAg1QxMWfh3F7z70wa94PGQLHID19TIQvvHrj/gZ85Ttk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlRFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmquqg//USIdWFChaeUohhp678wwmN1LI5uvDqako8YXKSz0M5JLeynm\r\nJzHFj6uF/LO/cZB2BknJfTC4yHmzK4uLxvttXUIyQBrUTkYH8FxmdflXhhcF\r\nnTsgNWt1UXOXL+lsXRiD1XAHTMdsxu/xo1bNqXRfuw/sMMBYx8NmF3TtFR4L\r\nzm0Or2FOiJCIQVIt92BgiQWF1y08GA4elSa3zOjpBL7HlPDoWDJGz3mR05IG\r\nl11AEatdk4GdP5RPk4Pp72AleprBatbetMrgar+dO6Pv0Judbnr2P85Su9sn\r\nXMiypXXrYxbBAE6gLCP645yw+Pl/l2iNesDOYAsXanRGi5H6wx+6dG5lisxh\r\n1GmsY7WlWa+SgR7ACOmQ7kJnv6sAMCa/9jMylbmI1qyb2SITilpmYz50tY9g\r\nXjwgEIkoGwnkbMtr4xJhuZSMhfep7aJN8aFFSqe2ezYtWoJ6F+RHEQLSkBL7\r\nJ4yg/hFg/wI9/QC1n0b/E8VWSdYnOEDmVt50EsjYoY4yjBiyW3ioVTCfOAsH\r\ng5ZZ1X0EzKJA2sX4Ms5izIs3rH3FrrDvDqP7bj0v8OByDJt+41oWa4HuRKuv\r\ndpbqygCnp9BXRLHmi2WIqoLbZ2ULUhLn0CtQcTx1hTHNeX0MMUOhIsCFRJt9\r\nRaeP2JeCIqYwAJslpXkySQ/fOZVFYwQzysI=\r\n=Crp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"413f4cd271111f1b118401821eb4bb38e7fcbad9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/rtl":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/shape":"14.0.0-canary.bdf9d4af9.0","@material/theme":"14.0.0-canary.bdf9d4af9.0","@material/button":"14.0.0-canary.bdf9d4af9.0","@material/ripple":"14.0.0-canary.bdf9d4af9.0","@material/tokens":"14.0.0-canary.bdf9d4af9.0","@material/elevation":"14.0.0-canary.bdf9d4af9.0","@material/typography":"14.0.0-canary.bdf9d4af9.0","@material/feature-targeting":"14.0.0-canary.bdf9d4af9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.bdf9d4af9.0_1647465541055_0.30930717172412936","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/banner","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.32b391398.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"90e3f293352aecbfbbcd4bcfdbfdc39c417ed44b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.32b391398.0.tgz","fileCount":31,"integrity":"sha512-AXrJRSR1t6YoVDK9xA0a9bkcTeA+gif0ULt+681DEemXqKc4Xii1o4goeJPmFaOxi46f+8tXR7/nVkMiXs6tSg==","signatures":[{"sig":"MEUCIQCQ5eRc5cis8HRGKhkMtCoPG0q9l+FJ4GtVgQRWyIww4wIgRoK93i+TyoQcwwmfTWqWpv1+oo+uRc/qZpZFjCYzMJg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3dGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8vxAAgarLOk+CbUuNs6DLDKBfefvOmq4UFT8bI1rRp7EpeSdpw0Tt\r\n8jMAneaOJcMWfqjGemyGsij3kaNptyijrYaFbVDcbRfv1mfNeCKRL6Rb0ou+\r\nJgKpi+tkYZ+oCTX7K1scbtbU379a6oG/E/htoPgBXBLtaM9H1/8DCcNrcilC\r\nlc4oGL2yD3+teLfQX7JpqgTTlqwpDRCNEq1EXPd6OdJTtBjJtrqMdoXvUqNE\r\n5fwYl3guiimbsIsEpT8USwyUtWQKWQZU555epEHIbInsMPzFAiQ+lcF21bOB\r\nuWPStOC2lDYexwqi6zxYFMJCHxNTevqagjScHZo68acaE0Ll0MChLvsEmmLz\r\noKnKENGwzV/0cvzYMcNoyPscTkLoU1hVUl/lO+TRDEcr8u9+g226Ec8jtDYL\r\n7dw0/5lWE4aXDEHCDOKsn2PXxE5AhQt8ej9PR5Kh2FF0g3gsWzDmNrxxW3Fc\r\nJjGAYAZPIcLa2JqbK/gTDhtiv2Bm5fGT+SN7L5CFCHmbo4WI/O4Db7tFY8PH\r\nj0GvMphVdEom+ONo6VYuJcokvclU66KvcxbyeTBppL/bULLDOeALTCnVIkYk\r\nOqvWakfrEJ1nTE9CnjIivJgsHd7x93A1K3yhELcz4BwaedUYh6dWAP7XCnPD\r\n3oT8aKAX6CT5sTUA0VFWc8t25C1tDTB73Vg=\r\n=vFaW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8a457bda7a5cedbfaee9da752ba2dbc093b45ac6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/rtl":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/shape":"14.0.0-canary.32b391398.0","@material/theme":"14.0.0-canary.32b391398.0","@material/button":"14.0.0-canary.32b391398.0","@material/ripple":"14.0.0-canary.32b391398.0","@material/tokens":"14.0.0-canary.32b391398.0","@material/elevation":"14.0.0-canary.32b391398.0","@material/typography":"14.0.0-canary.32b391398.0","@material/feature-targeting":"14.0.0-canary.32b391398.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.32b391398.0_1647540037852_0.9791163444154423","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/banner","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.ae8a6a3a3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08084e43327c54fc4d7a97e90d0cb0d5bb6839bd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":31,"integrity":"sha512-X/HTCzGsFdt1uFxIv2Nx80IUjxyr28RVZILmw308IZ5ymwRfD5fWNJZ1SOIp/Fr4qqW0J031pSMPvyTghUKhWQ==","signatures":[{"sig":"MEYCIQCPmItIX5MhqllqJMXY41bqKy9vIKKxBN+Yz+928DtQOgIhAK+FuRFw+RsdOJwqgvh/UO9sVcKvTxqtTLYeUn9/Kfgv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLX5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR0Q/+LS5wFcyBA/jrYsGX3r7JQhau/Yapicw6I4cUTFcKVfBmaXK9\r\n40MCxRnqbg/exo48wG9ihv0l9ZxamluU9L5CHjv7gSnhnyT2SnhEXxLCJoF8\r\nH/NE58dLlOlLG7r1XWJocE4TXGr4Rx7f1w5GgDGnhODaiBQ8KsCUNwkPxLvB\r\nu2f4VkcSdC1CZSDG7Hngc9mnhOAzbvK/lYxcYG+mg8xa/0+119BnahH/LPeU\r\n8YmSO8rAP+VnwaQGB28Os4XlUEf4PN/uvO2XAuFs4Fngayai7D9Szf0g9Ob/\r\neaQ9Sf8Kerg1y62aoSYBUQKeW1uVLApGIXDtjfQgS1n7vVZHo8W4/8UZ+u2n\r\nFwx0G7JmESBperxSBLNpnNJWdHgBfJSqkbwXnQjabtvRSCbZ1jwA0wjf721P\r\nINvVckOeHNtz9OUdE4XXkRF1AjBvUhgRJkqmiv47hPBy3Y8pxwOAHxJpg9xD\r\nNSFSJWPGzZiuwThJUsZN/y7CutuBOsynJpiDPgmcxUjZFPcXBa9FeNgE7HVt\r\nAG+vH2+EL0N6RifsaAn8CQYVLtz5QRJpInGgAOYaTA9PrEDcmed40lty505w\r\n1m9EY2h+oyi0gCEgnOXG2bBF8aFiZogUyjRzlljHySqh0xwovcQuqImginCf\r\naEyko1WrrYTQnKeC4o1+pUqBUQwoDGr0vwk=\r\n=Xsxj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"783283a1304f941e05b3ef25b9a589158368c595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/rtl":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/shape":"14.0.0-canary.ae8a6a3a3.0","@material/theme":"14.0.0-canary.ae8a6a3a3.0","@material/button":"14.0.0-canary.ae8a6a3a3.0","@material/ripple":"14.0.0-canary.ae8a6a3a3.0","@material/tokens":"14.0.0-canary.ae8a6a3a3.0","@material/elevation":"14.0.0-canary.ae8a6a3a3.0","@material/typography":"14.0.0-canary.ae8a6a3a3.0","@material/feature-targeting":"14.0.0-canary.ae8a6a3a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.ae8a6a3a3.0_1647621624930_0.5094305746609815","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/banner","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.cbd9358a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5f1df852d952309c0ad5e168541d4d95934238de","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.cbd9358a6.0.tgz","fileCount":31,"integrity":"sha512-IulTHAyt16YQEwBk89+hThl3vGKuTdifgOC3p0bn4GOE5bJAUbbOsxcYAjPipLml3Rfmqw276sYwtYnbDLo89w==","signatures":[{"sig":"MEUCIEoLjZiG7bnslHUtA5S/i2H/cwS3ZWAiVDqQKY3dObG6AiEAksUkA5qK5qYatsL21PXRyJuHRPL2xbN8GnQQ0ct+F40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgBBAAiz+YvI3eJ8yMKzcdEFBMwQbpzGEWGdDtyNqOXBVmi+eYSKc8\r\nfLX4GdL5ex/Y69ig49Bn8AHbO4auGEeAv6pBUptG3mD25lQ2toXn69W5k0sw\r\n5HhmlmGVMW/zFOY1qxJtEW3sivL4icJK9EiwUldpQWv+D24bzChbMvX7JqXO\r\n12kucVrVhe+vHBEuuMIEHTs3nMQWfCqKI5T7IFdlPgb51NRhxFmy4/OKdprm\r\nLrEPz7VO4DntrDUCp9+wLKb/cT8g1Frn7VGUlD89w19WaqWBZYBg+kT/GzrL\r\nzrNqR9AXv3+fRNEHCqeUKTlwdFT7yhxjwpT1sgv/5PT3q75FMkzT6Y7vFzqE\r\nCsmYGbWjP91nbFLfBQrzqXCr3WOyAg73s7gsSTgjOJn4x1XrAEVcnjMPbnnr\r\nGF9HPjj0soln7AvIdJsTnZo5tj8a8gcKd3BdiCb0Q03G6LH5+yTNGbOLCqTb\r\nQn9HUtkufC7+boeayRCcfwaRm4qene9eCm6YpKouAYKQ7R1TrMEmbSvJe9EE\r\ncxjhtFSFwO4zg+n6Iypr4Rj78DBfXYcOksw1R+gtDB/QIQdecxKcL83b0R9Y\r\nQt2x1BZLRGilWSOp7dGIrk4uf8WJHbnHasvZUOdNY/02b4vRHaU3MavdaVP5\r\nAIov5DtvMADiP/wVm265YrqN+3W29FliKmY=\r\n=bzdq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a4296a048e6aa0c1ab8e8d2cc6cb8321c24dab9f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/rtl":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/shape":"14.0.0-canary.cbd9358a6.0","@material/theme":"14.0.0-canary.cbd9358a6.0","@material/button":"14.0.0-canary.cbd9358a6.0","@material/ripple":"14.0.0-canary.cbd9358a6.0","@material/tokens":"14.0.0-canary.cbd9358a6.0","@material/elevation":"14.0.0-canary.cbd9358a6.0","@material/typography":"14.0.0-canary.cbd9358a6.0","@material/feature-targeting":"14.0.0-canary.cbd9358a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.cbd9358a6.0_1647643999460_0.8594797719175558","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/banner","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.dcfe49c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"285b7e16cc9231a6ac394029620ad138ee2baeb0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.dcfe49c98.0.tgz","fileCount":31,"integrity":"sha512-QeacTYZss5lTEnvuCfs3OQnsSMrHRBzsd6Hl7Nn5OsLbYSHUidDRdlTayO6OjHvyzDk7xRzDLTns4W+5UFHSsg==","signatures":[{"sig":"MEUCIQD8Dn36k3xOH3pBE7QLxLmfwRkHaRRZxNqNDInxCA77WQIgT/3RdHnbHHoHhx97zrpXio2kFPwtVa2IyNLZ3n7DM6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMe7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3UQ//Y0QH9h+IiYfLC+ni8cl/GY9A0K+Zmn3JyTbg1oHeHdnNrHW+\r\navL0xzKyuh2CiKucwFU4iMuzBqJNaV8eJ8lU65hOcVrJ39wZNDFSkXU2awah\r\nv/GGC+QSpptw850DUpbfsV2Jy5wtRyES0C22DWPdGNwyTp5Pnh7ZQUaiqgqH\r\ncYWJuC+0GB8ghADqWAFcQWD6Wv6U/GwRoP8bkvCzHdAUQ844MIJL39F6GRzt\r\nOnkQKKNaN0CJ1Beb4zTJybchfYct4W577V8XoCBb90dKv4REnnhUbnFJgx1x\r\n1GUAwG6uRKHhZEgOCjZXf9OkrEHrki3n6bueDCbYvgRYjY7EnYyzz41g0GWK\r\nMIUZgduxfcIuFI4tPvEKdQsmiMGUtoCMjM4LdMj6oX4DnN4w11p/3dBzRVAH\r\nRK2GVh+aW8CZAk/Nc6tKvUhaDApClfi6H1mzDAW8bBQO8XrQz2JR0wNL8Pu8\r\nIL1KhSalZIHkcRQgcmDihsDxORM8xDiNTt1Pea6Y6pLTTcW1CiZm5KT9CCrW\r\nwK84iH/Mfq24Ct6gOm7ys/moscaL30pYF0CA/O9W/hZMGl42XE2uY+Tzpxin\r\nEwpBDorwhYstxcKlOK6vp/RFnvFz1m8I72KfRn9H+fvACpnCzSUwSyBRXDNT\r\n39FWpB6GPW7q5tXQ6w7ApFx35pig46zwlDo=\r\n=Lam4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5b68455eaf6aaf2f571eb64a1d8a5edaba58d37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/rtl":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/shape":"14.0.0-canary.dcfe49c98.0","@material/theme":"14.0.0-canary.dcfe49c98.0","@material/button":"14.0.0-canary.dcfe49c98.0","@material/ripple":"14.0.0-canary.dcfe49c98.0","@material/tokens":"14.0.0-canary.dcfe49c98.0","@material/elevation":"14.0.0-canary.dcfe49c98.0","@material/typography":"14.0.0-canary.dcfe49c98.0","@material/feature-targeting":"14.0.0-canary.dcfe49c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.dcfe49c98.0_1647888314916_0.08483500531574606","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/banner","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.f31a833fa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"268241cd3e1ee2d72a9fc62ded15b16b7fee4165","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.f31a833fa.0.tgz","fileCount":31,"integrity":"sha512-JuPstcFwVM0W/mlqvt6KL5PPWtdkdULTZyJEyFjT/S5kVk/bGRoPygilPYLmRLNCLrUvHusCJEotSpVRkOJwsA==","signatures":[{"sig":"MEYCIQCoi97u06tzkv2HAfmfY5wdPWkArUVwi7iaWFAHqbV+8wIhALFWFV1hoNDbZXSF92ifQ8GC6gthOK/3WkZgNntBpshi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Mw//SfaYE6dVDst/LVih5SInr3VxiuvhmTwEVsIUtdBGcs9AY2da\r\nJhM8Dd0V4E0WrdHCRN79eVgDySe579A5aLe2GxepTLWLi94jvmoO0sjMXP2+\r\nhkHnivgKSSqoea1BoGVrXafiVaPdpOuunYl0/F89cUzsy51YJbr/3xCvMd+Q\r\nLsE6U4Z5JHKLIpvL3kyX53Y6zLql/VWy93ZTLOCef+ITZ363SZznuGLlftyo\r\nHucLTHrR6S+WvEf8eKgPzkQ/EQrAKe+LnbbsrUZ0oQFnVoHQZ7aovhQudOt0\r\n/i1PqHygNlleMZICDm4Fih3b4qk+WxugU59vYwZtGCmddq4tezY2OAuIpaZ1\r\niiEoGjEpTydXqXBDQk3BVA846pZQfuxTKrbTCUUfdeo8n0xWDzQ3z9vbv+9+\r\nqlGD4kvvZlXS8ZbiuP0Jf1rIQDDBeNhnP3h2wMbSp8/h59o1SO2IAX9kxVUZ\r\nHDtNH2dKU5eMO9TFOsVBJG9neqT9RATNU0yXzk5B6lF+V1rOzfLocr7HAxvQ\r\nZ4ZlJbF48XEdGTYv6Th69notJcyUQUeI47MFo/B3oC36rEttUhJRFgTl2Xdv\r\nIwCiOeKPM1Zg1EmB6nG/r1VYX/57BfqUR5ZcjPCXfmYBnS0EdM27gyQEJoBC\r\na0Ci97CTiK1UiTo6N2CXqiX0YzsSvwoEE3U=\r\n=XqlJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"28572f217366c634964a133bbf0ee0b8e88b8126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/rtl":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/shape":"14.0.0-canary.f31a833fa.0","@material/theme":"14.0.0-canary.f31a833fa.0","@material/button":"14.0.0-canary.f31a833fa.0","@material/ripple":"14.0.0-canary.f31a833fa.0","@material/tokens":"14.0.0-canary.f31a833fa.0","@material/elevation":"14.0.0-canary.f31a833fa.0","@material/typography":"14.0.0-canary.f31a833fa.0","@material/feature-targeting":"14.0.0-canary.f31a833fa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.f31a833fa.0_1647996715465_0.7941446723345573","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/banner","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.4b92e210a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a5cf129da62a71e9471cc872a9e8d0fdea1ac3f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.4b92e210a.0.tgz","fileCount":31,"integrity":"sha512-klYKq9ll4PPOtG+T0FkH0CrWTy42iBSjgpCM6Nr0Q4rBIumXou+N6//rT9a/ekDVLjSzQ85mJ53n0yCLHcgzPg==","signatures":[{"sig":"MEUCIQCX1Nv6CXiUg0mK5c+ND4rcz5KyP7xRiufPn2sxMVOUgQIgCPwdSdTVFDeDdbnHFGLYF9GsV0/XKO87CCQFKmgjHQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1VQ/+OhlVkHzKJguGop17S/BFRMeZo+jfZfBdxmCaDoRw1gMKntuT\r\nDCBiBjH7uaSuw5ciNS7G/tQEEyzdRUVM9vyC7jOmdS6rgkKbCblqBAklaiKn\r\n8e7r/rypaws4E/xTjqWDxBf5EhC5jiYTnAgPiRnR8lqy97i6N4O5m/rzAavv\r\n/ZDhBzjPcRuVSdq943tOs9Cos16LUIcFH1IiFRekvD8w4XzjDjeA7dtj8Fyv\r\n8O//OS9iqBrpHP4WM1cClJnxkXBdeKfE828jFwdR0xL9X8Pa2Ji9Kd3W+H61\r\n62zI6b2ITERPEWydlwqd/Is4ZM/pNpuOfO4FH0PFiIuOy5aBtTF4nJWlENtP\r\ng8eBDelKfLzz1XBGLSKED2a0r/kOcsdr+tfaupwGwQ4lhyfwW6Wsgjsv6BW8\r\nQ8JnPUdk6Z49f75fzs0EavXnTjXGhQhq7YdwCghBRUAY5TDuyV2FUPkh3Y0M\r\nyVKH6S9UAhm0imWJlPfb2mUwtjqdmXE+gmn5TYHioCG4kgJKkToYXGHHhQTz\r\njcHpvzxvfHf+WiZj2LbSsN1bDUKHHbtQLCd9+gEA8VfsaOat13rA+Mh/HaJa\r\nC1Z3RH18v9OoVaiJiVKVj7CyTSsy2mUwvxcJqA9tYgc98xSE7NlnbMsGUENh\r\n2qMN/1QM/Q3Bv2VjzazIcai+hVCNYothZf4=\r\n=giwH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e9fc48f242a1815183c2b4c74ea1f8bb9967004b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/rtl":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/shape":"14.0.0-canary.4b92e210a.0","@material/theme":"14.0.0-canary.4b92e210a.0","@material/button":"14.0.0-canary.4b92e210a.0","@material/ripple":"14.0.0-canary.4b92e210a.0","@material/tokens":"14.0.0-canary.4b92e210a.0","@material/elevation":"14.0.0-canary.4b92e210a.0","@material/typography":"14.0.0-canary.4b92e210a.0","@material/feature-targeting":"14.0.0-canary.4b92e210a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.4b92e210a.0_1648153182435_0.5289632866296805","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/banner","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.a657abb61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1b2ea34c377607d522b73ec10802c041df70b6ac","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.a657abb61.0.tgz","fileCount":31,"integrity":"sha512-1TeIFdSOKZknhcG1jmrabCA8T+tx+conpxHUoBJ3RLsqyw4f0tzmreYdcglXWgkd/UevpsWcDhsh70AhH95C8w==","signatures":[{"sig":"MEYCIQDT7xWnUFpMkIthTR93Zm284RXxxzVLSR3r/iaxU4ovawIhAOOE90aTvIq1YBTzODLP5kQwOV5AZLdF9Rn1bu8gsoMi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp93w/+LxysKtNazq1MoBcXoU+Gj1k9osTWKncj/ig4yQrDfP0B7yDo\r\neLyDoaIc+g2CZwbmX+bG2nu93hM6l46nxhRivsAO6JyugRapErYXSPlsJHBd\r\ntiRWXOMOoNmXxFXe//XKixtSdPyvYs/167aOSnh9TEKyiO1LabAkHRPSzQT/\r\nmSIBsSa42kJDbFjgIJxKMaGTWDdXye1mrlzthbYk9Hk2vBiyM43PCKeh5rjY\r\nIbb4NeoWw7M0JTSjjtiSNgk+pjyZw3UtMi5YZfBFrwHMEDUmokkkLruo7abD\r\nVJgCs5BmSCpzBPmYQO/97beIwZtNJFtomGJ/dUnymYeiRLSbNbT3FL4gIy7u\r\nKIf1dm7P17do1CZ99eVyjv2zFfwrBDCi++7E5XkQc+VVAKWCdgVfkTkgR5w4\r\nQba930jIz7WNRWZa0tQdFHOEu/+ZhspKLZivfBaTqzfVj2KsA2YeG2AvpEV+\r\nPL/bYNyE/emnn3kuxA6Gf/UrdNCWJSu+h17iLBbZFSDIndx1FZKJNHdP0DB0\r\nYQz82fuoB1OyhIszLxwoLgp+nYqYQwppPUKgvaNLT9bFLs3yjcI/us+ywzGb\r\nM7mYTwC85zmL3OBKmXG6urPyZ/02CbQB/3peWoZMkpcOcmhg0RYDQ7iYI9xf\r\nUBZ8uFfYS3FJ5G7q197nrl3Lbgxr3Mii0a8=\r\n=F/Sa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b17ff714094456afc14ac1ac896e38f85e300743","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/rtl":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/shape":"14.0.0-canary.a657abb61.0","@material/theme":"14.0.0-canary.a657abb61.0","@material/button":"14.0.0-canary.a657abb61.0","@material/ripple":"14.0.0-canary.a657abb61.0","@material/tokens":"14.0.0-canary.a657abb61.0","@material/elevation":"14.0.0-canary.a657abb61.0","@material/typography":"14.0.0-canary.a657abb61.0","@material/feature-targeting":"14.0.0-canary.a657abb61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.a657abb61.0_1648154469263_0.6794486459106603","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/banner","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.443f63f50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5d2f7a092510757ebe093c4c1b01211da4775f24","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.443f63f50.0.tgz","fileCount":31,"integrity":"sha512-VdfW9B02TzlRbvj9ev+tvGTziIFKL7dknLVofSGsUQiqtTLl/l6Qo68ibzKVaZ+GabtpLVRjzPoMMoyDoBCcKQ==","signatures":[{"sig":"MEUCIHZZRydhDXla0tAhx17jv+zpXOJaxMzaDJZXZW4mDq2yAiEA3r8TXCBLehZXcY2Eed4kCB1LXGV+b2sLTQlmi1d8TEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkrIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoQRAAhRk14o6F3zjye8zPA9L6Vdcf3BbUW/B1BP11TMyov3mTkGHJ\r\nS6HI5LO+FaIR0sY3wokRYch9Z62aHfvxh1XWholtakGsAP6hSESTV3c0p7U3\r\n+Yh0mKKhhNecSuQojle7Z1or5cdeN8iqArh8AsvWQoz/nAehIx6szpVhDJmD\r\n+acOGCUdBKr0WmAvXxcIbVhGlprolIlxcHuCvruI55QzC6JWDuWKFH+V5Dae\r\ngpi7DsdrhMx6gOg4Eq+gagsY5xY9ZqhRO2+MULyRciBsrlpS9/FGIhO7ef5p\r\n5A2oGE/ZNXLqs6Yg0UwbpnuRTajILwVuspSA7zP8uCbDYrEAOJm1huJVVO3U\r\nsFX0IIauMvfYtKyhdqvuf3zfufW0DOZtFTvk4bhTTEq2qm15a9l1EvSrwBl1\r\nsiaiWWVAAe18CYHV3DkC+OyXhtnpecik+eo+lZRZCpaesCAfCpZH8aXRBAfH\r\nN/L+0fVRd4FaRoQkXnEYNabfbhx76gU1VlPALteuyf8+/c/0KdziwmAn0ZCW\r\nfmAjc5KZDaT8jdJ9EQY8r3pIqoRYa7XSWj/sxpHtaBs04a35Ao5colEQoMq+\r\n73Qg/bGuWxJ4U+EDDVayeDDzzIyK97b87kKbgoaA5+tWmhqosqfaJYVBC1Dl\r\nasFLHCwwHj7xtX/gDLHhv5T/1TNlZGEXJM4=\r\n=8cY0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0a9e4a4d027bc972dd036582cbc94abd30d3cd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/rtl":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/shape":"14.0.0-canary.443f63f50.0","@material/theme":"14.0.0-canary.443f63f50.0","@material/button":"14.0.0-canary.443f63f50.0","@material/ripple":"14.0.0-canary.443f63f50.0","@material/tokens":"14.0.0-canary.443f63f50.0","@material/elevation":"14.0.0-canary.443f63f50.0","@material/typography":"14.0.0-canary.443f63f50.0","@material/feature-targeting":"14.0.0-canary.443f63f50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.443f63f50.0_1648249544302_0.4724820106088321","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/banner","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.eb382f318.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b334f63ce08b12498a434ea881117b4352834db1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.eb382f318.0.tgz","fileCount":31,"integrity":"sha512-hxRsimZvZ4Q7fqsTHOGXwqGuUFHZ3TWAw5A0yPsJ03951BWBhAmPMjk9NN05j93fVdjVgQVWXmsVaLsQUVT8DQ==","signatures":[{"sig":"MEUCIQC1fA7rWGMZx6PxT5S3Bn/vGwD5hJhlQ9My3DIigixTzwIgEIuviyX1WrIsEXmt2Utuxszl4RyRHH4eVCj1fmtABJA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0OIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrdzw/+L+XxybTjaoyg3JSfDCXRkiwnHm2MFglJQWYHxSebINXZfljP\r\nxvU7IcuSisaOgW52ZbyV+C2S7v/rx9kxU4aMwvlIPvw6gHNv6DbRlOmUTW+P\r\neBofMUEMZCGrxbVli04g756EVyedXC7XFhOWDEnvcf3hx3k8Nv7XPrndNRbP\r\nVoXxJZ0Q+qxYJLow87b7Aih0eC3idZenjG/YCAEjSAM4EzwPiGS7ADfCp3Lr\r\nk+D3l48CU03UHz9RL2voNVC/0U2h+FFMCPodoCtC+Wv5XqRW2s4cJaVuuNaI\r\nJwvf4s/vEME/K42F/nOgiNtcklYTuwM/r8WENfJDG6R4+TwsWJ8AgthKzTnB\r\nxs4TA0xIAta8zYp/I13HlNIrvxkkRtd4RAZlfIt7eMTl9EwM0gM8Uq+hycmS\r\nknorSeURNfrZtRNfnjPHmZg7+qBc8P2PuQhqunmX/1///83G5dJ6NdQr4zE0\r\ndb7QO1DC0lGohM5L7t/FfUUyeSTJpCnpTvULSesgLYG9BIwYxCmw0uPTvJhE\r\naB/Oe2BfoLTCdOssJvlN6gtixrwlRC9MwZ280Huy3p1QMztohim49S6HdFmM\r\nnBg5XWel5S7jvxxjX8e0clClbdpwmrY2pTvgD3cpMwlRvFApXGKbgME++eCF\r\nIylB45tVvsakb/zL5VD4/u9ynUfkpg+wNeY=\r\n=P7dp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9aaa59e82abd1f56fdb3d963213242fe4f989c89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/rtl":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/shape":"14.0.0-canary.eb382f318.0","@material/theme":"14.0.0-canary.eb382f318.0","@material/button":"14.0.0-canary.eb382f318.0","@material/ripple":"14.0.0-canary.eb382f318.0","@material/tokens":"14.0.0-canary.eb382f318.0","@material/elevation":"14.0.0-canary.eb382f318.0","@material/typography":"14.0.0-canary.eb382f318.0","@material/feature-targeting":"14.0.0-canary.eb382f318.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.eb382f318.0_1648575368474_0.8287195307571054","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/banner","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.344d52823.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"864ac79dbc135d7f055d8af014e1ee93c10805c3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.344d52823.0.tgz","fileCount":31,"integrity":"sha512-PUy50LL/CjUY832fOJS3qKVAk+S0Cit8gYRwXnPSfGHIQ3eI6VDqpHbrxZnuXVOBWBm7tQsNRV6uF9gdpVJPew==","signatures":[{"sig":"MEYCIQCCy/K8EyP4WsB7S2uc8iz998joJNvQaHdza/fDYNK8+gIhAM8D0oXB3Hey6LhZEklTma0hUT5mMOlA8UEEMyJZd6Y1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1OLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMtg/5AWbLvRuw//OqSs9jqY4z2tFYMn523PQB7Y/nOGbR9bw02K8c\r\n2OZS0jZ1BfLFgIsMm4YWIdc84yQ+D/00i+gHR1pQNUq876bgClcTkK0+AAa/\r\ncfcVJgo04mkb0bvDix/1kD9nQKs+xpur4qsdXsCCWwC1G8v5BWLdDM84Bgo5\r\n9kfCO6j+fkX8PqXT2ypVnNvDipenAx8azCPBOJOixMvEq9yGB/lAZkeM3J2T\r\nEDHtEHW4tI0CcW+V4O5mwLMevyCIzLNbgWEKBewKE2sru+9cUzFXuL0FGbZX\r\nwMJ8IgjtE0OPa7SOZk9Ol4vPPhyt8OUEXJbJcJx8bPqsdhCYz4RwnysFUTrD\r\no4LoJb395wmJNskIz5dJ0YRqKJ/bUH8OlR5nrVO8+S+aMHGEJxDP35vnn/oI\r\ngIPbBG9MzSf3xPej/pJimtjDeQwGA8+wHBWyAQ88C5T2zH5cqk1B+0CDaBxR\r\nOXWnTJd1zb3Z2LZIAyHTf8wEvQPD74/zDxbeDoAJqjf3tSGkkqEBFMAL/gS1\r\nod3TBiwtQzk9eOfysTf7hWJ89TucKtKE/jetNZ9ZI+6B8G7OMx9F5Yn0WsTx\r\nZfEN2hyg0sU6B5hhtybQTIdLdlDTS/lGv7dbPo+6lxqxphx1xBKEsz9gsj9B\r\nIl22I2BN66IbfVU/z8x3/qdUU2XAqxIeYDU=\r\n=1wrj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d0b3e3b77ca281daab88499a03131363e8ce97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/rtl":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/shape":"14.0.0-canary.344d52823.0","@material/theme":"14.0.0-canary.344d52823.0","@material/button":"14.0.0-canary.344d52823.0","@material/ripple":"14.0.0-canary.344d52823.0","@material/tokens":"14.0.0-canary.344d52823.0","@material/elevation":"14.0.0-canary.344d52823.0","@material/typography":"14.0.0-canary.344d52823.0","@material/feature-targeting":"14.0.0-canary.344d52823.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.344d52823.0_1648579467096_0.5501805781476921","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/banner","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.4e372fb49.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2d7033169d438a2dee9abc4937d30ae56ed07b6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.4e372fb49.0.tgz","fileCount":31,"integrity":"sha512-6udxjJUORLzWGVPPCSDGeIhgaohpOUn1HgNtQVkyuRvZZMwpqW8gAjSftScQe/ffFuBdYPij5DSEHCgvLq3IFg==","signatures":[{"sig":"MEYCIQDTSJcarSrZsUCzWSoFeIGO3AKf52dgZd8mZVuCfgFEtgIhAI3ZXBvftY2Hagsqhjj7Fp1SQFCxV9Qi45uwVoVfl8C+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0rAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqv0xAAiErQ/PB/a4etBgqUiBqkehU/I47T1iijL+WtUl7bTBhsgge9\r\nXafbdzryQxTa6ke3uuGM+WJENruMmhm7bGwmcMy1jaAarSfkoHEL2Io7rack\r\nPswzBjXjF41QfUTIuRQ5y/m3RAdJ4+/k+wQK0UlSEmrUiGGOJ+m6lEsGiCa0\r\nql+DGsjgr2CFi61w8tJcJU/Rr4TsuflgFjPnx459IDcc2MofnwvHDWSPOXeT\r\nmLLAsUcWVzmfUsL8Uya3/x9K6WzY2pDo/xG2YsKcw6x/ZUip+bKk+VHZ9Qng\r\nX5dMcrzW1hkTVQswoRmt4cUnMWHOMko2+JNqsqXM44J1UsW+OUkUrRweFN5Z\r\nZJ38iVxBf3vH0MNxEe/0xjYP2wVssqbI1IegJ9Gz8rDi6YXHOmtKCUWaihk6\r\nRAvsG/Fac/ZSU6QfYJt0j+d3sRVD1o10UfC+EbXG9b22UHyP0xuSG267A+QW\r\naF7CZT30PaVdRJF/DDSi89+n/3dNdFbb24XqSHNA/a9yofQlSrjJM0K8xzs2\r\nqxqw8pIfV7m5tf8Z8udlyh5dksVwaL7pPZI4642XSqgyH3Eaqx8bDkgTyQKI\r\n/qjiYEInQQExaR16SJfpE1E2mPagmuv3KfFdKvrHDYNempb6OrI4gWov9EiT\r\nO5eY0BO3NQwgbcwlzMoVYIPqiTpKsJBaV+U=\r\n=VaD6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"013d3cd7cc6d83c59581f40ea832529343f43047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/rtl":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/shape":"14.0.0-canary.4e372fb49.0","@material/theme":"14.0.0-canary.4e372fb49.0","@material/button":"14.0.0-canary.4e372fb49.0","@material/ripple":"14.0.0-canary.4e372fb49.0","@material/tokens":"14.0.0-canary.4e372fb49.0","@material/elevation":"14.0.0-canary.4e372fb49.0","@material/typography":"14.0.0-canary.4e372fb49.0","@material/feature-targeting":"14.0.0-canary.4e372fb49.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.4e372fb49.0_1649363648182_0.2550741540873316","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/banner","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.3e30054fb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"01dca1f8e0ca811c8baca3497d62707344354336","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.3e30054fb.0.tgz","fileCount":31,"integrity":"sha512-iV1M7KcaxxGzviIwBKsLt+rOZ6OoGEhFlpEiqKzgmQTBW9avnnS/9EhUm0L7aqM+Aio0H31G9ZJKWY7uFVTuRA==","signatures":[{"sig":"MEQCIALeoroS9rfbb6ny/cq0L9ee0wFijqFKwEKY6oG6kPqrAiB5AocB6Ok541s9wKDTVr95N79v+q6ohyzwhYLezNvSiA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0t+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+7w//WGh6DIpi/HyhYbPX14elMncB6O3iE/rAP91UmCKg7UMXGnWF\r\nY+Dd/hXO51+atAMg59SD6gMNPOh56lWM/EBOqBzzgwioCwxbkv+dWQGJH8Eu\r\nYTkOcHziapzLWTsE7rvvgZ8JaGJVajHAN/ZZarqjIqlak0slp0jNIoJ6vNwR\r\ncIR1AkBZncG52Mx+saT9xaSPFK+DMmp8p5werk4Tv+DOeTkNpg6abrOZ4h/l\r\nFmdTz3wpkQCMUtfmoJjqcbUEFaNAGOBKYTgPXNwoYuLuFnsCdRi/KRbOQI7m\r\na+vnrzCXtk0EUJvl4qMXSLFzsnc3X8tCRmItywHSPeGcjFmFI0Ztx925tLaa\r\n56TLb4lybD79Ota9+RqPEyD2vfOKuhYDO59rveIfHXVfEV499K3StuKK5MSI\r\nmAAR8uw/SrHyiE/p/BPieDVfOL751AmCoTCQqXxGtHcofEgMIRqANKq9uTS9\r\n8B4nzJU/8svjQ14SYdOeFekSt4foUNRgf/j1rwcjrakE3N0k5NJMqKehv25g\r\nrhHiYALIOhc/iZwj2dxVHC5AoJD5sCVQhhhdGoJ+YF0Wx/2rjvq9bMk0yNCR\r\nqfKIZI/S+m1IAo5KfoKrcOOu8jx7fJQVFrLsfnaA8VKk3864I2a7eYDkIvPU\r\nlo22YVYtTF8muVtwHV+PQcyqUWbHTlPNPHo=\r\n=fFxx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"04d79139861b90bf3488ab3f74e4bc33e6af1c8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/rtl":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/shape":"14.0.0-canary.3e30054fb.0","@material/theme":"14.0.0-canary.3e30054fb.0","@material/button":"14.0.0-canary.3e30054fb.0","@material/ripple":"14.0.0-canary.3e30054fb.0","@material/tokens":"14.0.0-canary.3e30054fb.0","@material/elevation":"14.0.0-canary.3e30054fb.0","@material/typography":"14.0.0-canary.3e30054fb.0","@material/feature-targeting":"14.0.0-canary.3e30054fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.3e30054fb.0_1649888126481_0.7543248551841624","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/banner","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.8c4da223a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2970ccf2ec7284013d4e0458c1aa50528b5c8dd7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.8c4da223a.0.tgz","fileCount":31,"integrity":"sha512-Hi232MunkPg+A35FdjUYFvouh+DGAXuarlQOZTTeqpIhR8H3d1kVXaUqTG2yC5KFzbqPMTghqDu11LDAXn1uWA==","signatures":[{"sig":"MEQCIEEF2oFVpsgk1Bp2E9RxS/EKfeQd0JpTvtQvWKn31EC2AiBXYesgFjTXJIGs3406qfzWD+IP+OPr3ZahcbxFih3KZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCwRAAmgzYVTkQs3oUs0w7oHWTJAtWFqK4/682I40tg+qs2FPUDJpH\r\nUCqpMFPqU65vMeAhMXB6A98im68YW/4VSnYrAonvsceMKHmiEKlxE33vBku0\r\n9WGBTPIO5u9bALbC6FMhIxL0xGs78doUByoIMMGYj6bRHywrML9AZxN+Z8Fl\r\n980DO/cSuNgfJCeC4K+DBSjgX6JM4HnDlGoKJqw9FSpxqnx4het7JwjR0f01\r\nIk4fR5SZXIxftoykxx4FCX18vRXs6C9UZydqfwPXKXyrhoRVAmWKaIlFArSz\r\nDlx3/Ok4LvifDqczEdl8Y58af1qNkmg3CVutJ2RPcGZYDthf6s1vq5WV8aMl\r\nZRDq5PP3N9WCbDB7GKjYsAyWtw3qQnPKqbfqydcIhde3Kczp6hqfm/Ibezvo\r\nWlYHikYtVSotxZySEetfZ+w1IoraizXKeF9vdSvlOYiqnrFoSSJK8HKOmSyQ\r\nTzZRegWMBgVi8kI12TiTFsvROUhWkE5gIpG31HXC7J6AfRCCzYyXDh6iRMfz\r\nRL5cM2sF7hHxmVVsxZ9hTosc2/CKKM4xZZApKPxxj2y2/mvvJblIuBHClhXA\r\n5Aw5EPIHnUbAD/rdo7948ICo6Gov6RXAq+WYitItryKtfaOx3mfSpzK3Ug8V\r\nBYQGyqk+7QTEXRE5zivPJdP2UIkit1/PqJE=\r\n=sB8Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a5f798a752de150dd0a004bdfc90979ab4185d1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/rtl":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/shape":"14.0.0-canary.8c4da223a.0","@material/theme":"14.0.0-canary.8c4da223a.0","@material/button":"14.0.0-canary.8c4da223a.0","@material/ripple":"14.0.0-canary.8c4da223a.0","@material/tokens":"14.0.0-canary.8c4da223a.0","@material/elevation":"14.0.0-canary.8c4da223a.0","@material/typography":"14.0.0-canary.8c4da223a.0","@material/feature-targeting":"14.0.0-canary.8c4da223a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.8c4da223a.0_1650381923162_0.5405264373092882","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/banner","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.7de8965cc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"062b9206898a3daf1607bb7350a45020668c25d6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.7de8965cc.0.tgz","fileCount":31,"integrity":"sha512-Ymso/gya9k71H2wZGSsYgCk77REPj0eKTIOMY5O37mlDmoFyi3kwGlKSZ4iGIV9jqZi2AFUVdev7QVe7XOJfWw==","signatures":[{"sig":"MEUCIE2HXRvlZlnUdFPsJ9AH9sc/Z0MKBmnqWSjF8JCTVHaDAiEAxjL9JU9HltP/75KRvK+HuYf6yhTfcrpmmpvCOujTwX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxqKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcug//d8TKSs6cyNH9zIRfv9+YKDKtrIyr8/7Q5Q2uyfYtxhBeP0kY\r\nK3nxtq4wZrnDHJu3xxqVfPPfttC7kAL3wSJO2XNOFc9uY1DRCC9x3ZNj9hdj\r\ntWuer7BYe5BzzKZo9or4C+W9kFSvE/q5mksA+E+59C9VfzjfFTlA55x+Q3pR\r\nhGGg+n+RvWNNjG6PbB5pzVCfeAMAQvenT3XUFualge65n54xXZc+7+mpdNPC\r\nkgziWDHMZcW7D3duWbvhGIWjsJ2TjurGOtwgVEIQ9JAsAvckNu5dYHkAf3EC\r\n5wAdKXudX7R2kmXdRa/ZgaRdluErArKlwzVeg2WJlaC/zVnRnySUQR94fJ10\r\ni/ya7dtZphgd4wLm91pAsbf3X5h/lIbszGvh5x32fRIXs2ub3Qvl6zXuEsvL\r\niN31QUqT0ARmXSRxUfQLLayasbbT771l3lg77V9zBDKNapWJaI/6y7L3Jlud\r\n1yG7P36UfZxgzFx2iLe/+GymZqsWyhQ07No4gNJryu5NVCrSP9IdnKkz4Xnb\r\nMyoSNPZ+yw6D49PFPmLCx2C0jBnWHUYARVVpqMiYTIK/M/Dt14fsRVPWH9CJ\r\nnI2aLcOjyZ7FHsEpTqs5QhRtMAn4mkA/H33RgcVQSCcpXxukqA+9oGYq4qof\r\nwWG9v6twWi14KYbBlVk9TvKoJexFc+EVFS8=\r\n=16k8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"538ae755c197f0d9a1fd3a2cab5000c498987584","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/rtl":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/shape":"14.0.0-canary.7de8965cc.0","@material/theme":"14.0.0-canary.7de8965cc.0","@material/button":"14.0.0-canary.7de8965cc.0","@material/ripple":"14.0.0-canary.7de8965cc.0","@material/tokens":"14.0.0-canary.7de8965cc.0","@material/elevation":"14.0.0-canary.7de8965cc.0","@material/typography":"14.0.0-canary.7de8965cc.0","@material/feature-targeting":"14.0.0-canary.7de8965cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.7de8965cc.0_1650399881811_0.765195227316682","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/banner","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.641ed0851.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"519591037c0c79468423f6b46d5ea2d252230ef4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.641ed0851.0.tgz","fileCount":31,"integrity":"sha512-KB5Lw3T47hl377EYSI1Dwv2iMa+NpH+f2w7s+ORgLlm1/WZ3W8JzLR2V5Mwo2TBCoEm0iNbFMArHEe91UMzhxw==","signatures":[{"sig":"MEUCIAR34O9vSOaRCI9Y9NhJnmYciMhkMObkCytpbIdBTkvUAiEA5JOmBEkKGMhn+iqz8cXD0tX8hSVWVI8baFEX1i3ZcZs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr1YQ/+IKlTBVB080RjBYr1CAK7l77caR5yZzqqjf1xuhFpKAw931sO\r\nhOhnajXQQmLu8RfTGxa71icEgYX1KQyXPq4lQiHZipjV5dS2OOBiDoXymv3Y\r\niR1Htl7ET8vkBvWVUAFdedX385xqo+ywhJa72SoyUMuzXwqVGLrdEBwuk7wL\r\nqAsht6raryXwPU3oJHeUbgATr1GqtIZihisJbAy2oS6r7CVj89FVVNiId5Ey\r\nTNiGgsg0xiM6xa8MWXGdr/MAixObSXmixa/67HJr2k7slJGBmqr9NqDLp2Yy\r\nzTYUCRmwVE2OZfv0sbDpP1jLk9uteyFhXJKviw4MKpfujKhrTN4MI03obPoN\r\neZ7oJCEQzQMoSp/BpxD7uAWFjX+L2X2Lhvayz112ZQ1tWHHuwinWQ9lTQExp\r\ne9EZGyzKptHfIpKXf8ucBSEBjVyb+Eul283vUXpLzsufXQPs6aD7Q3Uo+lFQ\r\ngM0cnzw0t7qmAmzbIf6v4Pjyl8Z5vonFCZE3wW4AHg1s7ZsnXxG6bmQ3qfZ6\r\ngp9ewbWftfPzuIA2x1adPLXQn/U4flvahvkfaEryv6PICPFWbv86xmMSzOzt\r\n+bYOJ1WcumLma+sJ1kMr5DQrOGrCxZfVrDUZyyqErfzVoodDIMAf874f8O7B\r\n/+rXUn2sY031tkNJULyMsdCjk4r7h8y9Iqk=\r\n=Vjpq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b45ef0f6764b2048f5027d4990cd48d6bdce11ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/rtl":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/shape":"14.0.0-canary.641ed0851.0","@material/theme":"14.0.0-canary.641ed0851.0","@material/button":"14.0.0-canary.641ed0851.0","@material/ripple":"14.0.0-canary.641ed0851.0","@material/tokens":"14.0.0-canary.641ed0851.0","@material/elevation":"14.0.0-canary.641ed0851.0","@material/typography":"14.0.0-canary.641ed0851.0","@material/feature-targeting":"14.0.0-canary.641ed0851.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.641ed0851.0_1650470816349_0.3537329394348787","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/banner","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.e88f83024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1ca6b0021d1b12985022e6ef00877c42782f308","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.e88f83024.0.tgz","fileCount":31,"integrity":"sha512-IY6O6UUEEFwRhfXYzCSSdeIwwMsTr1nxD/opPEYvF0DZXKv1ywsWqUTmdT9x5R3lE/LXGP4K0dd3AaQx1THeHg==","signatures":[{"sig":"MEYCIQD/esOQruNZZTvgXZlbKEBs5v0R9CzcABgnIQoTO6/PlgIhANdYuPQ4f0lluNRId3psJNKqtKMZVLRZNJyQ73pV6hbo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEeJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJ7w/9HwKdAidwCVJXErun4oX1T0Z2u9BuNTy6aOBqJrvFv+SerW4i\r\n218z1lIehR5CGOHeBN4OyGjNWYGLISDnuihdZrqkgYHs64IQ+iCLGZ9rmOtt\r\nj/e63xYHgY+CIg4lnHskG14SCUGiULg5smdy1/QOTEinlMVPTk4hOoDU6qq2\r\nTP/BnnWjj/MJ1/dtjY5BNpOXLjvR6MJXZNnSotizzAz8OsDP0om5s0bEfv3l\r\nj7WsSCQqWTQPezYhgz+DRkPZ+ebHgtQOFKQpV/5cMJ3zF3/3WRYeI19J9iW9\r\nvpKvqrymWQWne6pY+Ye/luWkzNLX2CCHADSNZ3+x6rL7E9EOU98U4kFvWnn+\r\nm8GxzQPoYiVJwac2DntljP4HBiiP4sCu75fU2bj8Qw48A7j+0mjtqq3i8IFe\r\nkjZrbZEu0zb3zuX9D+IHv4srL6ihaWkWVdfX87mhGez5Vqigum2pzDkf5a9b\r\nGDGi7g8FDo1m3Spo01v2wa2qCvsrXoxHwoi457qgKWxRhiOae5l9A1yYeJOE\r\nMV0hhMpOCJqWhPX8lDfJ8+6+eRug5LU2v4rg8Hkp0EvhtNx19VuFnBhgelFL\r\nl+ddi88EdhyhBa6o/lfndSOo1wgwp2I0U8mlxOllmTyCFCBl+XUFGSLsRuZo\r\nkeUAy0PMKTGfSnk4G3vXk/9DT+nI2QahOpw=\r\n=veAS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e9fdf51ad2ddd3dba754b98348bc356126b5640e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/rtl":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/shape":"14.0.0-canary.e88f83024.0","@material/theme":"14.0.0-canary.e88f83024.0","@material/button":"14.0.0-canary.e88f83024.0","@material/ripple":"14.0.0-canary.e88f83024.0","@material/tokens":"14.0.0-canary.e88f83024.0","@material/elevation":"14.0.0-canary.e88f83024.0","@material/typography":"14.0.0-canary.e88f83024.0","@material/feature-targeting":"14.0.0-canary.e88f83024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.e88f83024.0_1650476937157_0.6776909411936645","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/banner","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.7321d6254.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9b7629b8cce688344d8efddbce48ea6e3e9c572a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.7321d6254.0.tgz","fileCount":31,"integrity":"sha512-X0xw7Js1Uj2L6Th8d0c41X/mn0pncpCoKamlkZwYNMmKSK2q6+LXuG7TeM4Rh24vouX2/W4RxMxSP1MIPs+w7w==","signatures":[{"sig":"MEYCIQCfKmHxPNbLAfuiQu6xh7KvqjkO6mthLPpd92rOOEKj7wIhAOx3qhG+7b1Gl4qzX+rz/ceR0jpJo2T2IT1dnWJnQHrE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiQA/+OCNJT+cxo7HtUkkGKHOexzPavh6E/lFUKGZPKI3/FfCnYP6M\r\nOnIlGfljKTzgxpwybWh1Yzo4D9Ax+4fozCKVtqhdfLstUbyFlwMtPykKlyL3\r\n0a8rd/fcA1Csb1EpmfBBJ70oR6fyBHNZGE3iv/6zsq9oertDfjUvpEneCHg1\r\njPOgJ9p4xvERRlb88HxlYVNPKSINbQ3K4832+QMZ68M6kjSxRLH5ihpHIO1o\r\n3hPL2k3PFh/IBi44sQDm/EV9JYzUt6aMx90MkaSVmFpmmwJ/3LtMz3IDECxx\r\n47f4PSLwq3Ue+3QHByWpBOKjUzAw6VsxwTCVPpRVZ6FjAi1MhxbCa66mbPug\r\nXg0k4J9TiuDkACE6qPEB3QEnADmnDKSIqhWi8syyqHoMW23Gp+ZdW+fUSHRV\r\nfaiUgLNoNY1QWIaKTL1XtP05XpzglB1jvyPtK8QTdkcnLTs4tM/8nfU+EDgd\r\nif8vL6mC9ND1qFM3Nrn3qgdC6s8M2EJ3D9n2JS80mg1x10QOXRivH67dK6ax\r\nZHjIXwsgEZWczSHPkbGXKeIqedzOdaAu+WUev/wpig1BUclnHg2XQW6Q0Zhf\r\nw5gIhpCQy5xIQbkuRSg3qh02cHqWhF80MLZZXvxkz0SKjAT20rzTa3rRrAE8\r\ny3HWJWkgZuhX6yQYC6wXF5+iZmqctKirHhw=\r\n=nnT+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"981be270463043c4b45845cdc3efce353eb53b30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/rtl":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/shape":"14.0.0-canary.7321d6254.0","@material/theme":"14.0.0-canary.7321d6254.0","@material/button":"14.0.0-canary.7321d6254.0","@material/ripple":"14.0.0-canary.7321d6254.0","@material/tokens":"14.0.0-canary.7321d6254.0","@material/elevation":"14.0.0-canary.7321d6254.0","@material/typography":"14.0.0-canary.7321d6254.0","@material/feature-targeting":"14.0.0-canary.7321d6254.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.7321d6254.0_1650485552203_0.8611645056431123","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/banner","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.3ab956515.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"59a2ca5302e32cc4f116659aa9279ee42e756104","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.3ab956515.0.tgz","fileCount":31,"integrity":"sha512-pftckiI3sKUgucDEdo1Q7LS/L1JMQSRz6t4DD72JnvVeKBrBqlFRHELiFG2c2k6iRuC7Tc5bSGWWzVRcLFqKCQ==","signatures":[{"sig":"MEYCIQCzfsZZwWhCFipSU6ctrTjonlOfpWAvdZGWgFJqA5TKngIhAIFjO7qnap++LoL3wh+rhDVRxRJIG9PAH7/75zhnroHU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXrg//fbnZWz0pPYK+/dFeooletJ/i1nw5pElty4OG3wRUjlfG7BE2\r\ndchL8vI8IYWXo/Sw4TW21aUpbNxR8DRw25xZ4t+CVBtJ0aO/0zTOH9FcG3PS\r\nlgjSOcScVVAjM0VIAw7B49/vEEZOkXjHaIBhXFVJM/oI9NMTpabZfrIzpbqu\r\nYJW2ICFSFtHC1bGUQ64VIqcEtGfApH9HB6+oTl9Jfs+JjBwPR4J3ALRLuKLo\r\nS8lS1rSCMHS42pyKhb8CZmyzGkBwv8JbzUBnCXTkyyJbaxrvpr42GE1kK7/j\r\nGsZqoF387d/0N9zK15rraUKKh4Jgkv/kFfmcGQd1jGeO7KtsgxbJGchRKQTg\r\nTa39+W3BkNap+O46W0F8uyEUjm+NPwETVUG/K45h8C4lZJ3aT2Kf4GxOyRb7\r\nxO3pzyGv2MLCyVZAmlMVBZafxbV89Hbd3mz4wDfGLQhe6NgM0eWXmPScArir\r\nZFNN9NTpg3DQ2bfxsp/bX6cycJVgzHbaJ6SrudUCC2rdl0KWw4ZG7ZafKnQL\r\nWzbB7gQiGSYwyhbTfGzOqxAqmctvPvg94gEQlkRq2yMcN+aChUigEIh+xlON\r\nWNV3vEFOYzkX9TE+BaPKyolxLyscy66Ydl+rwN+sc7rYLoLfCGP4ZiFUM7+S\r\nNIoO7ogph3crZg22KZ4DkmVeSfiv2xD3s7c=\r\n=FOpN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a09484c5e8d50e8b042d5367972a9111e0432c38","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/rtl":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/shape":"14.0.0-canary.3ab956515.0","@material/theme":"14.0.0-canary.3ab956515.0","@material/button":"14.0.0-canary.3ab956515.0","@material/ripple":"14.0.0-canary.3ab956515.0","@material/tokens":"14.0.0-canary.3ab956515.0","@material/elevation":"14.0.0-canary.3ab956515.0","@material/typography":"14.0.0-canary.3ab956515.0","@material/feature-targeting":"14.0.0-canary.3ab956515.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.3ab956515.0_1650898987874_0.9522068859798543","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/banner","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0-canary.53b3cad2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6e9a91213c95533a088135a1c4fcc5cdfcaa30a5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0-canary.53b3cad2f.0.tgz","fileCount":31,"integrity":"sha512-LXcXCV3orFU7BClG4c65TH4ODTQ4FTzPiqMXcr1FfTTr+2GAEQavaN1g1Xl7D98CdQRmiI66XdGXCLMLa2f0Rg==","signatures":[{"sig":"MEYCIQD2gCGjZD6G4qkTMdv7Q5UJcjikx2m8Ft3KB1kgo4nccwIhAOb8KBdeLwcwpoWG5l0PV+B0fDpQvhBi2LLmsRlwXUes","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA9A//YptB8kq2t/3RzkkseOFQbuCUdefhhAYjEj9O1GtyWjkbnFnC\r\ntyG0ufm9ctuXf+3DNZctI2t9snQr/H2eYPz+Kek0N+kRrA5zb+5r0/ckkPOF\r\nc2K7ZnAI5Zt3lIQqBqP0lnIqW9GCWeC+WQv2qUDk4Ck7ci1aMiCFe/7eknBg\r\ndKQzW9+06RmV5uT3M99hJq/6Dwm2YVpdMqEf0whVRTlOMK/6RU2oAGGmaW0/\r\nPqGaU/pXqkpxOoBJMxLE+F4OgclYE7d/gbNBbB+r6LU+QTKJ48UDm3rw3E76\r\nUB41dz4osbji6v+WLkdRzqx2L1fUzMNB6WVfIkAiuKlVMqPugztUeXm6DUdC\r\nFE7vRn6CwVtPaUTflKn+205optT8ixk/DJWCtw610UpxCk+22q0UYMpijZot\r\ng9+ft8qR/yrC2VbZ7sUdYfgm8A6kk/Fngpaj/BEcbgKOYbg2rwqi3lHYey5j\r\nNid9cTeR/Rz0/+RvgKpoQ6ySsWN+lvuLn//vRxT1O2Q+8Z1GZvPti9vCZVw1\r\njMYjALqEHqVmPlHzUN3CIxexzNFHX9GsXjdyQggTe6IbV3I+0cV5D7Y2e1PB\r\ni90aIGhbyoD9tPmlopFzh51AD2ikz+JF9VqWI0yNwdef2Ed7jwLmS5PznZP4\r\nNvy2nTaQIo3Fbu17c+oSZTBcjtnuOZkEQ84=\r\n=i0LE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ebeda2e23436103241b0e82afd57b60f74599133","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/rtl":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/shape":"14.0.0-canary.53b3cad2f.0","@material/theme":"14.0.0-canary.53b3cad2f.0","@material/button":"14.0.0-canary.53b3cad2f.0","@material/ripple":"14.0.0-canary.53b3cad2f.0","@material/tokens":"14.0.0-canary.53b3cad2f.0","@material/elevation":"14.0.0-canary.53b3cad2f.0","@material/typography":"14.0.0-canary.53b3cad2f.0","@material/feature-targeting":"14.0.0-canary.53b3cad2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0-canary.53b3cad2f.0_1651063601901_0.7694402001692875","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/banner","version":"14.0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@14.0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f22163f7df433f8a6239007c98910150a7ec931e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-14.0.0.tgz","fileCount":30,"integrity":"sha512-z0WPBVQxbQVcV1km4hFD40xBEeVWYtCzl2jrkHd8xXexP/fMvXkFU1UfwSWvY3jlWx//j4/Xd7VpnRdEXS4RLQ==","signatures":[{"sig":"MEUCIQCKSXgIpS88wZpsQRC1+549O62+mroaE0Zu4m5HksC6nwIgem181+Q33gCDXirj8us/65I5N6SAY8UU5vIZpQSFrac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459269,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq25hAAlLBJuZ49tLoT1EIblom8PAOR8GeT0dVsEpdrHpn+xxcgzSV3\r\n1ET5Kh67/oPDpywyr+zr5mXh0k5L5Jc/JoUNPg49yNXVl25iWdvysioGXqKP\r\nkhDLKhE0s0J1gg2LXgVAa/gG6+VrMNdCaHzHJoS/aSbQTZkr7Sg/nCvaSACQ\r\nZWLDNXjxFDYeWeDPQPyeVm25AwCp2FkuJD4I6S80RRKGod3fWN825/n8QZyy\r\nsXiI51vNGS/XdGngWg67gD+uQEWaJpz/5wj5VKw+HOwrd8bBPuqJb4drEDFd\r\nfIsCSlrmUUF9mN/G6qO/kiG34kZObvCuVDEmioiCWGKLKe4rNnjYOx/JTRsd\r\nHzn/QiHOwHSgFC41NU2PfxpsNPwjfFElNXZUhOKFj9qw4l0h54m7DInUEVaY\r\nvDN9DxnBu3QQ6LUEpzplz92vtvADJAIS2REWmey7fEnOvG4GUvHKRFpAegor\r\nlJPit75flK7IMnTiUnFvSDbh0U5ro3z9DhzeU3ssLAXcXws5MvCxzsF2bkPo\r\ny5ZYKZp8FDcRVaTIjKNvff9yZd5xI7nn6JC/vH7TCbMIZ7KP6fofL6RMQ39V\r\ndr1KYaJBSx5gHpWoe9BN/0ntdyKoPz7z2eukZEaY5+xh7+JnhitSlKTXFrYV\r\nRguBfTuImC5ZiR1MU3v55h9hgWUYoaYhojk=\r\n=bPAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","gitHead":"432c815e58d61a257742836f816cf95e271e6ea1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/rtl":"^14.0.0","@material/base":"^14.0.0","@material/shape":"^14.0.0","@material/theme":"^14.0.0","@material/button":"^14.0.0","@material/ripple":"^14.0.0","@material/tokens":"^14.0.0","@material/elevation":"^14.0.0","@material/typography":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/banner_14.0.0_1651165033575_0.21521919134821554","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/banner","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.432c815e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"74dc9523b9d5bb9725c55bfa6be5fce4ee6c2943","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.432c815e5.0.tgz","fileCount":31,"integrity":"sha512-bzx34gZ3jYw3B3AscCWpRdhY7To3PkWVdQYvkwjxMPEe1in94dFMVLIlD4mGFPpEzIoHVt1OZXudHsAfAEUeeA==","signatures":[{"sig":"MEUCIQCS8ojXBqTmuicB3ME+ijkTiDuFi5XQhmV53JBLGuMrBwIgT8KRYpVbBwvXnIjxrqR0wcMksaI+1lnjZ5AtUhuFpO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasenACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRhg/+Joi2eebwLeCGIAQSmc447AVice87HI+FbbPWMkD8O141dyUs\r\n9C3YsNqJSuh18Tf1zf+Cq7L7TVBSFXJ3wHLPNW6RJQ9fCDLjiKJeaZ4rW33i\r\nl1bTUujjXkLal1yRv4PC/RjgXmEw2lN6KNjdF9WVN8hn5kqioItAfCvLKZ9C\r\naYGMBWB8huGSpK1CCLfBb9UUrT5RE5DgueVzhHuFZpojm8cEjgbBfbobDXtb\r\n2aRVJKSSF7RMTRRHPZaLH4kWOvn4Dw55gJd+unGqX5HhUY4TDsGVjqPrtpMb\r\ntX/WiSLs0cbj5m85WZNXlDho54rbK3u9zNA/93on68VOeMKF40A2wCKfGCwO\r\nhwwMN46RhPU/TvKTQ+/9K3ttcz0OvKJRCxHOzQ2+OCtJPsNBq0gxjbi0M9Ow\r\nmMogmE876ICAEcj+lqEEPL9yUEPHglIPeqi0mbaqspKxEVPQrAjppRijMmuG\r\nLY47gKJx9GafgfLjvUQFWDVRBdSwXn83HMgzYECOD2Rk2X2itxAmAah9XdbA\r\nuilIoemU3pbJQMXhHYvqxbIGoQnVETFclqCB28zfcux8XsUegjxHUeUqz3DD\r\nkJUzNsy2faaPtzTWF0fnUG+i+Pp5ysqif9peXJ+gjfYUbHJ3EF/u1FDT/GLp\r\nbeTGiQLNp7g+GAH/kyb7OFaGkYuwGXE4uBE=\r\n=foOX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"df8af7a4f190284cd9f3bb1756b2f443509424df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/rtl":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/shape":"15.0.0-canary.432c815e5.0","@material/theme":"15.0.0-canary.432c815e5.0","@material/button":"15.0.0-canary.432c815e5.0","@material/ripple":"15.0.0-canary.432c815e5.0","@material/tokens":"15.0.0-canary.432c815e5.0","@material/elevation":"15.0.0-canary.432c815e5.0","@material/typography":"15.0.0-canary.432c815e5.0","@material/feature-targeting":"15.0.0-canary.432c815e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.432c815e5.0_1651165094887_0.9052864802785636","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/banner","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a0f01f669.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fcdf23d99eb97e6b33e5f5577a9e0025dd856015","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a0f01f669.0.tgz","fileCount":31,"integrity":"sha512-C3uaBYa5zJWQJY5ghp1GkMKuoM2DqgJdBsh1Hvv8036XIqPBq/GmDiIYHaR5h2naOTussEz55Cw1fzm75rtI9g==","signatures":[{"sig":"MEUCIQCo+eXhB+ba7e584r8JhxTz/DKUamfECC0H12l1P3QzgwIgInrvO6Y3tQOAjIuUTeYNEP7xTI/nyXxEws0SdG8abn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYH7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrug//UR6P16WyOzAQNikhsAMe3DuOTs8D0YiUOZNfJ1YM0FWkj3mG\r\nVGwkZeUC0hoMpRmyhDAZVXLpbQmQfg+MOgau7pfDM2p5Bj0XjHtx3wDMxiS9\r\nfh2dgXUew/zFPRSL28lZe+HybU5M2VIGOob3fMLGTJ3/yk0EknbirZoT+PM4\r\nPJ8yvqENndMqtAvG6qkKPbEFWc3h+9eBeNX25Ujeuqbdl5w2e3CHELnXcQ/1\r\njfXA5INpaHka4H70RxCv/NRBhTZUEHiBfesrb9yz/2yU5apgwetksJdDgURd\r\nIe5FwQkoPmgvCDMxQk4DmQ4dNdkKzgISdlGdwBN34dywwOAgop4c2duBeX38\r\nwNLK+dYdrVI2+G7+8aWpuS53IveI73Q4rO5oeaYpWrtof7VBmXR5vNOEDefV\r\nw+gqu/jsf27g848uWZ5VTGlzf5bpmFo8eKG8wpd64z6f/nQidi2pGvs4JZad\r\n5VIgnHLPfXmMIhlN3Op0hEWGf6KZNggGRl64idY+ZyxIXVbQBTBHduai9mPQ\r\nAXw4DBEif0sg+zaiOdNZLrFg7dcf5b9rg0qXaNbtk4fFQz7LKHmpkpPzw/ZT\r\n2ng562uNExnvsFZeSD5tyzCPQLqlHU9y3mORcdAPvmRHbQ1jC47OXtjBMDzs\r\nF30WPYty74dGl+bFlBEbIDj6tmzn6tw2NoU=\r\n=ABTy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"51daa70df3212a8d73c545c86ed1c57273d41688","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/rtl":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/shape":"15.0.0-canary.a0f01f669.0","@material/theme":"15.0.0-canary.a0f01f669.0","@material/button":"15.0.0-canary.a0f01f669.0","@material/ripple":"15.0.0-canary.a0f01f669.0","@material/tokens":"15.0.0-canary.a0f01f669.0","@material/elevation":"15.0.0-canary.a0f01f669.0","@material/typography":"15.0.0-canary.a0f01f669.0","@material/feature-targeting":"15.0.0-canary.a0f01f669.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a0f01f669.0_1651868154764_0.6315715780759128","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/banner","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.276cb39a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac5b40fbd1a026b0f22d40550104d263c5cce7eb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.276cb39a4.0.tgz","fileCount":31,"integrity":"sha512-Umkgd98Jkch0woZ8IfN3mAtHbZP4zNU8V2nb1GFZg7KO+SSUrG89v95NoRIY1zlQMRUGqOqxo5WH/Ei90sBstw==","signatures":[{"sig":"MEUCIG/rI1zuJdbOmZ/KDyXZzz26s+cJUTuKtgg9ndJ3oAfgAiEA5quLDfIq/ciQrav4962TwgQcJ9pJ9TNHaAovXMOIZwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZP9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLIA//YO9nLiWeeLXiFkK3OrX6sXIy9PeebppG4KdXaDv+fPZs9Bj8\r\n+8qpqHaIAECwKxRehOlc0ihi8NId4ntYiepacHZTKXEDi+V/hT3ZHnJcJtys\r\nwYL/coG7KnROSsFDznCDENagXBDiGg0uoLuT6LvadgHt45M3Bisxk+HmE0QR\r\n9QjFsSn2dTksg9YYxYOTOUgxrmb7sCXwQHN8/n08hJj8tKHbXhZX35/uEr87\r\nZVtmi+0ZrTiXuVV3wLpm5P34tTJE3pLsPD0/RvvXWwTuh5SD5OHB4y5QHXtA\r\nZMwUt9UQnNgteuxhreqPV+vE/3NTFFBGP/Yy5+GHZbKkks8Tgv79j6pAaG46\r\nytRJhf4xi+AtvbcfMcCDLQtQK1alogLoAKTXl9BbSKlrQD05VWaWKqb/Ht2e\r\nl39ncxY0BDHPebd49cJOmfo6E7JR8MdyKkCVbTkQ5a8LZ3yYCfmWjyr6tO8z\r\nNiXFHg05lflN2j7E8h63t8O4ugBGtljzxXmA0cgMXlMtAamWYBSOfMBq43a1\r\n0Rlu32PkmetG8P6sG0VSMbJ41l8kD4lnAEtLftZkCSxYeG23wjEM+/ANB7PR\r\ni3lfQIbejadvYRchpVdmwvmGfbF9R0QQQcfloH15QJlFs7SZNshC5dP60wVk\r\n3kvTOGST9GoBPgERc1ca29EE5/qVLP1zEn0=\r\n=n/HV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c57cd64760098925aff1fbf0bc2a73d32dd2bed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/rtl":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/shape":"15.0.0-canary.276cb39a4.0","@material/theme":"15.0.0-canary.276cb39a4.0","@material/button":"15.0.0-canary.276cb39a4.0","@material/ripple":"15.0.0-canary.276cb39a4.0","@material/tokens":"15.0.0-canary.276cb39a4.0","@material/elevation":"15.0.0-canary.276cb39a4.0","@material/typography":"15.0.0-canary.276cb39a4.0","@material/feature-targeting":"15.0.0-canary.276cb39a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.276cb39a4.0_1651872765002_0.7917965614374436","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/banner","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4fe98ed70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c45cb73bc5f5a59fc047feebfe2ecd81d0923c7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4fe98ed70.0.tgz","fileCount":31,"integrity":"sha512-got+QcF4vE5KX/lB+ve9eZqpyTDVahCG1Kj+sWMxpfSYUcB6nAQhsafkrUu3yKJcXoKBoyuhGUp8f8jo0Dh4zw==","signatures":[{"sig":"MEUCIQD8Z4JjKsvDUArPeGBM2Fs0rCjRefreROfKNwoDS8ve9QIgSbQWmdJFTaIABFGSsyAMxHQXNKc0F+2MU9gd1jWaAlk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZm6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3AA//YG/s4buHz1QoKd0cZng2Vq56Nt1DnpE3xiqMh2/XvTzq0SVv\r\nvOcfPOgfbPIJGTWPildC/95bBR4z0Wdxn6cGZFBAMymXgi9MbJNN1NUoe8oB\r\nTkKpItxUpR4Fh7uDSNNtXLuXtTnR9H1RxZwAZYmiTbUNWDK+hmwm3HxN3QzM\r\nwqc++Bm5f7elKUC6Y1XkGuhW6tSiGTvW7y5TtSrIciaFyAsDjCzHAABgpfKg\r\n6yl3Pfp3pCGdMtlnqWXEfhVmkR1to7pTj8/xG55TxuDAT3KVI1GH2HzuOPi2\r\nGPz9/qTlT5cA6tTm5Otd8xsDFjGS23MWcLLIKRNeKjRVqInVt+7CdD5dIPPG\r\nzPmMiR1ZlxQFoaSRx4KdM8ou0pHNchYlFrxUcFnJSyzePSaTlNkJZysPYVW8\r\n66PT16iAL2l7Km/KV3jkedtZqiaKSiydESffkabiKJ+NGsWTp/9gVKapOL/h\r\nmoISA2FyiB3nLLAnKO3fxEZ+ytPQxaXGGDmxuLwtVcoAEn6JulpQCsx4phq3\r\nitPnGpgEYmWR2PFoGy/w//UiMg71ZmhBq0XXkzmv12S24CEhLWZeS7hf2LJ2\r\nHqQdEwe5ofjlGAZ/Gb+uVzphzFiJj/KnpRVuP1lGhZ2WGZ4Er/sTiHcgQ6Ui\r\nnBX299hiFQotvqJrJUUg8zznbetekvoyY6c=\r\n=5oTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"353fde061dd090ede4416fc2477bc050587d6367","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/rtl":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/shape":"15.0.0-canary.4fe98ed70.0","@material/theme":"15.0.0-canary.4fe98ed70.0","@material/button":"15.0.0-canary.4fe98ed70.0","@material/ripple":"15.0.0-canary.4fe98ed70.0","@material/tokens":"15.0.0-canary.4fe98ed70.0","@material/elevation":"15.0.0-canary.4fe98ed70.0","@material/typography":"15.0.0-canary.4fe98ed70.0","@material/feature-targeting":"15.0.0-canary.4fe98ed70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4fe98ed70.0_1651874233844_0.6391258793940862","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/banner","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.58b130a3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d34385b66e9eb54c313e77860926810b4dbe24c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.58b130a3d.0.tgz","fileCount":31,"integrity":"sha512-+fjW4WOVss4qFafMIsGyBXBBYEnMgwDHSEbaoXc0yinPlxqsFkTQ5BT0b7MftKmx46BsaAV2PJI0HumO0my9ig==","signatures":[{"sig":"MEYCIQDi1mplrxRuc7sU5Au4BMVRtbhqIOmCnfAQMKnxKlBBOQIhAIptEIXZitgq3CjJ/3eFvmnqtEjlX/OnEr1/WXpLiJbA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZpEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEZw/+JEsl7Mq+YPiS3sfGlmN3SU8Pl15OgMfWe+KIm8NTYvkQJMzF\r\nM+ndLvJWcqoRPqmYqfm0VCzQOBvgfyMfLGNlw7Lq8EYjE1HW3DRF8GRMjYi8\r\nqY6HI7nhwcM5iq9SayKVTGmwsPJKzUNeMeLTPTwD9gNdOw/cVfEexxE8apbM\r\nu+7S83RQKUOTDovTa+lJiYD6tgl5wKRo9rj0pj/V91RR+2wKBqNevFkXEWWE\r\nDEmGbGM1V+WRjy7fiwtf5jqdEiKudENmO+EANz8VDwBB97+doy07AcC2pq8q\r\nOyYsc5+dBlvK2Cc6A6ySntagVipzjinQdbAN25XSzrHXn1osDMK6lHQmL79E\r\nnF3fl4BXq3nWBIf5TzyqAgrQ2a6Ll4b79s1tw1yZYGAufkHKM4OBibVo/d90\r\n+f+t0Ug9FXdiTPvJuhTtu+dKSzPdCeMqnRQROEw9mQ15bRgkaLPL4cJmmpbF\r\nCLdgObaNElKHI/s0mukDS/0AR3HT9u0o2Oweei1XW42QkdN4O+vo9pHlKgKa\r\nM64pmlKI8J03nT/n27jHGODdzFAmu4N24NpYbBChdI+wZWrPAH6Hbjpa7ks7\r\n6b90OTuf2jXrhhYk+Qc1TPkCLH85IauSIWFk5w4fKHpEXUw/WFtrkFkTZxv/\r\nNoSyPs5T8MaE5arhSnXlOd2HeFMhJ5Ns+C4=\r\n=ZOW8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"58c8ada7946689a0a59acd63cbd49b6c987c9853","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/rtl":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/shape":"15.0.0-canary.58b130a3d.0","@material/theme":"15.0.0-canary.58b130a3d.0","@material/button":"15.0.0-canary.58b130a3d.0","@material/ripple":"15.0.0-canary.58b130a3d.0","@material/tokens":"15.0.0-canary.58b130a3d.0","@material/elevation":"15.0.0-canary.58b130a3d.0","@material/typography":"15.0.0-canary.58b130a3d.0","@material/feature-targeting":"15.0.0-canary.58b130a3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.58b130a3d.0_1651874372571_0.45969583155797533","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/banner","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ae278a2fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"264280903e022a96f4fc374be2bf4f03d7202868","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ae278a2fe.0.tgz","fileCount":31,"integrity":"sha512-e/LyJHmDpsqDgPfDx3LjoPglW2qaejSH5WiXcN07yosaEjLW5uXA7Wi5k1nXMXFE4ipo+8Cz2C6AEdslynrV/A==","signatures":[{"sig":"MEUCIFR2NP3onillWGa/QZxfU4gdqZ2/JP+F7X9aIbto1k5SAiEAkX3B5whu0Pxje7idCskcaZUCl6DRxbqFknDkJxophDU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTKbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAMA//ZLj8seDR/JXXj8P4GZTwvMhZ3DhfeTOfgOqkQpfbkVzwQNf9\r\nGjxmsT0bUCvx7kktqMqbhUkniavXzzSwyAzzoob+cHctGPVUs1d+OZfsGC8A\r\nIOflo34vJOZgf/shSZcU6L9cIJbnfxw8Wsvj6jeWlEL+EHMtyGI8mf93r2b8\r\nTHnpGbYqPE+VUg+mOW4hpD2sPg6hE3TXj4R9/VnGnNttViP3g9/IOPItmJXY\r\nhY+hd6NSJ0fIhBl9VhhDG3maJPRWaX93pzkp0jshCcSH+jaMxFt9uRKzcO9p\r\nTQAbzFfF4oxAS7kSycBYDrbm/mX11cVW7iut/m+UG3QFLPp70Y6Cco3SadG3\r\nD1L//4XlD3auu8ZdanZyKCue0JCTbiYX9h8KA3bXnDU4GJt/JXxUXJN0Trqm\r\n6o312KmEEm7b1DFEkBiPX+aJxWYIy1Xi4nvzdjBK1DCmJx0GqNx3LfzoUCho\r\n86LvshRT22keXNt7ItnfuTOmEzCQTsLvYn2VnNNbVFi/8kYzNoJEjMcJBBDt\r\n+T4ZwvrYA5SY69zh9hMJOWIn3bD38lTS7aS4kXvroM5jsIHGyRO0czj0JCTX\r\nYwER23ZtWnq4Zmvb15JF9gaxJcaGQep+B1pQlhDrLdbTzB2JEmOUSZQr8dj1\r\nBHwc3590oOjHT85dR+2VRItji8d5rfhfSkU=\r\n=Sspr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bfd08e232a3a514dd5a38dcd77d17df365502ece","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/rtl":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/shape":"15.0.0-canary.ae278a2fe.0","@material/theme":"15.0.0-canary.ae278a2fe.0","@material/button":"15.0.0-canary.ae278a2fe.0","@material/ripple":"15.0.0-canary.ae278a2fe.0","@material/tokens":"15.0.0-canary.ae278a2fe.0","@material/elevation":"15.0.0-canary.ae278a2fe.0","@material/typography":"15.0.0-canary.ae278a2fe.0","@material/feature-targeting":"15.0.0-canary.ae278a2fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ae278a2fe.0_1652109979456_0.9429860734092679","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/banner","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.bebf5bfdf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0752a9b0c9516e05342e4f2168d49a9ea159dd7c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":31,"integrity":"sha512-jzasPuYjxr0kzFKZ3JPI0AancuLgGiXwE/gZhW1l9NK8ByRlG0SkoL3DAs4U2pYE3MdxUO8wMu5g+045fwUxfw==","signatures":[{"sig":"MEUCIQCz3sIZh6Rg7116Nfgs2krXWC6DFVTuHClgQmu/8qqwSQIgUeweVLbkT0sYqJ1i7VspyoWCdB9o8iM/u7gX7FwqYvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8ZxAAlsMBslX/xtPrgaDstEVoCH0iTPDOJp9omOk21geHx47xbqJH\r\nCHxAInJDrjSIHU9Xcar3esyjnFkYDTDP7FZ6YRz7HcBc8S9ZUu0jPcdbXFMt\r\nZd0ZDMwXkl6TSA4I2NP69ohANsBAje2aRBHqowpYfuoQZ67fuGTxy/NU47ri\r\n0rJW0g5SDzsnMH9gyfr3UsjSenbVKRdzeuHOr1LP4NPhC9AS+ZMjkdNRKJoy\r\n9HYhSuxmkleJx90ns7UcQfouDdz+Or75n0nBFq9VCc5rrCtWQ8cK100bEmqP\r\nUH/NNtd+vQ02yDVAgWvt35Tr0GlEbALybl4X4uo3iZl6b3Lb7fHfV8WdDeNd\r\ndVg/0lSKWWwzkmNREh/wtBtSAWANw3nmOn8VCWxc4mVJgpG5LdG4sFe/YDHO\r\nUVIdzR/SJY6Yi9RNuDxX0no5APrVRoeRoUTRGQcujrNgTBCowyxcWI1PVKUX\r\nSBBrCN8K7+GP8jY0OxJAO2cMqeS6HC7n5aBrfyWd6kUqqCPY3dT8swM6QPd1\r\nwDi6zNa+zTdHB6AYqMmnc2BXpQc3nNi0ATYBgDjBFLc5LYm3kO07ER2MPrje\r\n+F45qmPmSu8FdFa1mwJotcH+V06bU6V617zNhhmqbBKgf2FI/m5TgY8v4OLK\r\nd8+B8VuKEVP3eX//umAUE1303a0eoXXCJ1M=\r\n=xbJV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"61d3971a411616375c31cb3fb763fafc120c9570","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/rtl":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/shape":"15.0.0-canary.bebf5bfdf.0","@material/theme":"15.0.0-canary.bebf5bfdf.0","@material/button":"15.0.0-canary.bebf5bfdf.0","@material/ripple":"15.0.0-canary.bebf5bfdf.0","@material/tokens":"15.0.0-canary.bebf5bfdf.0","@material/elevation":"15.0.0-canary.bebf5bfdf.0","@material/typography":"15.0.0-canary.bebf5bfdf.0","@material/feature-targeting":"15.0.0-canary.bebf5bfdf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.bebf5bfdf.0_1652236894356_0.5011242868493775","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/banner","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e6072cd6a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"caf5a254b2d5f77b3e3958a39871ff6dae05be00","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e6072cd6a.0.tgz","fileCount":31,"integrity":"sha512-VcZvOGCuLIzi/SmpYDhS2gTnI20vIg2mEbdmTEGckgpkxnnpdc2BehNRXtQcxLybUgnq92MKn1PELi/5kfuVyA==","signatures":[{"sig":"MEUCIQDwh3Wz7zryNKmzCSmPnSY7qeHVGmNiZK8Xcgmd4GznkwIgNj6foP3Fv80cFoBG1iVzIZJfaio+HjwS9kcO0ijshwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoshw/+I7yHtcCjYuLx951k+AeRR7FdklSWpUlWBGIKJK/fIMsL0sLn\r\nAUEtUYp7RVSUN/ejg8wQPjhvryRr071K9E8dmEu/KWQIIPkH9uGqrxf2BAnY\r\nw/uuvjSG1SWF2D2ZO+mUNZ5tgGw2n9oq4iTGGooTB2iX1OiBqrHk2Pt7gR+N\r\ncGOPV8Icv0RS5/ENIuvXt/z0ImjA0Nw/SNVbAOi/SJNy9ni7M3kHdmYN11SE\r\nQUIoa1OYBnwAjciF1NLv+Wl7C6G228cMIaclkuKLHU9znzO+xRnUJWCa17sa\r\nxXtl1NRcVlyuJzVis0UzlaBchv9enxBViIqxLdEAzjM7bPdUnpdyt3nm0ETu\r\n3kAqB4MdwAFnFsEzzl1O4LmIhI6FUHV4aO66WYs4PRMEhTVXyBMuUhBAS1Nk\r\nUSUHC75z6zglJi1yb4caKe5sBA6XBYPsJSkX7w1LKh4Fzb9TrABbTTwdbPvM\r\naUCQY/6xvAHipbaizmuNy54NaCYQxoXuTUu7quQCXUhC9vdVYWXRtJqFLu7+\r\nMgD+Hh8hjKvXeZAfCYmtcY/gDF6Hznw5XYVlUsHaeKNJbB7wGgvLENRnj6TP\r\nmDhVamp9VCb9DqOugUF/PkYuHANGj7iKHdBbT1X6I93OVFXSvShhMldFBcyv\r\n976oAv0HvU5PpstqTUfZHMqw4BQj8C/rgeA=\r\n=DWu1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ef2da678e66576709be19aed16a880b00e73a039","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/rtl":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/shape":"15.0.0-canary.e6072cd6a.0","@material/theme":"15.0.0-canary.e6072cd6a.0","@material/button":"15.0.0-canary.e6072cd6a.0","@material/ripple":"15.0.0-canary.e6072cd6a.0","@material/tokens":"15.0.0-canary.e6072cd6a.0","@material/elevation":"15.0.0-canary.e6072cd6a.0","@material/typography":"15.0.0-canary.e6072cd6a.0","@material/feature-targeting":"15.0.0-canary.e6072cd6a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e6072cd6a.0_1652300390568_0.2549477259539079","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/banner","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5b40eb988.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21684c61131a3b351d595b3bbd8bc47ffb9e1446","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5b40eb988.0.tgz","fileCount":31,"integrity":"sha512-RzQHZBOZI3uor7CphwkWjgWbrsSldqRpU5ugvseUCof5TzriOHxkDasQRtRHEh2cYWxXZrtP4Tkj3SMyb+N7Qw==","signatures":[{"sig":"MEYCIQChbq7S3IWGyGHONB5EYvvvhGbJzMpMnLLUqt7XfuiXFQIhALF61FMFZt5FsDUPRLTN2ct7BEoI7gCVBKuSpXZM8LNQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHTKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyPQ//XBUBPPI1lQJIRSGL1Gh9OTKPV5Br/Escg10V3f6JafJ4luxk\r\nikM6/S+VsZDE376SG5XjsjYrykv+oTqOt5MV96nqLBC+KUrniQrbQ3US5X84\r\nrsz0WYHABf7vGFfGcOxWLVa1jGd175R0edntAwPYCIQzS1AEjiHbiybpRd9C\r\ng3lAFh0l7uEdw/ApU4LLzuu1GWNQN0YrgIOQbCCRoPs06ZSJ/ykYOl8lNtyo\r\nM6QcgVNbrA+lJ0oOl6sO8rhNOWiKG2kqXpts9iTEmJvbQpnlbBbHY93MEfSK\r\n1ALwkI/4bP7kyecwN+0/AMFixQ5IcluoLKf+CoXEt+k/aCsqgX08ZETvtcR0\r\nTDoOn+UkXMkgOZ6LTEuWN8uOfKZ0ymPRR21hvkNhueDxYEFSThOkqryytjfA\r\nH8wkxSQXKyZ/fnxgCg+u1efbJcf5undmoF2rUBZmvqV1eHqWxO9/c20K9uu4\r\n1Z3LMU0ksOTOpcqqBo5sMCtG+e9EoMYIme991mSC5bEA3nWnQZbbK1EuUX3c\r\nWoFcV1dnmS797YBokJ2PvPw1bB91L60E3ruYDihxe2ecQ8+67lT1tMVIMpik\r\nT3S83y/KHm5kSwSZMH4/ttc+RKkP+1xXqPmTk+QlyVDOSYNmCggBaF/dNCgo\r\nHepq5isOfEIO74QOK/U5MFBVNsWBSifgqH4=\r\n=IN8d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c30f2a613c97ecb48fd3f9ad7b0677e51a156449","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/rtl":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/shape":"15.0.0-canary.5b40eb988.0","@material/theme":"15.0.0-canary.5b40eb988.0","@material/button":"15.0.0-canary.5b40eb988.0","@material/ripple":"15.0.0-canary.5b40eb988.0","@material/tokens":"15.0.0-canary.5b40eb988.0","@material/elevation":"15.0.0-canary.5b40eb988.0","@material/typography":"15.0.0-canary.5b40eb988.0","@material/feature-targeting":"15.0.0-canary.5b40eb988.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5b40eb988.0_1652323530249_0.6204033785997147","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/banner","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6a61d62f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a57a6c6802e9d40d4846748eed75a9aab40305f1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6a61d62f6.0.tgz","fileCount":31,"integrity":"sha512-ukCJxtWhTo+0NaNWl0NPFL+nj4va+cGmUF65TqetoB87GDUhjeOGd1rSl16QfbuEgHG0U9rg2HNnofzOuoP+4A==","signatures":[{"sig":"MEUCIAKCvnG9ZhmzbzlrVp3NqNS3zJzaXzGCq8lT80pq5JYVAiEApo3NF7veajkXYygMr+RiqhG6/8f5OfEFkFRutu+PG48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojzQ//fXaFp61KpMXs70+fvkNRC1OI2QC/PPJMueXbG81ONysIpub9\r\nbU8DY1UlDSlvJd9FhAFvAN8nrwbzmlEYu+znVxaSY7k+EbCQUz5eYiigHhgO\r\n8IU2hkDzRX0yJvkSCFCajaAjLSnGe56+FoPc/MNuZxoXTYXwNLgymo8rLlgb\r\nfYHSk2TyDlz1Atl0baxXChDnHP/g93Ab5M2STVUCCbNoURVVJWqgRmDexF7a\r\ndampfNTIX7LdOehtcUJH5Q+PV039UmQK34lD7/m1CRW26R+XNo9n4UanZr0i\r\n2ocDvoJ/5UfP0kaiwe4S/P2tJ6yb7YPalSr2+buFpMhuWgh9t21We+gMETLo\r\niVLKuAQBW+P5VXem1KyygavcGOSU4S75tZffkTCKejoeVGtrdaAWf3U1LGPO\r\njgwmdvV3bMpf+4maNIjw5nyWVzA9/cq4RmPGB0DbRNLnTl7L6i+HEEQa87u0\r\nm/GWp/zfjIjoXyCkHLCoRzkzLd+3XEvnGZSC4WxuCTFeykasD+ZLWAbQUKYa\r\nPJ5CE5Oo9U7ZiW/HbCCJbLXZ8FgOAf0EwRGUV0cYCRSVwa22WLkHoFY+TYfd\r\ninh/miSgI2g60W1lU2DDXU2KmqoVAaanc0ZJGrMR52NG43SY0cgiIcViK3Is\r\nrj9kDKvdPXcOodtYONn/QWz5wsvMZNO6ghE=\r\n=1hWg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d46f0951ee9f725b870919613271f00fcb1b521","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/rtl":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/shape":"15.0.0-canary.6a61d62f6.0","@material/theme":"15.0.0-canary.6a61d62f6.0","@material/button":"15.0.0-canary.6a61d62f6.0","@material/ripple":"15.0.0-canary.6a61d62f6.0","@material/tokens":"15.0.0-canary.6a61d62f6.0","@material/elevation":"15.0.0-canary.6a61d62f6.0","@material/typography":"15.0.0-canary.6a61d62f6.0","@material/feature-targeting":"15.0.0-canary.6a61d62f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6a61d62f6.0_1652387292949_0.8065034184954067","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/banner","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.05930a453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a1699a2e7110ef15f3fb128cb609fcdfcb62b0d3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.05930a453.0.tgz","fileCount":31,"integrity":"sha512-3hLO8F2GMejUIFvxvuMUCQiNVQvyjayIWUfLRsdNJnGPEqoEhxG2WPo1IsIKP2wTjrAR2r+OAyL4kcbCTtyYIA==","signatures":[{"sig":"MEUCIHXg3ywLanBGrnOKh3MuMzRrbeyvmPU1prqIe7+fKxzKAiEA7uKe2Z3H1LglnO1o2W7Cb1FkLWvPqMkU3oFwZBtJXWk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqgJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUxg//RMTqWXerEKk3sIpEX4dX/NxyxXWLecy9tYRzATShOwl4B30M\r\nXiopq58jNNFzu9e+WwDjtrT9Ghj98MnldJ6NYV4MIUPRRrPByTHrLCbWQRvl\r\nfMTJjYN+Khj32jRbBv8Z9RCOW+OlClErL+JjsmYzz15pZFty+3sm5WMXfRXV\r\nJTLoM0ZguyX2NAfStxiFxQ2pzKw3qla+WGr19rWJzeUaYz4Ti36TSsn3ckys\r\np/XI8uVxs5YANOdh60w5iKUXz7olXGkrqOvW5MBjbe80qxADDPTIorRwcDUO\r\nVJcKFx9RBMQcZXcPuGLqtYx07JJUlael9yv2P8UGk0Cauo15wtkqG+sL726h\r\nN0eUUeU0rgHkW8FguLgRH96/NBoYC4ROhbkSLwZnPTaWHocg7C1ZWI5mJof4\r\npx/q87kGJef7MYQhceOCCD2vo+G7hhWvT6lfF/b9ocUvbCKEgG1Gxdu6RW+A\r\n6jIfS/QAdWF0fPCObBpIa0DWCEYm0ff4vGctw/3YuENG6cvD3H4SYEr/44Ql\r\nq7xNI5Gpau6dl+Uzal4IJGfDyoik5N0HoBr+Xlfio1rO+pu1x3ctrGDi6Pgi\r\nQPVPe4aBe8VJ8SHJWMchcmvCa8cctIC4Rsybj5xZKFPXU2BKfhYELTGBzvHf\r\n9pPdH5edkH8P+XBCa/lQJ2j7YQYbYiRCm4o=\r\n=GuyX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e6dfc2d0553321fbe47e71fb414cfc1152b0ef8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/rtl":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/shape":"15.0.0-canary.05930a453.0","@material/theme":"15.0.0-canary.05930a453.0","@material/button":"15.0.0-canary.05930a453.0","@material/ripple":"15.0.0-canary.05930a453.0","@material/tokens":"15.0.0-canary.05930a453.0","@material/elevation":"15.0.0-canary.05930a453.0","@material/typography":"15.0.0-canary.05930a453.0","@material/feature-targeting":"15.0.0-canary.05930a453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.05930a453.0_1652467721508_0.4851914987743142","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/banner","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c0a11ef0d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e76fcae0d7445ae85c72c02c18031b12ce5bb230","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":31,"integrity":"sha512-KUJjDNNfxVPVqBiEVqP09+auHM/h7U1jPD1X8gZFiDItd0s8EHncThSKj1scFAMA7kZrUVp1fG9sozjCrPwhJw==","signatures":[{"sig":"MEUCIQCFIx7K0wX0G6F5WoEZ+3MXvOcU0ZVvZj768/Z3fcd/uQIgHLdCoONv1Gk/4FO24/ZOJF8MzIOEYQXZvHvIyI63dC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5ag/+MRJs9+0loesNMfXxHUzMxzemARQ0i+wRMWYpPr6ARMZMYiO9\r\nXN+wOUTt5iMnaa+SUXj2R563YUEIPRFpE3ZfSCeUJ8k3DHyp4D2WfXQZAZa3\r\niWgfa9+g6QTo9rSOpKlBV2OJSOw0iEEA4bJQgpUDmofltSsGJFfvBU6uFSI/\r\nOrhVTRhV/OhzLLQBD2cCFDYIEZ/kAt0bX2koW0qrmeyjSUuX5tlEqPUFg1jk\r\nOFx1HKOsPGp/aJToc75bxeWP6FCCwFSSF4Odzg7Kwm2efjAFG58CdfiH2RKg\r\nhLOEBTSESFlOh4GZYOcRwZntsWOPEcfrb41g0CCM5Bty1EF72UfDTxTLxR75\r\ne0vL+Axhrhx7X1BQaSZYaY7XV5ZrDhzwgNi8KL+B5ZUK3UHahrPa6D56B532\r\n4GrwuOf9b1aa/NvVGqXq2+SzI8uTQY+SWIGgNcGh98hsSfcGJ7eOkNIdvOyj\r\nVYPaB2PeHvgIcmEYFTKGehyRJGMSev5FXIKthq33CAjDh6YMFaA+cqpRnTc2\r\n69WcMMvW7GglCCNs+k+CG5dDbLyn8iH5Kp4X4kp/UtZv0JYqRDYmArJc+I/X\r\nemhFDbbUEhsCj+BYUsxElR1YOoaB5FaLVE59A7fa2dBxOBtlN7p4nWsz9NAh\r\nzb5tdq/+rf4noDSf+8B716kLqSHK38suy3U=\r\n=rpl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a97df68c1dadba0530f5fcda79fb8bc3082d963a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/rtl":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/shape":"15.0.0-canary.c0a11ef0d.0","@material/theme":"15.0.0-canary.c0a11ef0d.0","@material/button":"15.0.0-canary.c0a11ef0d.0","@material/ripple":"15.0.0-canary.c0a11ef0d.0","@material/tokens":"15.0.0-canary.c0a11ef0d.0","@material/elevation":"15.0.0-canary.c0a11ef0d.0","@material/typography":"15.0.0-canary.c0a11ef0d.0","@material/feature-targeting":"15.0.0-canary.c0a11ef0d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c0a11ef0d.0_1652911332838_0.2106495687071186","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/banner","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2f9b268c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cca1f9db3c50fe85bb69b807d517c669e6adc618","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2f9b268c0.0.tgz","fileCount":31,"integrity":"sha512-kw8fHtrrzP5Omhz+rhHfRrZeO+oC4wBUUKMMQy5e8lBkTfJ93sXnFXgrpU8XMZiiBOGfsU4lDtx0ScrfqscxYg==","signatures":[{"sig":"MEQCIAuI3H4N3zPzBYlID1FRSD3+2NbpiflycwPRcK5YJl3VAiBIKAdMnkQt4uYcRxYfuyrVsoQx8/vODxgyurerPPf8LQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGmBAAoAZKQzpIf7lOFQlVxy+P2Mt/rBEj8xK9OiWHdAGt0K4gN+9l\r\n+0OqyFyzoIM7Rey2dWlwrxKPwFgifw9meDs27D+lreaD5PEtim79DPMGSJ6L\r\nUzMl8kEhj+Sikb3RFJlhG7GWLFTN5vICbHHiN/LZdRR2muLp5MEkjHKlbHAO\r\nLniIBpcFbVUAIzT7Y+iucpCG/URYG1HVthy5Xo33i6tZBQOgGjfFjvuDsNqZ\r\n2MG6y1ADmcwOj3955gOxJSAIY2eeSb4hXZMxjYr/Kb1BLfalQ9wB8E/hfK5G\r\ngNYtn7PbcPDt+kwQmdN3viw7qmdzUHwz3+c3BNGAcH4RN855wQjMEWw8nxFN\r\nAMnV4nxPR48izNu1j6kY36K0XCP8Zm2CyLAfU1GEavaGWsy++JIEdG34OyMA\r\n1HG4n8TpH2d+54ZRmBXH8gRjtqj3BhtLvgmVTHYqYgnWxGYOGd2Pd7W+7yEV\r\nuARbgpSGhaakpVVvngKrxY2NY6RWdlVzpd6hF6WOOKpgWb5SpcdAZ+p0LI2V\r\nYewM/rVw4clJuaNmMrvZEDMFTizrtw10nvAXiw1DGS3DXsk9Vu0dpP9QS1zg\r\n6X9ZnJfXcBdsvWvC9FPwX/lNzUrIm7/y0xYwRyGrlu0pSgU9Qw+Hvfm0hjkY\r\nNKf7GEb6+qansru4pbXuqFvBSS6iQSV8FRo=\r\n=IwuY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"29832a4f010df39515e01d98656d2e77ac1e47e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/rtl":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/shape":"15.0.0-canary.2f9b268c0.0","@material/theme":"15.0.0-canary.2f9b268c0.0","@material/button":"15.0.0-canary.2f9b268c0.0","@material/ripple":"15.0.0-canary.2f9b268c0.0","@material/tokens":"15.0.0-canary.2f9b268c0.0","@material/elevation":"15.0.0-canary.2f9b268c0.0","@material/typography":"15.0.0-canary.2f9b268c0.0","@material/feature-targeting":"15.0.0-canary.2f9b268c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2f9b268c0.0_1653075233941_0.7986783926881331","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/banner","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7741345b8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdb506d67c22d376e04af72f6a15f116362de77a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7741345b8.0.tgz","fileCount":31,"integrity":"sha512-1CcVJK4sa2WiHb7RiGIwgc6lplE+EXum2YuWVGcCXFr3OXv26Q/SPH9aHG64io9+lrXrwvpm3ERTOr7cFFl2bg==","signatures":[{"sig":"MEYCIQDv226DYD70Yrdl9E5jkh2EuAT+Tzkqq0lLSD15A7ZAYwIhAJBwAUuNMqgG+1xh6COKmHfTg8ISWl79JRk1HbdeMF5n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphwQ/+LgDffKaJcNMFXK9EEWLe4Xpeoad/nVCiHKCyH4wdYwX0sdXA\r\n4IUo4wOWN2GemibkvtGOC9IL9NJ6+fcDZt+VLIkJNXuolJy75jFDzoSypE+w\r\nxuVIbNOjF9EJsFDvGfFrWuaWmk9PuzrDzHdz1NTCzpQlY2IyzwqTI2SEb2Ap\r\npcS8q1Cv1uDlsnaT/Ii8vsA3P1jOukWpF/GgT4BUL59TnS/GjD7U5R5h6MSF\r\nwVvsrzi5PVfToUdo4wD1U7VarCp+1crdLgZmdFo/p5gUHTlCH5KPiiqotHE+\r\nTFQDSuE6Bm/5xvbZLV8wt5vZERR41Ndkv3lz/R51h+o9mcAKoF9NdOZqCEi1\r\ncRrQNqxfH/nRd73srHTFgxpwoykYMMJRFuJUXA0JckCEB717OmNSoZk+egri\r\nxxG00Chh/9xK0+H+3hDzwVekX8dYH4mPV+CNeHN135W3amLviu8Yo21Xkdbf\r\nNE/7VUBtuecn/aITgzKS/aY1PgAUQI5mbutQxx3yjU7RCshs7XZIm0bhGm5l\r\nHTR7J9AflpabGRYHznsEBjFKDUr1/kUMxC7S1eS0khRuZXWsjdIChc7NYlbY\r\nGJPXtg2jQ2AlLsenTEKsus6yvewDhpmkdIAO5jQTdfpRPhG0biK9iO7aWDlw\r\nFrzP6VlCFeX0ircHbzXcVy7pudC4OsBWkSA=\r\n=ls0w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2e61e5e8196d28c1bd4d1c7a12c242276c1d8ec1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/rtl":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/shape":"15.0.0-canary.7741345b8.0","@material/theme":"15.0.0-canary.7741345b8.0","@material/button":"15.0.0-canary.7741345b8.0","@material/ripple":"15.0.0-canary.7741345b8.0","@material/tokens":"15.0.0-canary.7741345b8.0","@material/elevation":"15.0.0-canary.7741345b8.0","@material/typography":"15.0.0-canary.7741345b8.0","@material/feature-targeting":"15.0.0-canary.7741345b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7741345b8.0_1653077039789_0.2919357822782651","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/banner","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f807e793f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"35d0e6bcc61d90f513b3a4f95d011012ae8af25f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f807e793f.0.tgz","fileCount":31,"integrity":"sha512-qF78tz0AhS6gXyUrOgTDD/wdJanQFmqPCFSEI1Ef6YNX4pLZcUu5gvy98T2hOqvMhcczyTaBgSdAwJ/SSILwEg==","signatures":[{"sig":"MEUCIQD9c4xclTNr2qpOz3U+ERk5oIEyCmPEWOPpWoDamrhq2wIgQxxQfr4B+/4VAcRp3yKsBBbmW+TtG97Fq5frmmOjtQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBTHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj3Q/9GKbf4rryhDGLDawenfkcARIbn/xUMNWYOD+Gor6U47TaBYdj\r\nhjwhJz0ozf2ucAjNvy+yszsQhV4S6O7hGPjRhX7jXezJPGRPWyouXpydRVQm\r\n76RWW3byxKRhZz/CSBmoR0t0HzFwMGglJ0GZTZETyuDJP8bYd/2vzW8hsa8Q\r\nR2r82xAgQ0moxz3iA8CLCkyYcn2xMaaKwn2OAEms9a9Kx+wBDhGP+PLL91bF\r\n2vrNzSjXxrine2193GH7miLKAVAcJbwihDa66Cg9bHXsrdPmW0iawGgAP3al\r\n3SBCZSJWh9T+3TSCFI0Zg3K7FdNK4dI3FtXFLPENCGDDu0I2kaJHUAzdZtw9\r\noN/aTxjHSzLsfkwBDFSN675DnUoOZm3EoUFPDujY3NM7UavwNAJpBfl13tbD\r\ncYN9aqxmAcbv+gA+KD312HiM0hne+1Rzc/sA4c7vqx7PPENrACisQ7Pq9XxS\r\nL8V8EsWAFaeKW4RqLZC95EpGdjc9ql4uI7SqWLFrRHhcrwlQAdOAR7C21kXN\r\nkZwTZCM06Rebx/5H1Jr9iDDv9LdTib32jm7InE9YDNvFzZZoPMv8/OpWPaU4\r\nb65HEH1q28DrD2+PbS6zPhXZV9Jf2NQzEdVwYSjYf61RLkc3VEesOwkBBh11\r\ncaYzR2tAodvUwKeULPWsw0FjKei3oMsE3sk=\r\n=Vjg4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b4ac5ff59e90b4770de9f689d9b09381fe2cacd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/rtl":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/shape":"15.0.0-canary.f807e793f.0","@material/theme":"15.0.0-canary.f807e793f.0","@material/button":"15.0.0-canary.f807e793f.0","@material/ripple":"15.0.0-canary.f807e793f.0","@material/tokens":"15.0.0-canary.f807e793f.0","@material/elevation":"15.0.0-canary.f807e793f.0","@material/typography":"15.0.0-canary.f807e793f.0","@material/feature-targeting":"15.0.0-canary.f807e793f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f807e793f.0_1653085383018_0.48351769095632235","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/banner","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.9f53d4a8a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"11c9f84c1cbbb35a9b3695f2d96496a29dae564c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":31,"integrity":"sha512-EUM2Q0I7yCkM7HkmfYlr6+tIHZAsQfOs92CZ39GT2G2B13hbOIoJXDfAvGtS1eEzsEzZP2KAfxjfv2GMQ4N4VQ==","signatures":[{"sig":"MEYCIQCJMvJSg/AwlUhzjzJ/BDnEn9ry5N/IAqGTdRA3TG4SRAIhAPUHQkDdSBHfejfgCU5zSyEOxqHRkD2CbE3YI2uFHYyw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6E4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrPZQ/+Iar+5BMYLaX22yI3chquk0IAk40xaV/2ffQMO3szuNMD9DnW\r\nicHTV7IKpHG70BUk6iHKUa8G0oBeasllHsYTnAtCvye0sfc8av2XR+1h0PYS\r\nKf6iNF9GGoEOvquoBJ+tXVBwzHVqMTquoAiWM7lIPkpLzAq0AN9G17TaNfCs\r\nAxpzd/DmHFvi8Rq224mtBtKvY8BkbyAoRTame81PZD3GfEDjbKLvGwZBEK7k\r\nf3myqv673V7akZw/emgAfDVkvP+eKxujtptPhNwLjnfocnTb7PFhZTWgmPKp\r\n5DQBwDdPrH3bpKinexn7s3qhEjzNvHSAqe82IAHpUDWCaoBmfLVGmQljCl6I\r\nM7Uj6BoKeeP+o3IGpdc4RSMnZJJipeWeCznCZmRZ/tLwFm7d4tL03/sUgE3o\r\n0lAqZnShqEsYkiT+/Nr1IVCnw/b6j5P7VvUwNyOzyYPCAxQIhsEf4blzbaF9\r\no8+7EhIYwZFbzrts6Wch91zWokDjpzd5iK01QBgrJLYNwcHH/o5at4QsZ9/W\r\npePByj9xIwCzLNa+YPfZvVWyxzyBo5UNcPoRhTZH0wc2uPXflHdFM84jjznJ\r\no/EPbUDPlZ7mEwrE84mwXODAKHybe1uFFWOxRZWPyoHBl2m9nceLjlZZ30Wu\r\nEwpy9A2PtrUmeGGzyYDDUifFwhM51lwW8nY=\r\n=4q9D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5db1bd7747bde68bc956d054f2e939e62c78df6e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/rtl":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/shape":"15.0.0-canary.9f53d4a8a.0","@material/theme":"15.0.0-canary.9f53d4a8a.0","@material/button":"15.0.0-canary.9f53d4a8a.0","@material/ripple":"15.0.0-canary.9f53d4a8a.0","@material/tokens":"15.0.0-canary.9f53d4a8a.0","@material/elevation":"15.0.0-canary.9f53d4a8a.0","@material/typography":"15.0.0-canary.9f53d4a8a.0","@material/feature-targeting":"15.0.0-canary.9f53d4a8a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.9f53d4a8a.0_1653317944002_0.31327193120174424","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/banner","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.77cf00e37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"822b4b16f7f7a7cef486fed108af4c5ebf154717","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.77cf00e37.0.tgz","fileCount":31,"integrity":"sha512-aDoNYIZqSd7k4t33Y5x4VX24idFfahd0jx+8rRJKD6LNS/DQ22Oe9jA61r120q2yIymYo4Wkyz91YbqMPlWO0g==","signatures":[{"sig":"MEUCIFybSJQyJMZGrjSiFvAhj251NeQ705PCdILGfD2UduGNAiEA7TPtAKV1kzJXkTD8Idw1BsU4KqgOJR+9HOoAUa4F2IM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillNGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrabw/8DsriztKX9Hzc/xCarB+NZWAMf12PlEROZA7Mao9xDrhDqqjS\r\nij70kBqnIc9J2PWVYD5HppFX0ZfmQLyjbL49ZlYXTDIMmCZ0027N30Zn60Xj\r\nawoXLt3+lPu2PF1xAFER9B3ATq5YeAEDU4lUKxuIioctWDtEJvBlUHw414YR\r\nMXmbO59SM/KAMgScoaOtcff+chMtTNQf+yk6d+3mVwpUdRW1DkRQRYvvRwOH\r\n1GX+dgZ/srmbOVFvQAaeGGDynjwlq5shb7qV5aYmFCSwra/Ak96ofbAJkbS+\r\nbCwQk6cQQBENtilwfykd4xr842leTDBHJFqOLDUQgp20b3FFvj9nEJwZ+bur\r\naUyiV9kYvKRQjEDnVJbyuFTT358OWelValBDQd03WTiLAX5OuO0Bdakw+o0s\r\nhrek6zEKXxN0Pw1kl0Zi9hOmoeCBldC5dqj0veuboiuRcqEFA1zK6Gz0WPHQ\r\ny99d7Hq+hYwjvJqrJWNI8Hi1rntUglNyOQpGrfPL8KTFhQv9L1bKk7jm+YOS\r\nfW1UNomEqB/ZSiBbjzin7Dojo2Q1C/bCPebbRAwHxRcwFvwov0qfwty7MgfO\r\nSuohmVDk5d342aHIayGv2GNKTqjeUsUoDiMV9i1zmqzquefQmO/7+fSLJQkR\r\n8xQl55tz4N0zgBZXFT+JLUfDhHlS+UCc/Ok=\r\n=Nsuw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1a68e64a5e78b8bdc529142c18c028aaf1b15b9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/rtl":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/shape":"15.0.0-canary.77cf00e37.0","@material/theme":"15.0.0-canary.77cf00e37.0","@material/button":"15.0.0-canary.77cf00e37.0","@material/ripple":"15.0.0-canary.77cf00e37.0","@material/tokens":"15.0.0-canary.77cf00e37.0","@material/elevation":"15.0.0-canary.77cf00e37.0","@material/typography":"15.0.0-canary.77cf00e37.0","@material/feature-targeting":"15.0.0-canary.77cf00e37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.77cf00e37.0_1654018885979_0.9172781908373848","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/banner","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3c7b844c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fe230f05857cc316dc6e8c83145ebb32eb239fc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3c7b844c2.0.tgz","fileCount":31,"integrity":"sha512-99qbAwOjjkgY+sOeHh0AEXL9OLPChlUpwteI8PtcvvU1dRAc1ihLof8DjB6eje+eW5fqfvfJhN6BU3bYqjLg0Q==","signatures":[{"sig":"MEQCIFi9KhPCZt/OG6C/fJydxMXAwPc9TeDh/eAZ7Wh8oERTAiAG3tsFge03XOeVhUsLwctQ20/E7E9AgqxYuOlHgfdYJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz5w/8C+WLqklQEymE1Bx6YV86daC80GT+sSCdR9g1+ShpGBLAGSGh\r\nAWV0P8LiQx63k7PZ/qR4iXfgO+XbELhIS8mLBu+AQUqTfyjPnUsfhvqF2GbJ\r\nBHZfKf2kLchdtwz7JY1swIKQypo9CiS/dOxRAvrg4US5xKYWAMg6N/4wYxPz\r\n1P6zHBqomsCV1CrE7rh6NlVOXVmrjYGPbEPqBTe/42TYF4iJaTalFCHHhX79\r\nGAxKTu8bakgduzHEVvMm1soUYNETn3O8iLyF2SBAgpFeoaV9JJoCuNUxTHUW\r\n8Z0NSSZp/ytAIH4PnY350bw6/gYT943yG0bDO0mwQPsn4vdECHiitghXxCwa\r\nNOXYxfa2GzhgVhwuDIAiNQKQwZilxUrw/3kdnTjt7gAMGtpqZMhVWP75Gz0Y\r\nLQKKT93Par5N8SOd/+N7zokYeYT5BYXAYWAldvhh04oPFyLV3LHBRiHYBT/e\r\n5Hsz8z5rMYZhAbfLdir5XlBjWqrVV1I4usGarV9QAAvRnJZiE1Bzz7TkmHKl\r\nwYlWeckuiOBUJv5BR2l60mQyl4h154abhFcn+mDuCcuQGHIhJ41Leb0Hx+tz\r\nwUXEBY0zOS/Q7Me7wetNB5fBlvYVZ6hDKczH19u810/ZNAoY+0EJHBoFjnbe\r\nNcSdFzUcIrLm+1wLSgo+X80Q0UAwq7QviPU=\r\n=93Je\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e9422b2e6573001fae4c8aeb7cc75741000e0034","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/rtl":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/shape":"15.0.0-canary.3c7b844c2.0","@material/theme":"15.0.0-canary.3c7b844c2.0","@material/button":"15.0.0-canary.3c7b844c2.0","@material/ripple":"15.0.0-canary.3c7b844c2.0","@material/tokens":"15.0.0-canary.3c7b844c2.0","@material/elevation":"15.0.0-canary.3c7b844c2.0","@material/typography":"15.0.0-canary.3c7b844c2.0","@material/feature-targeting":"15.0.0-canary.3c7b844c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3c7b844c2.0_1654640558443_0.5255240967320172","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/banner","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.df47894db.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b0176b15b163882f503bc77b70f98df2229999c8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.df47894db.0.tgz","fileCount":31,"integrity":"sha512-5vZJOBodicHFCZLu+UIK0XaTgy/3WZvyS1h5U/ku0+WCNKwxObufFS/Q6QK7HShE5hmW9MnwhWE/LukFN3445w==","signatures":[{"sig":"MEYCIQD5ugqbmGY1vVbY3QR280XtGDEoZDYc20BUCGKzyhuJaAIhALz+4EYw3rgr4KWj63y/Igk34qn8le0TMj1ebw22kTFF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrhAxAApCrIJ9twV09/2/iwrTCHHqUTqXXdpT47BXz+fHUHi/8YHZwC\r\nHtlnuiMLblRTfwT9bbgMyODbwhspsRxD9OYvGZnhONmm6KPViGX1gmQFH/92\r\nqwTaQEiuNGOQ9UdIJPGgk/nb2oCwzdEnyPnC2sJDRNlKtHgqmtXIr/sIDkJ3\r\n2P3YTMp+rWtQuynA5fyY3K/JbIKzIgWsrQ+ieJgabPVV3KlNMcb9PVQeuazU\r\nNXNGtE3rGsJq8eR1zmfoiel1DM3jcY8K9cLfD0kiJ46sluNGGRaWYrzgOuXj\r\nZt2AvECKImxZTYAeAvSkXvwkdpDgFMvv6UQc0xtwLh4bdp2w69Z3cN7oIgum\r\nflZvRDIhF7BO2ReiIltJV/29WgjxfDzZq9eTPmzUX3QigUvsZt0+uUf1/Qgx\r\n7z9k0oPPE8Iul3HPsIaUERgc89MuUvl+wPyJhzdyO4oLkf38pZgswQZ70Y0P\r\nJhFXsy/Bv8pd1gCaJr911NEa/7bXNyjnV5b6q6OnveVRVkfzLU7uFY0KgEbl\r\nvp+waQs/lO1PQkcinIF/ctwwtNEDGutg5q6fPdsDDKiLSZnCrOlFGW9E8c5U\r\nwqYUMNDssM+6LcMvt5AqUJqElJBUIQqyeE97MsrEyp27TDYz9FPUVTcKERLG\r\n2vvhmbGuumCmFzoBYgUPILEmYtafY/Rs2eo=\r\n=qmp1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"42be62e51a7c150444c5b32b2d2acee03d09e6f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/rtl":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/shape":"15.0.0-canary.df47894db.0","@material/theme":"15.0.0-canary.df47894db.0","@material/button":"15.0.0-canary.df47894db.0","@material/ripple":"15.0.0-canary.df47894db.0","@material/tokens":"15.0.0-canary.df47894db.0","@material/elevation":"15.0.0-canary.df47894db.0","@material/typography":"15.0.0-canary.df47894db.0","@material/feature-targeting":"15.0.0-canary.df47894db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.df47894db.0_1655140196428_0.46428139549581804","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/banner","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b18a873dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58077f5acdab8cdd3057c4b05c1047eddf5e7712","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b18a873dc.0.tgz","fileCount":31,"integrity":"sha512-oZL3D3qTkM+QRlnftJd6WZazjSTFdkAh64wEnaQrrqoZzciIZe4TMCtx+kUNN/TUU6PatGlP34SxZ4iiOtHs+A==","signatures":[{"sig":"MEUCIG2KlU8qybawu9TwL3qKRIyXaMC0exi1rhqbjezdyKoRAiEAtSl6x62kzdkr228s4IBaF+BI6tKHEz97y52I1NGQLkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcsQ/9GEThQzMispTruD46TDl8VkbpaVYUjvucbUrZI/Ct9Fgyw6Bx\r\n10sO89mp8NYTDQPpvONls3uHSLVw149NA7HVude93epBP0y6OxullEk0PHDe\r\nn0nPwsVHktPkkHlhIe4I6+uy8Lb2Mw1Axvna4E8Jg6/iEae0E0JSSAunXnsz\r\nfSJjZoSms4E/hpylCv3WLM8uvB4eay/a1GC+iFafC+JHKzEvHHKOhMMAV6Fr\r\n91s2N6c0dxbKedt52NEskK21Feo8DqkTEQ6inBIz2CX8I2fYES0lEpu9q7YP\r\nnTp2MG+LW9vMCesBs2aZD+v+nL66bqw+//T+K8h8RtMUOMjRYaSiQHGDLydG\r\nZ86LxuxU9cc2WBZ5+E5Wr9+l3eVx5OlrrPIfBgy1ZbZIdjoR/wlLdqT9OwiF\r\nbTIRxyFhdx1YJd6mA3qqn1DmE2XcDTIVtAv8WlyoaP1d0zyZyyVEq0FJYSui\r\nyrkwJgCZKnyhMeeDgc5rvt9PiZH1uC+vGXDLYsRu9DA1u8Hlv/oZutOGStPH\r\nh31x6Jl3mmC9bq5ecEpPsfwCh0vFi9uzObcIPUqex+fOtdGYwshWh4MmI6x3\r\nZSmyOOhs9umiKfow6lg6DUbQXCWIX/fNVdAhEpIuG3e3rjZcueZ+uXfPkkzZ\r\npjzbmAnsQgCtbLkkBFBhcE+fu76oRcVAmBY=\r\n=u3Pg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b35dadfc99a3788643d8762f8afda3f2d6e76d5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/rtl":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/shape":"15.0.0-canary.b18a873dc.0","@material/theme":"15.0.0-canary.b18a873dc.0","@material/button":"15.0.0-canary.b18a873dc.0","@material/ripple":"15.0.0-canary.b18a873dc.0","@material/tokens":"15.0.0-canary.b18a873dc.0","@material/elevation":"15.0.0-canary.b18a873dc.0","@material/typography":"15.0.0-canary.b18a873dc.0","@material/feature-targeting":"15.0.0-canary.b18a873dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b18a873dc.0_1655188264720_0.7108855906203295","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/banner","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ba9c29637.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c7b27e03365efa56f7fd261fa36986c3a7137ea","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ba9c29637.0.tgz","fileCount":31,"integrity":"sha512-DhE08whHfGakgvRTbimBcx0isd2s15lGDr9o3lEl8xFy7rTrSgLkUXF8lAJiVeSmqoNQT0DBFK7swieVDsne7g==","signatures":[{"sig":"MEUCIFsqSlqe0Vo1Dvw2IcMY+4d91/UghaJjAxO2UjZ7PND3AiEA/EXxYCXykTOcyqV4fE+jJhFwW+1Ipm1cV/A+pYZAbQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNpaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptCg/+JbmikIxqRNvOwDkMl4KFzdo0Ml6cxk7PQz0V/NqG8fQ+2U+1\r\n0Vm3R+dpzej8L0Jdx2mxhKk/Xwt15DK0AFX8BjN2yVtRzYcHjM1LvyIAnr0T\r\nAZBJdtXMEyZ7dCukdoieN30ISGKCdr32WExiECEstG3iEOlNtxBP8Q+aS5hM\r\ntkcvrppnewe8t9uVCtGqf5HBaXDb2HKywf+gqvnEMbsXWyJseoqGoypiR60o\r\nk7HfDlzTlRxm8QRhgIwHUi4k7zht+UbW0aFMYC4LszGUM1AmpKg466AXav3e\r\nJ8z3zGmb/sGCElacGTNh1k6bwmrhhXLcIPuWOdPUe6UK40+IjJ7lh+6Y9t8O\r\nekVvxObBlZpFsi+z1+qlFT7c0egA8TziriuWJqsLFbboTRR8AueaL1jsq28a\r\nDz/zMLR6hHtH0LZYo/wIvsIQIpoki+M5impKcfemtYhg+8MsDL54m2ScYWUK\r\nJLjm0yV8Bguw9soAK78Z0E/zyIR+mjEQQVhbClAZu0ajGoJ5OHkj/t7jJNxU\r\nqZXt9tQPg/demSYKGZNVcAwQ/zaNsCjwuYALaKoryOFkkRYfgNTj9ALon9fM\r\ncJF1EGFB4Cs6OBVEpQDfNryKuS35RdL9gVwpzgAw09QTHtGCo4lQvp/sPkX6\r\ndUDkkunP/BC53lUlhWHNkBUudJYoXQtNb50=\r\n=+Fwn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2bf89a291dc4aecd82cf7a6432d198374cfea69f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/rtl":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/shape":"15.0.0-canary.ba9c29637.0","@material/theme":"15.0.0-canary.ba9c29637.0","@material/button":"15.0.0-canary.ba9c29637.0","@material/ripple":"15.0.0-canary.ba9c29637.0","@material/tokens":"15.0.0-canary.ba9c29637.0","@material/elevation":"15.0.0-canary.ba9c29637.0","@material/typography":"15.0.0-canary.ba9c29637.0","@material/feature-targeting":"15.0.0-canary.ba9c29637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ba9c29637.0_1655233113909_0.3996623469002061","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/banner","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.9bfd12f01.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1e87a1a5dca9290cb2799bf4acc0eebd32446822","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.9bfd12f01.0.tgz","fileCount":31,"integrity":"sha512-TntsiUbj6hUIDyfR/G1075fmh7k4QNBYIy0EPzyDJhMroh9wtzb62FXgxvhHoG8NCNezk+1EVbySVDL3ptjmYw==","signatures":[{"sig":"MEQCIA3suDOgDn3FpQYWa1PJzocTVnxl9K80LM3ZMIpbPdWgAiAD31CsK3P+Csud9EVaHnLiRtTOt2BOYUNyCbADHZPTRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2xBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGAw//RXNWRwIEA0R/o2k5kZvbUpa6oxmyo6+9n3LFCNPD4KdGt6Hg\r\nXFNlmBtrb1iHgQ99rdffc7piCofa9hJxBqX+Wrrdi0+nkigaMV6Dz0+KBs0F\r\nhSchA5/A3z0xo8rThhYnX6HTwIKZSBxoR0ESq5dDwr2lqMkawoZZEr7ItdbO\r\nxSYjN8EB5pneWV4Pv1TNStAoyER5bLx/ZVHqUxjj/1t9g67r8J8YkF7pNCy6\r\nNhED+LuxprhimhVYw9Hb5jKsc4IQA/4+VAE0SAYcG2m3rdnv8BtyV4hBBSFN\r\nV0NaNAF5ZBzIKhgDUVYul7lxEqc3U0dqFSXRscs44iVh20mUYh+ueBPkaDr+\r\nY+F/0bgif/ZhkxPnMt1IwHQR1UuAuM/aCXpgi22ba3BkHT3JGJKuaKzdBSxK\r\nRG8EfHGQ4rcp7aESe4dNM2Vrr6ySkIYtRSKmPyx4HXIwUZS67fxDW7tggNbM\r\naRyzf08yr8KS8ODEdpZT31tVBAmxikBkQgmd2pWsSm4zaMKrvOXfbrVtzT1T\r\neC3vOUpQYBhTr8BoEQYAaXdPzF4d8xJ88kFLhb2GXhqnZoY3exshGEvvy7iy\r\n8uvj7ycSk70Q6xm9L4mGSHzqv/X5jyS32T3bJOKzhvH1o+3wB2U6cmvEknOG\r\n2OtytQCEc0qw+wWahJkppapqZfFTFe3siDg=\r\n=5A3c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ba7b0d01530df70f39142820ab69babfc9cf5b8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/rtl":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/shape":"15.0.0-canary.9bfd12f01.0","@material/theme":"15.0.0-canary.9bfd12f01.0","@material/button":"15.0.0-canary.9bfd12f01.0","@material/ripple":"15.0.0-canary.9bfd12f01.0","@material/tokens":"15.0.0-canary.9bfd12f01.0","@material/elevation":"15.0.0-canary.9bfd12f01.0","@material/typography":"15.0.0-canary.9bfd12f01.0","@material/feature-targeting":"15.0.0-canary.9bfd12f01.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.9bfd12f01.0_1655925825023_0.6154394069086984","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/banner","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.764de225d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8b5896412e175854d2326eb9f33b4874986a554","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.764de225d.0.tgz","fileCount":31,"integrity":"sha512-1uS4+GNkJNoIrUPsN6W3LU+Nf/KkuMrsmLCALcY+8XfXbKmnzcChioEMiC536ZIuHe3Kkl7vnVD/69iF+nTm1Q==","signatures":[{"sig":"MEYCIQDs58vx8T6xhVe4Vj0VHKb505XyYBOowTJHl3vaXlVMJgIhAO6E9WjkK/LHuXSoPqryzNeCVJ1m4/WicPkQr8NXrimE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr6AQ/+JXuG+E3DIQ9mVQhO9EsajIbENXLZv5v39KEmZEmxogCIZSKF\r\nKN7FLlnq4t3JLjwOxSN/odaNBNTpJ0oLJMJFh3tZV+p69BEFXl20yRrQabDn\r\nuf8DQlUXAYZJBodYh98CgwLhiEqjDHDyO48r9O2vrXdlJ1EarJqu3BRrrXjV\r\nO+8FxyO9CSWy5nAzPhBHqWOKA1LHFFeRO+mReQnGwS8EQ6395kUFX8eBSPRQ\r\n65sydYlu/7Ea+9O4kpSb44YuTwic6tN5ghQcNVYTmHBe9A5S8l1Q0Fq5Wdnb\r\noC45RHizNg/N/XiKT3pL07wb41l4wKrDFxeJtRg8Iwl7aKjTy5bNKgMqCUmV\r\nwnyJKeRbnA4s2GMF7XiQ92CgtShdPd3R9B3QlJtNBMCvkno1jZCAP1zxXj3X\r\n5983noJxW1WxMh9BFd65MEmvCG8pAu5jgf2JulpohZmVofFX0jHFjTOvk13Q\r\nplKu4rMo0vxBkkasRCohJItJzPUOvzIjqwAdyU3ti4sLU7rUxtURddxt3Wsg\r\nxkgpinDhl7NadIoxqic/IeMmW8dt76IVMGRcYwTAqRPMhHjZ+FdqQDosTjeX\r\n7Q7xn7nC+jTrcfa3CkV0cU4kgWGMl47H0YbvjyDvbzNeTpyyRE5SAyzgmXa4\r\n8089Jh8W958zA9O8OyJuTbnWdM7irLkL9eM=\r\n=P+xA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"25c0f0a7c9d8dcedfb35f64d0851fc4fb86b8534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/rtl":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/shape":"15.0.0-canary.764de225d.0","@material/theme":"15.0.0-canary.764de225d.0","@material/button":"15.0.0-canary.764de225d.0","@material/ripple":"15.0.0-canary.764de225d.0","@material/tokens":"15.0.0-canary.764de225d.0","@material/elevation":"15.0.0-canary.764de225d.0","@material/typography":"15.0.0-canary.764de225d.0","@material/feature-targeting":"15.0.0-canary.764de225d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.764de225d.0_1656520094887_0.8746991105981226","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/banner","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.31e517cea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40b0ac246a459e9cd292af6a88aafed835571736","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.31e517cea.0.tgz","fileCount":31,"integrity":"sha512-b/3utxANEyX1Ekzu8l1t42dNrKNoNf3XaF21PPCNWm8C12122x5Wsc1+8G08TlsLcIoqROht47Mz7uHisrWmMA==","signatures":[{"sig":"MEYCIQCNezK9z9Q51SPuqRFmx1+a1eyvzRHKo9MQRyhWpHdPKwIhAOdJR3FDzHg8LVoKMts7/3GoJJjsbiMZV6nvefIrlMc5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkYQ//eHDBZw68Mu2YG1Z+rmMVctoK9Okihy5hRSpBGVpyjZmFPs2q\r\n0dEKPRQQmwuxtb3309NbgGURd1zrQZK8xOP+dAF/VlR+yVb+2wEgk9Y3fd+l\r\ngU21wdrUpTNIT/aDCZE19SDKbixuz2QmnsuKf3bKuWuWus5EOXgg/QAQ8xQB\r\nNG7P8iJ+uAc+LYnYB65C8KXPz1YuNyNIB1t3InESq9+96y4IGCLtWTTeQlNz\r\nroI4bLXJJ6MJDx5lDQZhcGDLIF20hQCj+SHPenWVbBH7cfceX0dUWY6RazSF\r\nWgA5mSm1utwRSeD1qfzQLpP5gAzLjsrfMpGoSwFqskHCBw9iGcWOuvjT/Y30\r\nWL5/XskyQEFWN20foQaLEVmR9qol5vDTZo40Dc7cO0xshM9iBscG3UfbCJ5S\r\nRmPJOOJcbTVPoNEGjJqq+RVJepYCReK6y8n/jKhKvujAoodLxnTvATS4Luym\r\nVoMfkaCyN8h98dQkPVR+ouW3vfe1iZ/dFSKRNwCB3/JjHVsh9YT1YGKCOqvD\r\nHs3sfJJiB8g+cPyz/YB1x7aPmWoO9VdKdYnuU5o1iDAeulbJGhtPPq6194YD\r\nNLm6ZyK+Hqexkijxopi205he0k8Xg8v35ZMdJ9tTYB08RSh2oLw3k+XLG/lA\r\nF8ZKdrI8IhrLIbsO14t9n0jnNbwkONP87xA=\r\n=Uzlb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8af6d916fdf79ba9e33a883ad56f539f3decd5a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/rtl":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/shape":"15.0.0-canary.31e517cea.0","@material/theme":"15.0.0-canary.31e517cea.0","@material/button":"15.0.0-canary.31e517cea.0","@material/ripple":"15.0.0-canary.31e517cea.0","@material/tokens":"15.0.0-canary.31e517cea.0","@material/elevation":"15.0.0-canary.31e517cea.0","@material/typography":"15.0.0-canary.31e517cea.0","@material/feature-targeting":"15.0.0-canary.31e517cea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.31e517cea.0_1656700173946_0.3571494667889996","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/banner","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.9ea4e8e9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ffd8d524d90edec11aae553451ed05e8d53a0fc5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":31,"integrity":"sha512-3lcEaPPHcCNugZ9VsuKWAVYuFeJxmVre2FuJErQesHMxD2dOeWbTlm1nMxaBFJxhrEaXdIsV53apWoHgf/q5Rg==","signatures":[{"sig":"MEUCIHgsyyjOIiTKOWWG8X9wog6DDzBo99Csi3hyTy5ZuahtAiEA9ARUKizrC9MZy7oui4owjgXEJRMP5WQmpMid/TeCAyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3uPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwRRAAiRd4YcpNr1k67bHvfbNG7aMRZ70/ItQ/f4TPmD1f6nGsghQK\r\nEyQKEg0GeFuF8etZcAc+13hjqwoPI2bgu2D1boaR4H2FYB3UjVi23CcRdpsH\r\ni7Ft4V3//Rf6XG8pe6m20+nFrBdlgghxDzlV5z4cJ1rYNa5zY30ZzrHNM5HS\r\ndrU1YIUSYk91l6JqldBM2icieuIUc22FN2/XixTv41nLDEWg9A6Ab0I8kFNP\r\nd/cAFiIoI/Z2jIchyX4je/0qVpmnvZIncohc202Tfz96UnThHN4R53XAUKo+\r\n7dtW6g/xvigqk9ieBGLl1R4+I5n04EjjkwRWRgNYwJNs0pMq9mHi97Y395BC\r\nuoxGHvfg3w5uJd6VNa8F/PBgBsDzRiO7I8sQQOoQm20KjjW2gTG0qN8WJZtz\r\nzjDSTaF5VGmzv9UE/3/FIgGkbscGxJbOfd7zR3glXnaUx1qf9+2Km20WBqQr\r\nlvOXKvI453isZY2ZfecjGugpJFVvyEe62SLU+bpUwLkAGFUGb93qCeQw7vrs\r\nou3hNkFFeeA2m8b33m6CV/lBq5ooa6V4plucJ53nbonedb+cQHgB5v6YNh8Z\r\n/V0Nc2Sh38mmVhtxVHBkM7iZCAsZdMUg/p5TzoW5E9MbavZbVs4QJoNCHpLw\r\niteHoRb1OwCqqbRI71tOe9fynCKDvdlKb2k=\r\n=jtMk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7a2b791f6f1e376a53ceef81767514ec18174558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/rtl":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/shape":"15.0.0-canary.9ea4e8e9c.0","@material/theme":"15.0.0-canary.9ea4e8e9c.0","@material/button":"15.0.0-canary.9ea4e8e9c.0","@material/ripple":"15.0.0-canary.9ea4e8e9c.0","@material/tokens":"15.0.0-canary.9ea4e8e9c.0","@material/elevation":"15.0.0-canary.9ea4e8e9c.0","@material/typography":"15.0.0-canary.9ea4e8e9c.0","@material/feature-targeting":"15.0.0-canary.9ea4e8e9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.9ea4e8e9c.0_1656716174716_0.5043468501919353","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/banner","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cd5bafabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f904f915846da3f63df88cad2819b50968bf7a2c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cd5bafabb.0.tgz","fileCount":31,"integrity":"sha512-dJdhzEhzHP15rRoYRuv8Fwyi4TUHV1cj2ymm7Ipo/OZVU8VY8bGcCOHaFSvRMOwaksZsyA01/UCYQH2lCDBjiQ==","signatures":[{"sig":"MEUCIF2T5/ZSnYFnx364W6SLl4KfrGvivG799sz4O7bCbZpUAiEArKMEFKdq1PJJmqqhDI9kZYDkFbiRMMmy4Ly+hNm67ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfHg//cv10sXL6CvCdSIlxsHsLwwJwWu7fFbQkno0Enl6uQFbG5NMX\r\nkCzs3uGfOPN7uLN+LJnC5N9JNKhFtOh8/DYqBlNc67yiHEg8asGKNLAxyDG9\r\nWRqTRLGWrJZKDATtA82szToIEcAOHSAqPESsCgZH4LUo0SAI6haqLMKZ7voE\r\n8OuOys5BbTpvmxgHIFCJYeOxDyEiaZXuXMsxw3umcmJqsrVZXw7KsKvoSGYz\r\nxmGDY9NvA4EO7OdJbFJ5f46Jhi6iR5ZfkD00XIwTQSwtkKsfQObbBEaXHBH2\r\n7khD1Wah+3J0vrs/lYX1tLjL84dl66dwtzwNyRuTO+9JEkWLAWBtItGkjm9r\r\nczfr/BSKwJDEC6Ry8fWJQO3wcmeRKCic4zBI8tyL7JCuLgWBzlKc9mRvlzca\r\nCGdspnPZjVWMBi9oHPPe8V5tBq3PBfyEqLCtTXBtqHojQqIBJm+01tH9hZPg\r\nVViUJtJ65Okp96lJLc/xLLgPzWWSFwSBKgqyhqmZ0k25LN+tY6gR2jJzA+Tm\r\nZDjTuU2idXh/liWqWdOza1ixOWE/J7p5GIfEKmNyvFFEAiO6YMSYHnxZnr1H\r\nAwdkCzHJrcdJpL29ayMcU1x+RUdYMCtk7SNXuGe7h2x3o582pl71iSy0zYlW\r\nNXy+szIvXJtZIgIREG/FCYfqi/CRwAWS86c=\r\n=LVtk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fceb62aaa361c04ae0a30158d529c7e6896b6f9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/rtl":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/shape":"15.0.0-canary.cd5bafabb.0","@material/theme":"15.0.0-canary.cd5bafabb.0","@material/button":"15.0.0-canary.cd5bafabb.0","@material/ripple":"15.0.0-canary.cd5bafabb.0","@material/tokens":"15.0.0-canary.cd5bafabb.0","@material/elevation":"15.0.0-canary.cd5bafabb.0","@material/typography":"15.0.0-canary.cd5bafabb.0","@material/feature-targeting":"15.0.0-canary.cd5bafabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cd5bafabb.0_1657130147437_0.6277206125724528","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/banner","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a02fe49d3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a8acf4d56fa07203677a2d8558ae7acb1ecf8003","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a02fe49d3.0.tgz","fileCount":31,"integrity":"sha512-7Q8PX4k9COKqZ9g8bGFWOQI6ufHlsMD7G2HzTJ4bukkOfrIVXc1YYCmnP+6Llj+SqUSfFdBPe60oTVQt953yGQ==","signatures":[{"sig":"MEUCIQDhIi7m+vNNcT9E+dIsAEwPE0sRlxtD9jjeyuH/ktFRyQIgdqa3SmBtW7CisXyhWXf1EzgVvjMeQHG5U92KDyzhlCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofuQ//elj5u4/ol9LXAIffdeg3IsvX7RH46npTNkuyfmZS5wj4e8Dl\r\nWSYOpqSAcDiqbP1JUQ8zZ890ee7cYl5f15pmSyNwqJSvpXvZ94bVGt7ahrZk\r\n8BRL+imFLp4uovSHD/kuxjZCkFszcVoykgBlVTRm4VjiYBW1W4eXafInqrYd\r\nj9pLrQ5A6ItzpRVx3RzfbmByL00SlfIU0Wvv+syTV1MgY+CpsFC+z1DelJKM\r\n7PlE4j3ZTQzSfZNzg20Q+sbVYmnUWdYG8AF9sYf+Az+BO613kb+4y/FdrsDs\r\n3GLl3adoNOqdT3QKbmZCLQgUv/DXDsDs+pFw3b7MHMVg0FJIEfTQG48kel6i\r\nSQVvdLfZQS8ddicxxXtfEq5V3S38hlPuRlIJY0nrCG/oKEvinW/pR20ooLd2\r\nZ8zkALJBDJhKHL7W0JsrD2XRmLMcNuSDOazsp4fXUQo5bbfeoEi3HVvoerOS\r\nLFXyG1UJ1Q/ga1i4YGYvq2LOT+Ofnl7kbGQZWrLSIHvmByAYZy6Nt7ZigZFB\r\n3+MHcY+XDMBGVTDIYy9M8bmMXKLgdoXvlcY2h3BqNmZzC/c+RJqIsbZSYQJb\r\nHY2knmMecLv/0EzARKxRV4kzVu7Yk6YgKvI4OduacYh6AlFttLbeW/9Q+p5/\r\nF0wkGiL4ovR3iYyZsTlzq2zMtQgEXqU05wk=\r\n=dh8h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8304e794f430681d03b9d2d3193e635a072f2d8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/rtl":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/shape":"15.0.0-canary.a02fe49d3.0","@material/theme":"15.0.0-canary.a02fe49d3.0","@material/button":"15.0.0-canary.a02fe49d3.0","@material/ripple":"15.0.0-canary.a02fe49d3.0","@material/tokens":"15.0.0-canary.a02fe49d3.0","@material/elevation":"15.0.0-canary.a02fe49d3.0","@material/typography":"15.0.0-canary.a02fe49d3.0","@material/feature-targeting":"15.0.0-canary.a02fe49d3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a02fe49d3.0_1657133540911_0.09691912683072168","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/banner","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.826a3d8be.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"679c0a98b11b1a8938e000de58ce2fa7bbe7ee67","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.826a3d8be.0.tgz","fileCount":31,"integrity":"sha512-S72EL1OmHaGdcc/DnzWXi9WLnczpj9p/Sn/syNh0cEbrFn2Yc/avLNxvgKqXFOuvsTHazpJLuVehRhC6d/qu+g==","signatures":[{"sig":"MEYCIQDKRj8G9iTKpfZRlsB7Hy29X1wdiAJP7I1SRMsDA/+QxgIhAO9cVN984S5ziTCwKGyaZrtlTEYsuDAAOocE/2lDlwtX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeM9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXFw/8DTXmWqo1wLLF2MAtR0IIXnXuPxGW0RlakbvcKyPMOOfUoXng\r\nPcnSoPkNW0tNHCjDtudVcXbImXJPRPnp3whXIsIn3/1ZQsxsHcz7gvqmgdPQ\r\nCToxq57dVUOt8F/jbNQ5QiqmYtTL2FvQ0UD3NhxQxQE8DDbfdK38oJFH/yhX\r\n3NIY3ZqnQhWcc0n8rOk+LIlcHBBiBvPLUZrV7WiQrdd8H88By4fZkB2NOlzw\r\nRMQK5R5y3MqPox5EhQ1OqH7maQt5xhUZGwq5h1/rVgWq8vgaxYOfIAplrjdh\r\nu6umhOOmnbpZgexwdlAelLJxvTVtll15GJaX5dsCc1ZXM/j0ZSJDJ4GLSaEZ\r\nmLBWCAE3BZ6rbS5MthVUNSr9deagV9WPlnTQbEeo4KEjkcyEru10Jscdb9x9\r\n7aqspnHau672QUmWasLpZHxQf5aIaXGxGfmuKiiPKJnqsKQS4wowmXl+f0m7\r\njNrJs57z+OFbpJWBD97XbDD9RjAQY9+AVRqBJXnQ6TXRDKrY+n/fRSWzAWnC\r\nZ05Ylm4EjMzMffUVJQ9cMowiGy6S0maDGEXqYU8OEbR1wBxoBZUFlW926/8u\r\nnkCE9F+g8ZoB9cKQz/yuKbSzEokcH2xD6s7WcRoQPCOpSBUypLkUWSFvagjk\r\nbYDLl2IWOyBzSEcxt+fVVp3s8HQTjKRSxLM=\r\n=S821\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f54c723431e97d10fc1886f271ed251cb10209ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/rtl":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/shape":"15.0.0-canary.826a3d8be.0","@material/theme":"15.0.0-canary.826a3d8be.0","@material/button":"15.0.0-canary.826a3d8be.0","@material/ripple":"15.0.0-canary.826a3d8be.0","@material/tokens":"15.0.0-canary.826a3d8be.0","@material/elevation":"15.0.0-canary.826a3d8be.0","@material/typography":"15.0.0-canary.826a3d8be.0","@material/feature-targeting":"15.0.0-canary.826a3d8be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.826a3d8be.0_1657135932831_0.4102447742842543","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/banner","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ef276aa93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10540e689bca6799ab5e4f621a7e948c3eabe631","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ef276aa93.0.tgz","fileCount":31,"integrity":"sha512-U4/R7Pfy/KxWTw3ZkNNNuF5ckfDEA4vnfqNriWrpeB1V3cibzR5T9QTFPPhxg1ynZSSC3BGc3P8YaXw5MkdFsg==","signatures":[{"sig":"MEQCIGxcQRxVGJcJMb/ZnuBblnOa3o0bc5zyZZGUbZA/mASaAiAMoRN8c9jPeyX+ZBxo64Yg3RPsU+R1F7C2+PXpUgSwig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxH8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqR/xAAiHRewEp1L3a+vcUmEFczaIeqzHwopWqdhs5Dq/YRniQLKF9B\r\nS7D5bzXKywnwbvieQ2zv9EbKfGyTTAvPz0ZKF7ppDR19X3z6qok31AC+pdmD\r\nCjv3Lms1bQxpMgYHCi0H+I86r/18jJlPURLUosBPEXWvhava8Q7PSn4WVewN\r\n82DngTe3rNA0N3lkKPUQ9Y/hFFDjgj5Ka7Jr4gZ95JtXBCemyj8c/Ni5dCPJ\r\nPRFy05STBJ190GWID4SwZQeNxqcF6zS5dibPp6ilsLQ1pzmhj/vzrdF/+7X4\r\nlEGaJIYnvYRAtVpDoq6ZH2yvSYzi6X41gotg/JcBnVHv3Mqt+TQUc1/EVKnX\r\nYDQc9cSZkZoicGdNNQPSRCadiSCqOrpWXFVRIMERZnV8JRULK9SBtaU09h1q\r\nipwuTVEYyB6ujqUDNF9EQr58t7EruCtA0theRti+tqt/x6jwOH6hWyLVABGg\r\nHNxSZz/Xc+KjKQHKEAQDAVkP8bI5c4wbENxJ9udBrkrC42D4FlqnRpjHXhH/\r\nkPp1h8pjSQ56G+O0UXHB/XCqqeL1SDlOLJNPPEUghNlhNErEs0i0H+aNANLS\r\nkaVb9S0bipJeOdrIBzlRSq8fxR8ByGCa1DgH6YYUvRJMViSmZf4lzv4Zp8Ba\r\nP25NBtyC8riM6LCdQvgZnEfwi0ht6Mir+ZY=\r\n=yxuA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"502fb9536e29ea5887a9fac4aaf0c9dc2c732e61","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/rtl":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/shape":"15.0.0-canary.ef276aa93.0","@material/theme":"15.0.0-canary.ef276aa93.0","@material/button":"15.0.0-canary.ef276aa93.0","@material/ripple":"15.0.0-canary.ef276aa93.0","@material/tokens":"15.0.0-canary.ef276aa93.0","@material/elevation":"15.0.0-canary.ef276aa93.0","@material/typography":"15.0.0-canary.ef276aa93.0","@material/feature-targeting":"15.0.0-canary.ef276aa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ef276aa93.0_1657213435845_0.7185390050686662","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/banner","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.59cf61d6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1dc3a250225db46b9274a6a443c4c0720b299d7d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.59cf61d6b.0.tgz","fileCount":31,"integrity":"sha512-/IEw/rXBXdy2xNOr3cMGoOqCHWEM4DRVreiM42z3NjlCMnZ9P7LwTk18fUMXB/s3KuJUCd6sBoo6Bi18vWKObg==","signatures":[{"sig":"MEQCIGT719W6Pk2N8IWKYlVt4bs8sLcdRgPQ3iZ1xi9o+xGtAiBkqqckgKRhKBurQn9ak01rZiWSxqnc0oSyex9SJAXj1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxi3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIFg//biiFhd3ief/PfoKIR3jz47Mk6zTEWwYW6uHt6SPGgF70l4B7\r\nEI5scZRAiIh/Wy12Z9U95FfHkRQdW/Jz5bvyoFB+UnEsAnrGMNk49hbETtDo\r\nKwPK2naASJJItaTvXgvqfarMseI444hf4y/yi68RjUuYj4Dx4d9zG+shBwKr\r\nD1vHBILbobpD4CDCecGCvZavXxEJcHda5ZhjkHrg/+7EQIkqrlgWjiVjZ1gl\r\ncQq/J1yrezC+75Oe2CEhnvQZHG6CoJDKHsV1qPTawZI3zQ57HWG2/pxCHMZM\r\nz/ZE00UCc78R6qyb4wl5erBLpwMOQBux3ugH+ZujXkTnBOq/gMaj88AOu109\r\ndW09XAiGvx7HHGk+ZgcPZJzpGCOvDzAW3blgzkGPpvumM6X72T+czCjUyP3b\r\nSmbDz2/b1EKqFg965Npks2+KssQ1si0cN7BT2k5mvSGjemr4OeFiu0Dihf3r\r\n4qK/ilDkq/awYvWa46ipktmuvoT+7V0vDbwWmWw/JW4oPasS68vedruo2Ftk\r\nGjSCDBWjYN5ibylflmUFORQN39J69msC1wZuoLYVBxTRsAhKH92+TX7Au+GH\r\ny6t/HmZhI5Mmtf+7/4uiWZXWGivWofchmZJs7IiDeZTfhSgnWbnAfMKeg2yl\r\ne9TGDPWB6cG8/R6pFB4/wcXFq+LVn0j4W0U=\r\n=aeKc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2f27bf33b194929683b4faa9f388325b07b408b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/rtl":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/shape":"15.0.0-canary.59cf61d6b.0","@material/theme":"15.0.0-canary.59cf61d6b.0","@material/button":"15.0.0-canary.59cf61d6b.0","@material/ripple":"15.0.0-canary.59cf61d6b.0","@material/tokens":"15.0.0-canary.59cf61d6b.0","@material/elevation":"15.0.0-canary.59cf61d6b.0","@material/typography":"15.0.0-canary.59cf61d6b.0","@material/feature-targeting":"15.0.0-canary.59cf61d6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.59cf61d6b.0_1657215159138_0.9752329933081403","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/banner","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8647092f7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27b015becfe7e8d97a6bbfceb363779580923248","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8647092f7.0.tgz","fileCount":31,"integrity":"sha512-UkqCzP2YMnspAkEOBXobZKL5pgQDBfmSCl9L/MhTSAC5OafoqsLuflAfblj5F+hsby/FssKE/PPGTTUMwWiC8A==","signatures":[{"sig":"MEUCIDrOlwgyVKJgcwiLXgA+m77G8T8jf2gt+aVE7vt53dN7AiEAy1ec/UYjzeS98ZymvytCsltpcJBq/vIMk/bADjYkiog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3MQ/+Igc8wj0OdMrq/D3+JjCFWOcVJZvwam3qjXTnjsj6UnZPqAtv\r\n1vlko9v8KUdiTokoT9HxWoLCEYZdU5z/490U16rswKBYgYuj46a52uu8I1gj\r\n4/YuTyCP3umUYQv9Iov1UJ5P6lkgjloObNRu79fa3xl+/xoBqpExhmMC8qxO\r\nhyDc8w+X9ApqFiLq0y+t/snNk/xhrwlaBZQGjQll2zi0qDcBcxHL2CgMfuRl\r\nJmdif94a9TiJYCrAHNAaMOI4CuvxfasNV84CQMexIW7KLq/nLjuES2QwskCW\r\n6YHkl2UMPhzFEQSAypC7KTBXMi6ywNYmwMQH2/qVwdl0ZJ9fw+YCjs2fQcwQ\r\n81DHjVI2lzxVp5k5aqZUTThdisT55Ni6QXdLBK38PBxoqX6BkIRuigeG9MzT\r\nkFKNI3UV8pVnozIrGkyAn4N8WA4vF2uqG50CI6So+UwzKniWYqV3/tNaRgLh\r\nFLp2q8iULXtr+ZPZI/ZFeUBSRi9yqeGqUspCP8l6e4C2rDt7I4NqR4MuEXuH\r\nkG0n+xr/lQr/vcKx6sooFMiZTc3RXlzp1Bftq4SDFapiQYdMSO8AncpOpGeU\r\nmvmJaIjn/fzuqtJs5qJ+z6LagUETqHWXec93MyUgDF2mZ/yazYLQPS6429Tt\r\nDRpa0xNLSXx94yx/xI4u7uDhcUUwzs96128=\r\n=pPdf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1edf72197ddaf5b6318f71205888f8ae695e9b29","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/rtl":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/shape":"15.0.0-canary.8647092f7.0","@material/theme":"15.0.0-canary.8647092f7.0","@material/button":"15.0.0-canary.8647092f7.0","@material/ripple":"15.0.0-canary.8647092f7.0","@material/tokens":"15.0.0-canary.8647092f7.0","@material/elevation":"15.0.0-canary.8647092f7.0","@material/typography":"15.0.0-canary.8647092f7.0","@material/feature-targeting":"15.0.0-canary.8647092f7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8647092f7.0_1657226390336_0.8029938614031285","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/banner","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.02ecd4d85.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6b91255db52b72b877e63878186b61acb549106","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.02ecd4d85.0.tgz","fileCount":31,"integrity":"sha512-yI2/WlDXVa218TX7/N4l5xTirxK1wMs7S51tcGrLZUYKOgsNBZbVfzxLxY5rBTN8jz9GEQ4P3VThcZCjdptOkQ==","signatures":[{"sig":"MEQCIGrcTiqkjWeu0CSvvXJrl9iKwxRrZskdMeTA2T4joGL0AiByFxo6bPPq9nDrg+EVMsiMENdp0MLRljpbSM431MwCsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqzoQ/8D4mnLb4U+fkiZjqXEgsYPG24DzBgEcSwWCLXq45KZ7pXkkD7\r\nO2ReyZ/ycE0ZZevenr+Ne8yIyd4iWdzYsZiSP57oIxkzZTBwewTXmJ5h0Skj\r\nEQrm7SZibNc7mEESRkiLyyJNqEqJGkiFVoyrRjr+xNuqvZopQf7dlI0ioZ2W\r\nj4WTDdlHvXFRO/ttjw8J8kuzEcgqTKGQae0m6/SSuGWjA1+OwF4EkO4CQrDw\r\nXBfYPnb5JJFmxC4LoejQQ7Dnsq12lRtgEpgRosQPJZOuIlL/ZCpQ7/TmMG/G\r\ngIrLo48XMCXrHxUHrS472kr/oZ6D4/X0jDoOlLnl1YslSpdAl48CqygvZz+c\r\nMHxjypOnJaeiHdBqhDBiOyWcp9emNZLF+gFEhgJwcGd7oP4DDeryj23T2xZS\r\n1PaaSVSTbLmcKIGag/kycL5q/ISWZ5OnWN0iABAGUXDhCvWWcJOAgJeXKR9P\r\n0YRi9a4hAP6P8uigqovJjVh8Yh9DZ+3fPaydGiAQSfhEFhoaNhQb91a8Qmpl\r\nrl0RBDq253LMplxvV8p3dPeE5PASjBhlUSef77m8Ht4JEVsnbuGzgROQ5/ar\r\nNfhVHHTiLHHXG4eQGWZAB+VcndE5QIBh0+fQSvOY+q4C2NHMyzYbrKYawhZH\r\npL8feRrH+IY4+rZuSsurUNQK13VkIC1F1qg=\r\n=fG/Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e9bd9b1837b6df66731c0fc9da61877874518d2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/rtl":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/shape":"15.0.0-canary.02ecd4d85.0","@material/theme":"15.0.0-canary.02ecd4d85.0","@material/button":"15.0.0-canary.02ecd4d85.0","@material/ripple":"15.0.0-canary.02ecd4d85.0","@material/tokens":"15.0.0-canary.02ecd4d85.0","@material/elevation":"15.0.0-canary.02ecd4d85.0","@material/typography":"15.0.0-canary.02ecd4d85.0","@material/feature-targeting":"15.0.0-canary.02ecd4d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.02ecd4d85.0_1657557629113_0.05050607741218083","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/banner","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.63d3a146e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eec7a584af2bddc8397d62224515b5611cb89813","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.63d3a146e.0.tgz","fileCount":31,"integrity":"sha512-mSoWyylWDrxqfuMwvi8r9RU6po8gwFWGRpZ6A3Rbk69ju2xqUURFMi19J5SFZC9cZ0kzf5wJzGLIEQPyr6dzFA==","signatures":[{"sig":"MEUCIC1YfxfYT946I1qG+rdm36mRftRKEnKI+PznWo/dgERKAiEA13LLBkTpWz6pEABadSP8pZNPPIeIQjMg8MzeXN6qX1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtjQ/9G2VtyG5dBiZpXpIMjGtzrg+ie0Zf6zVcqlWQEFKCHs0jOnvQ\r\n6h9Gc3vDQGQLK1h1xc7+vJ25rI7FSnkNH6ICEHJS05AHAgJKmNq5B+Suv8Ky\r\ngHGVZodEa1vEqeILXjD/ODhyNUpCDjrvYRYEpWGSgdoxGP1e3XRXrvMkmZ0J\r\nfe6Ztcu/qxzhvc94ZxhAwk1fd5j4iZYBJuYHam3vBv/ZTRLaXOm0+kYOBHk+\r\nzrvAshi1MKZ7e9NOgMlKZ1kTd2bKADiLO9cjJxeHErPw2WRn6kSPcSDVC04T\r\nTOs7hHbjTtXqNw6ibPGzF1UZBmLI12eXKRPhy/JiWqaT03cWgqLk+vwbyngU\r\nzeCrC8Xf5zSNtctdxACjHSG45krwVIBSIOLLtAyJ2Qbfsre1GBOrUV4k46Vq\r\nw44SftX76JRvnKPRXDBIx7FnItjMkqf3kjCgbK8twRhkx7Eu4JORbbmaiQ6r\r\nxcQFmzzGueHyzEW/sfdZIRvtK+oX5/f4tFYRK7F6Ma5CM/LSrTZVcdmxBZVx\r\nj1AuxIob1VfuJ4345BQYq8J9gAJNtIQNkgaJzExAZod5v2GBgwPeT3RbnqFY\r\nwB7WSgSl9MrHcfhV/vk4hcHJ/dq7Mvhi6Icluui6AovGIK4+4/UO9/hRd7U5\r\nQVCarbFIby8eTPH8QnH0tFrKAPhiQ5lTeGA=\r\n=5Tgz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"593f32d351d8703bd0422f65b3651e55f97fd31d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/rtl":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/shape":"15.0.0-canary.63d3a146e.0","@material/theme":"15.0.0-canary.63d3a146e.0","@material/button":"15.0.0-canary.63d3a146e.0","@material/ripple":"15.0.0-canary.63d3a146e.0","@material/tokens":"15.0.0-canary.63d3a146e.0","@material/elevation":"15.0.0-canary.63d3a146e.0","@material/typography":"15.0.0-canary.63d3a146e.0","@material/feature-targeting":"15.0.0-canary.63d3a146e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.63d3a146e.0_1657625903534_0.4639212399232544","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/banner","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.88db01990.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e0ddf70105bc8db8257d11ce4a868f06ea55ef65","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.88db01990.0.tgz","fileCount":31,"integrity":"sha512-QH1FAWa6oY4gGrq/cxEN5WUhhp142D3WFDA99IW8/mG+SoBZ2lPYGvfMOT6dAFQlNoktQxXh31bl7CemJB+Xjw==","signatures":[{"sig":"MEUCIQC0kdpw09iUwADokAdrRw7nn16nDDabWkYZ0KwyZO9M9wIgTjdhbD4VPEA8x+lqyp84Eg6i3i4wRmLyc7vQdCP4T3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdSQ/+N3eUForqA44T33Vb10tGPndUg3bRlKhM/FLlVTMuYSdAW67k\r\nhr9n+Axo4MmEy4IKXTK66eC+aeA65g/eKUYRO/F9MnYjedrS3gWPRS8ypmgP\r\nlSEaRTE0qus+kryu7vccN/NHafjMrMmSt4piGN9ZFWLnVBsu8mAVotV6Rlfp\r\n/FHi3K1e5NN0pZGskFFutqv5v8bTyK0Xq17GAFlhj3T4NY6DaEd6Hw903G1v\r\nTC9Qw8mzMptTNlOf4VA9q0wgLudqyVWz5LzgNwvC/A4uMru0NY8LfLavbtVn\r\nzisM646AwE72swWKQLbxcW5oXbHXEpi+V0XuniR8lRUoiroBTgY6vGSCTPIf\r\nv+JGSJa0iQSlrXxUWJn9LwKY3jD2TG+oLrdmGQAReM7m3TdzBuzJxGZNd1Wc\r\nksFlB2aBjob/VqslSiwmnj4KXamqjBJ7NZkXCteh5ez+W1BuCMd/po+q1QKX\r\nFwd8mtROBmy+bRaMcntU17h/wB18rIrPyi5VgwH8zVRt4Y3F/ZCkvRLZARi5\r\nA14SSTUjLIw3jhbLyqTuoVTB/LtyElmt1UnuAXRtd6e+grS4Z0F/fAJYnfkt\r\nxLVQpD6ETuqzhSeH14rF74rFsMjxg2oQD8z1sTb5w8t3cG/+l0fJKWyYoV/C\r\nUz1QKbo2aQf07RjbSpWBJPeJh8hrKaOKFyE=\r\n=vG9k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a2570f15e2572775da6e1894e5310c107a703ea4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/rtl":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/shape":"15.0.0-canary.88db01990.0","@material/theme":"15.0.0-canary.88db01990.0","@material/button":"15.0.0-canary.88db01990.0","@material/ripple":"15.0.0-canary.88db01990.0","@material/tokens":"15.0.0-canary.88db01990.0","@material/elevation":"15.0.0-canary.88db01990.0","@material/typography":"15.0.0-canary.88db01990.0","@material/feature-targeting":"15.0.0-canary.88db01990.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.88db01990.0_1657626085326_0.5036548350863543","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/banner","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6432d8fd7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c014138ac6908f7b3a0ed897e19f95fce910c2ed","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6432d8fd7.0.tgz","fileCount":31,"integrity":"sha512-AqSz+7d8MdbFCiZ+prwUisdqvL1v9bDoO9ToZ+xxk5p6rcTdidp4gYcK4kkGWIxAd7KK2rPDZyfzra9maH75Cw==","signatures":[{"sig":"MEYCIQCsM1lbybW78eYTUbJFGLAjc/bCbcYuuOEUH02+HriVUQIhAK1Osb/mwKj5C8T062JLEC7Fym2E8mqji/b1kDOwMFhU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8YBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4pBAAkrZrE12xwqMSfYHsveNrqaACGQiw6Q7x4VX+x901ZtGo/Qw5\r\n+29XOB+7VeGU8k6qUkSoRBA98X/T1fkWKE72Rs84zhLQaFpNhl6aM6hppyFs\r\n1kyBBRT0bmBsP9ULhwJNa/XrX66KOm+AtKzEVIof1jUa7dxIV7KorwpQ/FPN\r\nLzedrF0WhEJehavBIY3/2U3gFPdeKAjCrrmaJEjSbGmLYMoUce/KNMS3ia52\r\nqjKfE0O+jsi6/g96BBFWYZ4C/WffCzvslAYPO6H+1l87GJ+D1+t2vTejpIMF\r\n14jSM78VBZ3kNeQKRK3kZz3fJGQS9ArRwUssDkNU4Y6yiSkOn69MWmOSfXhe\r\nCNuLW285cME50Hw+LPUY/BqV1c2iHPL2Rfbw71VOBvz1CCA6KYiO9O6EuK16\r\na39TuqBm/c/8nP4nhvK1OJ4wIDowgk2XCZXzs2JkEoYvN4VSEpnYR4IdGrrr\r\new7HHU/MdrbtNnX9UqEdKyB8khChzDG8xNqxgxcWABIGC6jTwb+7dgbx7kNN\r\nPv/7HnRftEYQsqUgvQy8PKrGEhdhCk/Lb/uK+HwfzAyyOPSbH62RzdgHTVIQ\r\nn/eIhgKfhzdk7EPn3ycrfhzw9yG9EdvhvUEQrfmeMlqhna1Sq8MsEaL+CJn4\r\n8nY3Ij73+36Gjs4+KA0tuvILiTLRsz6Di+o=\r\n=flfZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"307aa53d6ea873bb978456b538f97f9922496798","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/rtl":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/shape":"15.0.0-canary.6432d8fd7.0","@material/theme":"15.0.0-canary.6432d8fd7.0","@material/button":"15.0.0-canary.6432d8fd7.0","@material/ripple":"15.0.0-canary.6432d8fd7.0","@material/tokens":"15.0.0-canary.6432d8fd7.0","@material/elevation":"15.0.0-canary.6432d8fd7.0","@material/typography":"15.0.0-canary.6432d8fd7.0","@material/feature-targeting":"15.0.0-canary.6432d8fd7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6432d8fd7.0_1657783808858_0.17595102475328472","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/banner","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.085f9b25c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9d9e525ee8bc1bfe4218283fe0bd542a1eba3c83","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.085f9b25c.0.tgz","fileCount":31,"integrity":"sha512-gZYpMuu3SOi3dAPBTl32/VGJZKurH0MUUPOnyDUZYY300CQ6QI9iPrQHmJ9yysTv5Zsusf62yXtBzXHzvalHNg==","signatures":[{"sig":"MEUCIQCR/k/GM+SmynkWsU6M3mn41s0OGkEY4m6aQX9eo75g9QIgJFGLZcmZjH8ZxYpAYFQCLOuUzt6B8Wm74AvBIBfUUiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EX6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6hg//VQvEkdXiTWyMKczGlCqrmuxTctLmN9Ar/6OtXo/TEFheTYkl\r\nTkCSb7hyDy09Meppr6aJDRKZWNTOPQb3EkMMsR/eFnD7rvoMQGKK/TeWlWJQ\r\n53Rq9FMPK3PKPpsffoOypW/bHzWP+I4wkr2hYLCVy5dww88NQbYuyCalPdEf\r\nf80TakCPFYweRYiRirNfShPmE9th20wJAJrRg7nYfin+TglsFk7fEvX8/yHL\r\n9k/tdWFO575cvMNXO4mk8PEDu1ECq8WZTYiMJkVgedbhmxK4uONUdCyf+8WD\r\n+WEwCABnphJGph0LD/l40GNW2a0RArsvoW8HKIHflVRAwSLXTUSwR1Qe+MUa\r\n34/6ERLeiq58tBR8wC1uH9LEOJWxRfegPMIfgZOSAPxmryHJRuIcDRMeSXcx\r\nQ4DLZkW/f501/wOETGIHYMxWArqPNzxoIT42++zx7RrDtAcVA8ssK8yHwl/V\r\nq5GzHLN5dr9JkV+xTA3I4xiauZExSIqxaSoWDXh/HO0Zv33cCMWstjd/02N2\r\npAXfUDcd9Ab+D345OuwQXVYLf8kQrVuz4BB5Hvr8ejV1/vHp9ruGGZNU/yIg\r\nyjvtVDJdWhYSB6NVsNpjKgK6UAZICz2P8n4D8ge/rCMw0foLBHFn7JMergdR\r\nA1QGlKrDvMjb591p1wGYOOu2m3ALLeK60+U=\r\n=3862\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"766a8d5f5fc7e4e022835f16c6ecdab8d2ccf071","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/rtl":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/shape":"15.0.0-canary.085f9b25c.0","@material/theme":"15.0.0-canary.085f9b25c.0","@material/button":"15.0.0-canary.085f9b25c.0","@material/ripple":"15.0.0-canary.085f9b25c.0","@material/tokens":"15.0.0-canary.085f9b25c.0","@material/elevation":"15.0.0-canary.085f9b25c.0","@material/typography":"15.0.0-canary.085f9b25c.0","@material/feature-targeting":"15.0.0-canary.085f9b25c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.085f9b25c.0_1657816570368_0.36994358957890294","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/banner","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.39f9424b3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"09e90453e49ea0e83893052b41580b7210d1fde6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.39f9424b3.0.tgz","fileCount":31,"integrity":"sha512-DBGlTJMlhrBdhpFrZrpl3EFyfrIPUxUnjqOCfwUR+oLV8KNmL3MoBiV7tSynjrF8Gj6gAKSowghaBNbOm3/ykg==","signatures":[{"sig":"MEYCIQCA99D7zok9SQ1/qTv5mZdFR/IRHprgVvA7W4T90of1fgIhAPT3U0b+Y+0TF+PUOTAfqPYSsZe5wm/Hb7kJ49WB39Dc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraPg/+LtiBEm1QoMj7jkAEfjyFVNBGza3ThOyo+blMTw2OLD3URXtg\r\nU72Q/ueVTxyZpxZ0pB2Lyhki27fBqUB0QPH6XDsKHMbios/wVK6wCxy6BYQE\r\nM+3YmAC+T5hjkDifXM3Bz57LXY/0Nhww7+y0nlAuBLoLrn6RoqH7+t3PcEPU\r\nmdjm4GREziP/Nm63zF7Jnt8ST9khugk9ZDghkCse+YAu1tSMt3lT4n4B4kye\r\nWwrQ82A9c2tDSrZNLiBHDJwA/5puq8SqTz9V7lN56bT0BzAJrsW0qMMzPS/X\r\nlyfTIse7Mi9QvD8fK7l3A5dlPdUWlkv5S8t48kAIytmSg0e0FvTQeEOnUdrQ\r\nh5l1FZGbx1drP+M2HgJkHC7+xbnaD+52piEjV7eGvxqlVJP+bf/lmEA58ftL\r\nuD4sat+rsV9lABxubWRWxPH0eRaJpXFYFjnTjJZYQqA26UD02TMSGi2XNIiB\r\n9wd1wuZ0Bhn5Go2figAuod/9msYSkWJGl/TirL3sJxFZtZV3kmCuBmwx3SBN\r\nqOCfsWRwoydGVRnoy0zgPiV6pGTzYaJgYCbBlU0mDi4HV1oo5tCEJF6885JY\r\nc6iq7m2DPWojKPlMkJ6Cu6g+6aTzO7/stW7fxO+DIeg55zfBMd8GFPSbMvgC\r\nflWWo0mqO7Kzzx4Eh4Syz/8R2gYTIDNPENM=\r\n=tSUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"62e726843fd90c6139d8ade27db8da6ded6e1d77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/rtl":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/shape":"15.0.0-canary.39f9424b3.0","@material/theme":"15.0.0-canary.39f9424b3.0","@material/button":"15.0.0-canary.39f9424b3.0","@material/ripple":"15.0.0-canary.39f9424b3.0","@material/tokens":"15.0.0-canary.39f9424b3.0","@material/elevation":"15.0.0-canary.39f9424b3.0","@material/typography":"15.0.0-canary.39f9424b3.0","@material/feature-targeting":"15.0.0-canary.39f9424b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.39f9424b3.0_1657818394429_0.20651777611022482","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/banner","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ae9fce587.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6fecc5c99e174ac7fbaa4448b8995af9c7ffd78","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ae9fce587.0.tgz","fileCount":31,"integrity":"sha512-q+g9dlP2hpZI31mTJD8M3QAYy6I7Ad/J/9qglbEajYr89up057JVFtuzGj96hok2tF5kSi9RdE3C/2BlrCJnow==","signatures":[{"sig":"MEUCIQCxlOjM+3ho5w3uo5yBzWiqZROwS7FDm+h4lNyjvmip8QIgGtNHZhc6CBt0NxE1h8sb0OWJ8nvkon/rO+oe16KqxAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBAw//d1WyGXMCPlorTkyIEsjtup7vh+ikJ15jXM95JW80Ck4/0YZV\r\n9iC5hlLZovjb/X0GyXK/r+X6f8HrmUTcidNbrvHJBASdBRscX6iUI4hfnhHe\r\nvkY8RvhqOs7iPp4gFd1BE7altMDIivb0IVwW6GOH+RpxxWYm9W0xXJrQNA3u\r\nbbeJpfOjONcBp/up5z8xkRWPvxDVSnFy5oITP7Ige8IbalAOf7rKoynOZUOX\r\nV/cCBKffzi1fXhdTsZgcWYPckueVGjzQbzj3ZCx01ZQRtQw+St0pKgU754iB\r\n89uejDdG1uDdQep/ZTEUnXhTHsUDAMJxdA/Y7Egm3wCoduQUthTMSYDUhrDT\r\nFeJ8FTflD2mg0pC5tmpmNjIrvG9Ab2yACghLhjHxAC1yqXOQ/l2B1KJKhPby\r\n8+kOo6pjitKaLStr2tIP5oOyKkLiOV54/U6A84HS97NYc+Tg2EGZUSjtF/Jv\r\npZ4GYZyGAOHLZ3JIuslJUhebFNCR4lURUmSkV4RWs4fTnOQKgtW5gg631urg\r\nanub5B08kPBDgVqPsDxh6wUsEaRaVcEyBZee/zFSlVd1heD3KGU2qbJBz/Lt\r\nqanRqRC9p3SvRoXzHUO7BR+zBxMGkwyfHQjl0h8Un7d4Q/8ZOxPQI9ZiWt6o\r\ndUiM9cF3cvKrjEQQ6qbl26QsM3eGXjdBRKc=\r\n=RlUr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2d55d2ded8f3ebf66d72baffd67452a8de349b3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/rtl":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/shape":"15.0.0-canary.ae9fce587.0","@material/theme":"15.0.0-canary.ae9fce587.0","@material/button":"15.0.0-canary.ae9fce587.0","@material/ripple":"15.0.0-canary.ae9fce587.0","@material/tokens":"15.0.0-canary.ae9fce587.0","@material/elevation":"15.0.0-canary.ae9fce587.0","@material/typography":"15.0.0-canary.ae9fce587.0","@material/feature-targeting":"15.0.0-canary.ae9fce587.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ae9fce587.0_1657822162751_0.4625321191881375","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/banner","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1ebddc343.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8da02736237ce55fe0511bdf27b6eec0ae2fd53","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1ebddc343.0.tgz","fileCount":31,"integrity":"sha512-on+YZDeDgYG6jUOYT+jG/NwiX+I5HQWxVIMFjAlwIpM2a5vJDMtu5YnUiiVq0bXnL3n1y/uouYPlWCaD6ncZNw==","signatures":[{"sig":"MEUCIAEwMrCnCa1824M7sFnKT5DHBtTtljFaj3/E7nSfZsYsAiEAkjHYEcYT+T2xcoN8jTbnrw7rpSIM8WUzfkFZgXWlgFo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmov6xAAk6VEBbQGJs0N3s8M5iops9XXcNAflAdQSNnbZv1anVOa+xO3\r\nxNXRREkkCUTpUF3BmGlWk8suZNW3X51QTnI0pM+BbY0EmkG9XD2pxH34FtAv\r\nRI82kvEYuqpun6XTIdUkClYIDhSQUxgAC+0jTlOniPg9KSRx2hS+1aeKP/rq\r\nBdrmv25bIFeGbJQ0GY6Jk+9DSqkLduyK1reCAKLmZ25R/YxpU8QBmpV5sb3M\r\nrErxPN5tjfNlno8+PlbOMJqrcTodytTStdpowlsGfAemEsqPuUnqpHxAxpKP\r\n1ZfG2Z48Vgv8dbwIFnlHtQ0VhbFfEsdRK98nck4IqTWwl3whRZhrAGqe67xM\r\nN6q1nUVnkv6tF7oXhUtJ4fzZv3DcWvFC/CK2ijVALVDr0dgdLRYxjPV2VwOF\r\n5nNJAynRJgWFI440eySTLW9m0tEfSdi+2X3oDzlklibjTQMaZVCZbDBb7Cs2\r\nL5aEPP+YtzUMbzCuySC4exk5f59rvXzufuy2xGsYmGVeycupuLE1NMxZ6FAt\r\n/HNvEadEzfcKm+ihOcfZjVt2aViNB1YM3XB8TOCDZnq8cLiE45lubTNFjT3H\r\n0EFDA+oRL8EKujeus1uLFUNWn1y6OIo44MEw5qUGLkK40/91n50VMaH9BReS\r\nwJGdwyvCdNkZJgWaEz4rWShreCEbpfoEbLI=\r\n=CUkI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2ec31cdb5e8e1a849368a3f352b213919bec43df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/rtl":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/shape":"15.0.0-canary.1ebddc343.0","@material/theme":"15.0.0-canary.1ebddc343.0","@material/button":"15.0.0-canary.1ebddc343.0","@material/ripple":"15.0.0-canary.1ebddc343.0","@material/tokens":"15.0.0-canary.1ebddc343.0","@material/elevation":"15.0.0-canary.1ebddc343.0","@material/typography":"15.0.0-canary.1ebddc343.0","@material/feature-targeting":"15.0.0-canary.1ebddc343.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1ebddc343.0_1657875036983_0.8747098000975835","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/banner","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c5018840c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"454727d24389f1591f540b136fc7575761c168cc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c5018840c.0.tgz","fileCount":31,"integrity":"sha512-Tq2r+vKKYHnSDv5zdH4lLceoUlB5LcINDavr3QX79OoYDUWdPNc8GKUkOnm374mkaigdkxOn+GUTEij7O/P4oQ==","signatures":[{"sig":"MEQCIHW7pDFnHcGJ1J/3fA4dHZzUbw+5DxkozW6MON4vdFUfAiB1V7E2UhIudSKnmF3VStr5InN8U3RaocigzmvzqEE+mQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1St6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJHQ//Z4Ntn5/SVHPBdxEOT9sCW1pQQhygGsD4WiOWsjBU0RCyOviN\r\nXzDPNDblZxxmI+KTyO8msIB9D/sdgbsXsejDxIJKGEZcvCblbvP2DoGDV91j\r\nUib07+b14ijbaGKAcVUPI+XcTKszC3XYq7keiQFm2gKdViQJ1G53wlEQsv0Q\r\nM1Cund4I/twFB/FKiHU/ywP+JIwyhg3oiTBq6KvFQQnIKwClvZUvNsDAY+Ps\r\ntkaW2Id4U9QvW8j94oyy2vQqU+/eQ1zBJyFlQGl1Hkfj12GAeXPkgNoZrYaw\r\nNEMWPBdqM82ck1wAtVooZX03m0/SxuVS3o1uFCb1ZmWPAL5lyTanorRYuo1w\r\n0Q0FgXFrzKCYGgXroocg8o5UXBz24wUamLF4NWSoh4DlhK+Krnaist57UZpE\r\nm5z0itZpF7u1Ttmjx5+fqljBMCAFbqJrP1mGefJyHtSdbwYKB4pzIl6G/8Gt\r\nJrL3ZNQpwC0gzXbePQcsyTJ/aSVfV0l8TDj2ecjyx9ur4tzV+0v/npIJm/pe\r\ncML4xnRYCMl89HzKW8d2ngTsFENpCoLF7ZSkIO2x6lhvN88wq6pfM0X8ErR7\r\nddYexDzgFeAeAkDGlvsh6JvSiBsuQvEvLP2+rz//nuKJQ3nXBNejOtINxlF2\r\nG9eCVLgrB7EBGXZ4pLlEcKxjEhltQwXbMoE=\r\n=/vxU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c86de383c50b7d72b8c5cf908c5fdf3e6efa94c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/rtl":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/shape":"15.0.0-canary.c5018840c.0","@material/theme":"15.0.0-canary.c5018840c.0","@material/button":"15.0.0-canary.c5018840c.0","@material/ripple":"15.0.0-canary.c5018840c.0","@material/tokens":"15.0.0-canary.c5018840c.0","@material/elevation":"15.0.0-canary.c5018840c.0","@material/typography":"15.0.0-canary.c5018840c.0","@material/feature-targeting":"15.0.0-canary.c5018840c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c5018840c.0_1658137466179_0.5656211860472933","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/banner","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.551b40d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33af7037f871a80740586a1d49ce95fc7f6505a8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.551b40d18.0.tgz","fileCount":31,"integrity":"sha512-NRhKFHNwKCFZ294DHBVo3VSU1GIx6nKH55RyTSr6dygpb6anGEwULCvudLPyf1+kNRhW98mtiL8+V38Ti98ImA==","signatures":[{"sig":"MEYCIQCBcqDf4r/bRgQ7qiWnotKTzY7+xF4BRt77iMeJZ2ca7QIhALgp+R2YkIu/CORYxTK1wJ+2n56mN+OPylW+OoRLR43T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpR5Q//R5XNcPYTxtTp1/JihE/Dx6aPHmxntHjNj6Uy26CKZ7sGDmJf\r\nPvoKErjsKS/spE2xWYVm8FSGOR3gy59pPo7xjBfePNpy3XPZUdMpYKwexPfs\r\n2+3bxEN6FdJ3JT262C8fuSw+uWDVV2+djOTmM1wU12bGfeLoXYmwIInNlg5k\r\nNkvyAjI6CsLSQTVtG838Vvz4i/WBxMVo7E8gL+krVXB65m0I9sq8q2C8gaiL\r\nLLir8rYFdT5b8utGgTlsG6ohVfSKiVqhlqQ+mtm8K9E8PPaDokof+KNEOfRd\r\nzwB0C7gltPDOJ7PCfjIdLmVlrZZHvWZfGw1xPtOquWO/uNTSTYQ+PgUbvZFO\r\nCUSx3kMFBK8zDVoL2a7lx3/tCo7x82o6fo8m1M3c+WzKPNp7PVdzGk8OY/QG\r\n0dA4tSHJmrGAYIP+aqDkinoiua0+fUEE8YMw3RzWAMELgeket2bgtE6N54BI\r\nLJ7SmEFuVo2oGkARWdQI07omfjpnHaZXRPEk8046kBeex0+pdsSfWYL23pD5\r\nobLPpshl/SW3fV/D5mqZTJALy1pCcICYCqUdNV91esv04NxRMn+j6dnOSRNT\r\n2bH76a2KkRix/oq5RvAqSjIdPXttfvEar+VRt2F+o6UoMRHWLFUrFSVKc1mH\r\n6EylQQNYGctvOixW6WraBXSGSD/4a4vfKMY=\r\n=9jDA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3e9aa3499438031c9229cf2a18a1a3672620853c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/rtl":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/shape":"15.0.0-canary.551b40d18.0","@material/theme":"15.0.0-canary.551b40d18.0","@material/button":"15.0.0-canary.551b40d18.0","@material/ripple":"15.0.0-canary.551b40d18.0","@material/tokens":"15.0.0-canary.551b40d18.0","@material/elevation":"15.0.0-canary.551b40d18.0","@material/typography":"15.0.0-canary.551b40d18.0","@material/feature-targeting":"15.0.0-canary.551b40d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.551b40d18.0_1658138547081_0.6422391383069681","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/banner","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cf9f12371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5266ac00892e9a0ff2b3641e0eda23fab3f27e38","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cf9f12371.0.tgz","fileCount":31,"integrity":"sha512-bMVccCByIW+/+8RywNmZS8PG1H63HBsbb2IAWUk4t5PRWsCqI0JWB7vflTouNSxybEiq2LgLs+ZChJIs7IRZgg==","signatures":[{"sig":"MEUCIQD0t9kIG7mo0ApbKLr9fEaaRnw3fuqqZS+/3HhoOGui3wIgD0iSXkkuVamJ8OATo+eosMvvlFD/71jAifEEuPtYyM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpAQQ//RgsAJOHwxgCnxqYv0ARtW8kGpiicwLenujZ5LHZc07OteFv7\r\nDWKo8suxPiEavoPZ8F0o+IULf/12j0HY+XVXL/FaWjC+F3UrRPlKe5pea+Q5\r\nRm7Jrz/hPVPdPdLmKUN6AEH+7l0gWai7fjdXMt8dBrVcJaj4wbefxQMtclBG\r\nV980J2CadfdfbGLOq6W7hvxo5ok4Lt2BgjkrvG7gDX/95FEITdRl4OMfVuvV\r\n7lqJpqFAXEI57UORkLOY+EAidWpKSzPtLQpkBX9s8rT4htF6j8sfSRNDKuRk\r\n4fE5PyT3G0LrZ7vZVaKFQU9RAwqy48Lq88eeKdqIxJwJSOwQRqthICISwp5/\r\nVXv0MdejpIZSbn6M8NdwpSPK2nh/O59qGR0J5fB6ltuZbyqE7avEvEvmH1bv\r\nsPYts332sHxUt32jlapQnVWoJ5qM9ZaUQmixwjQIqazfpUBSRSIwPRsVgeT6\r\n/vFFnwTQ6mmgM2Wjzz1SJBusi28/bgqWskXVNmaDAL6RRz6nR88DjG2JGhWd\r\n7/0hPfjxB4vOgMCIf4XolcD2cSp0eUlDbizC7jXbQl4Sy0ekfHtTZBGAZpg4\r\nZ0+kshdAifpscD56xNf9DcoTOcBZBfThXY3KKE8V9W/N1Aw4Jj1MU0FdTFAP\r\nuD8CwyfM6LMwqVCYsbLfmYVb9eQtMj4PbzM=\r\n=1YDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1817e344a80081e042f37248beeeb96228402878","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/rtl":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/shape":"15.0.0-canary.cf9f12371.0","@material/theme":"15.0.0-canary.cf9f12371.0","@material/button":"15.0.0-canary.cf9f12371.0","@material/ripple":"15.0.0-canary.cf9f12371.0","@material/tokens":"15.0.0-canary.cf9f12371.0","@material/elevation":"15.0.0-canary.cf9f12371.0","@material/typography":"15.0.0-canary.cf9f12371.0","@material/feature-targeting":"15.0.0-canary.cf9f12371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cf9f12371.0_1658138784587_0.416496775339686","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/banner","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2797ff8b6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8f7599a988851bcc9e97fdb3e0c55c9c94651f3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2797ff8b6.0.tgz","fileCount":31,"integrity":"sha512-WcBjcap1tO0j+m2Fl9Q6GSjDVn78EBmjjajGtZ6VaUFQ/AXyN6HMe6QdXqbP2pLc0QqyQfoF+rnl1/yxuzjIuA==","signatures":[{"sig":"MEUCIF3WnCai/mpaUC34ki09VKIGsjC1K4J6TuXvP5HBkfwtAiEA2osxovX4XNrqbi8IwsaecwEx825/y5NQReMqaXu90uI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fn5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMjw//Wa3l2l91psIW9uAm0z+EXMfJCSK58MOnVnLwEzg12bSmanto\r\nubbw109EVXXFymj43WnMbfjLxQPsCpVqW11iv5C1JKWjKNaeBw/hSbMTqaY8\r\nggfrpCb3LNLk3rmNMswC++GuU2ZofobSDNn5k0FgwrlU5FwE+TiY7vRcuTgZ\r\no3xBJR7ERTiTGZi1MsZjNdyY64jYvR/DMCk0ZL7mYVBT+wXVCnfX7yRKTImv\r\n/Pwg0PbLAhUlg8z7FzvaWmqIGQ7KG1s+12EJ2j93htxgpI353EBzvN/PHnf3\r\n0BybbES4IdMr1uxRzYWtbt3h5dbxU1H/D+DF+IpoqvnZlLpPYVzpj/oQhIxt\r\n++NWNnIsPnK5UtG5a4FUvdjVNT8El4jAgGQi5TDEoPAUcMEsUe5kMRMYFA9y\r\nr9ueiJLPxNr0hqLa9pAMLH6QEAyn+xXGeYAm4xhIn1YysYzuodlrGRZ4o5wm\r\n7i8ZCtRTyoOq53JgxEnXnWafyLfuvnf0eSPDPl+IH1gn91txnagcf81RnKiC\r\nS6UulJTdPoOuBWTuzhXv+5p2hTA6IfVd6KcBaZtXhzH+mWPfHye6iyK1Ua5Q\r\napTI3JlheJbSIqOyQh1K//LPIJOHyd5y1qYtH0g2W5ZmA55VNeTtd2a9Qqul\r\ns9gN1OqQagzclaLfiztO7dXNItW4x5oEO28=\r\n=Jz3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2c89951e5e0cfca0b1dc61a4f30259b33cee139b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/rtl":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/shape":"15.0.0-canary.2797ff8b6.0","@material/theme":"15.0.0-canary.2797ff8b6.0","@material/button":"15.0.0-canary.2797ff8b6.0","@material/ripple":"15.0.0-canary.2797ff8b6.0","@material/tokens":"15.0.0-canary.2797ff8b6.0","@material/elevation":"15.0.0-canary.2797ff8b6.0","@material/typography":"15.0.0-canary.2797ff8b6.0","@material/feature-targeting":"15.0.0-canary.2797ff8b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2797ff8b6.0_1658190329306_0.28290577611407275","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/banner","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.110fafa17.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34fba143aac484c92aee93d31f9cac4d9beb2878","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.110fafa17.0.tgz","fileCount":31,"integrity":"sha512-NvDkztSqoNq2W7Py0gIc8PYZqw3j0gl2LxWZXRK/CrkO3zRpbYW9tieJbOS5zqojqClLg/5VPI8EQpgI/iNo0A==","signatures":[{"sig":"MEUCIHKc5DTY7InBbRNb7GOeUGK3R8r50oRymjM0/3MtutubAiEA6T2j8rF58hBqcl6DnUKdeY2wCSBDWe/Tm76DdjuML0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17M1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobgQ/+O/ppa94/xNUcmDnY/DBBMSpL8jtQcF3guCHRTEeJoNDP+ZuN\r\nN50FSrGb/qlQwGOyV9yfPFCcMCvnBMd9yJxGFiJDe8WPuQmcCbUR9pN7ynvV\r\nwso4qGtoPxFSqFuWN4YQ86OJQeIhIAt5RWcMNg0W2GGFIVZpgJmAyBd5A6Rt\r\nLCvd++8RfR9iwPz2lOj5wJ9N6vbBMcj/AxjSLot/razcbNu6hws5T3vGR2Bv\r\nNVUfG7sFRMcEZ3D8AhXNTrdpOMAwlvZhDE3HwED2NA93zpzlAno1V1zTT8dm\r\nCntkebtt/tdKTiBukwuwD2Bq7FUY70D7mNZh+Ou+6DWXHau4U2wgB7Yr+DDb\r\nunzye9opH8lnxKMeB3EagrA4FKZYspgJ9xIdt+qZVwdfbQfDnnyvUOdKZ2bm\r\nEVNwm1HK0BT9kbgH4xgTtKCi7XRbtuRvzFOavbfMyYe6Iuc0JpBa+6ioMqqj\r\n5AmXD/caSRPKjoWGO4eZfZV17teQeh7v0RryKltHfme/tMjw7oclPU+bTOIB\r\nXKxTIRK63kQhR3h/vJB0ePIVyG2om/s8NsQEbML3M7sfm2JbqI9fUl8kcpGY\r\n6Di5msvk+xLIyWyCenOqiNVVV2JzPKx8JNoKfhou66JxK0E6CT7rGPEpatXd\r\n9wA8ZYH6PBvS+dKAu4TnDkgE4jPrberxwHQ=\r\n=f3EB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ccf0ed3e8eaadf1526fd10979e8c00e79b228f5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/rtl":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/shape":"15.0.0-canary.110fafa17.0","@material/theme":"15.0.0-canary.110fafa17.0","@material/button":"15.0.0-canary.110fafa17.0","@material/ripple":"15.0.0-canary.110fafa17.0","@material/tokens":"15.0.0-canary.110fafa17.0","@material/elevation":"15.0.0-canary.110fafa17.0","@material/typography":"15.0.0-canary.110fafa17.0","@material/feature-targeting":"15.0.0-canary.110fafa17.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.110fafa17.0_1658303284798_0.262808219297338","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/banner","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.386ef1d2f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"520a5dfedaf846149145329a90b1a9f6c9b4c461","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.386ef1d2f.0.tgz","fileCount":31,"integrity":"sha512-1VrvrVn3wyPb2tsQgT396sXowoMbbETkSO+NDGePq2LNSWtNM3NAcL7zL+heh86gxTsl5BEQR+Zja7Byzz10Gw==","signatures":[{"sig":"MEUCIFiAy3C+3MrESXgoPhStRi+4Vh25l2/9ZzPfEERP4msfAiEArDvv/YDztTRENlA8LkhLvhgjEKlSUpgfc8FeZJPRCdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EegACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7Nw/+NHmDUOxk6P4HQZopQQLokgx3aelL+0tlKY0U+1mHXkRwmxVX\r\nI/E7Tm84xKbB12jj7+ZJbYLo2yBwjTYC4CQajJ2PfqLLEWC4oqWqoTLH2ddf\r\n3h9ivsjAX3rMifWL1wSoAJy84+6McjjkOtRx2NmcsVTZnZpqVuAI3FpyZY7S\r\nYYELgaC7kRk4h+NHblQCILGVvzDXOv3iGx2Z1XoROhMlaHvqKRvUHlXQT41b\r\nCeMYOdJOTDcm5+BKp0Im87Ntb6oVyLytJYSBuQgDyEalcjQ3/alj1Gc4dukP\r\nRWlw4qo838VqZGnc4CTLtOWgn5xvn0G/uvH9H9WMw3fxVeZfzA9/6ONLU9KF\r\naxsE/DLQcAcc+UARA4I78ttP4kUiqbLoXs2c+t8ViagaOeecBRALUF2koZrs\r\nurE4qTd3IUh1GmdOx/E0a80+/SL3fWh/AHIb0JDwAWk1iUNENdMVwD6dUD1p\r\nruKpu0gnTjOi3KhVuptT1hj6Z+q3/9WeAIPE6mCSbJHee2CifjCesq6hbAZw\r\nqlQoW0K9ulY8uTRMz+c0y2nYPTl2E7ds6r/fxteMqXKpl9gvrVc/9U6pJx/o\r\n72c/XRjJ1nMxfFCfWkbG6w4JTXPSNdov/sSX4yjkiBJrvWlPnRg4IyBAygYF\r\nfu0hvhfP0Y3qls5BlaOsXeBwCLt3ZH4YVPk=\r\n=44dn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f81dc27b99348c90268023c46429639f145ca534","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/rtl":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/shape":"15.0.0-canary.386ef1d2f.0","@material/theme":"15.0.0-canary.386ef1d2f.0","@material/button":"15.0.0-canary.386ef1d2f.0","@material/ripple":"15.0.0-canary.386ef1d2f.0","@material/tokens":"15.0.0-canary.386ef1d2f.0","@material/elevation":"15.0.0-canary.386ef1d2f.0","@material/typography":"15.0.0-canary.386ef1d2f.0","@material/feature-targeting":"15.0.0-canary.386ef1d2f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.386ef1d2f.0_1658341279821_0.5340432133295532","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/banner","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c3924efef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b08cc9d7cf0aff08307b60b4f03380531ae9d50","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c3924efef.0.tgz","fileCount":31,"integrity":"sha512-Chd2+VU37Vy6n0y5xEcpbbjVkKIqgaBBm++vva4LkinWnwpcosfkCTXxV+i41oqHOQohnsx5Wjm2S1XEgdyitg==","signatures":[{"sig":"MEUCIDtjg42Fn5ebopBiJw4bf6VjZSW2hFmtEYXGtdAcxKPlAiEA1XQ80Ddiykz7NfhwUgVbrlNk1XzwNrVu7sxDTqoEXIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EnjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmph+g/+NeXfPtJHxzcf8uunY7AxtzFRr6VjncOvi1WIlxG80nuV61rp\r\nFImH0MAc8IR5zDxPGbNlOvzyr2kNvKX1KbB/5uyWrIn2FUYN2Nd6KVrFecA5\r\ndDoRLrvR/zojGG8uEqI2gscUSyut1GVYIs2nDCDQwVzVpasKY1n1eSraaF6p\r\nLztaZB7qqT701AvyDpwWVkkZgFslH0qTi8iZZw/HXc4mnhaS91351dg7+zcS\r\nT4e8y6etNnlKQcu4Vzz/xpNG+lba9HBrvjZ3aCqz81WlvWIpbDfNz4+tcXB0\r\n2yO0kexGEhuNlppp2SQG5NxT0kBR/mZ9N8s2eFpdJJAOuWARIFs5sgf0kB8A\r\nXTQl2Wt0RxiTpKzMe6is1CKtjjGKBiC/mC80YNaR0ENJTkDZ4eHIHoNm23oF\r\n8dpTdttBbssFhHHzIjXqDyHy2wkrqruXxD3wmiph1nCPF7Whsez44oZ6Yzar\r\nsOenU3tMa/iZAjwCGS03uDeJJ1M/xJMSrZT1fvvgTrgkhu0e0rzWYHZEj8ew\r\nHzAwdmddd3yjMyeZ3O2X+RcIrRd2BHNKTZVqluSqDUo/reaPP4AjW4WVo97Z\r\nB6rUxqXhp4LeEzDxgCJOoGlaZjJHbHkk92w4UMs8iVx7EFQt8zkeNPU1Ie/l\r\nzFwzboNOs1ZCIBN/AbfBALPAJqRLAizLcuI=\r\n=CNwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f665d9454e06d217296aa1a2064c9c67d3fe2759","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/rtl":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/shape":"15.0.0-canary.c3924efef.0","@material/theme":"15.0.0-canary.c3924efef.0","@material/button":"15.0.0-canary.c3924efef.0","@material/ripple":"15.0.0-canary.c3924efef.0","@material/tokens":"15.0.0-canary.c3924efef.0","@material/elevation":"15.0.0-canary.c3924efef.0","@material/typography":"15.0.0-canary.c3924efef.0","@material/feature-targeting":"15.0.0-canary.c3924efef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c3924efef.0_1658341859461_0.5764970801035385","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/banner","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cf5c5907c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ed98ab313823f91c8a40cdd3b3451a4728ad1818","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cf5c5907c.0.tgz","fileCount":31,"integrity":"sha512-ilXbN7mx4FOb+nYphtW6Yu543dYvdC9ve6MB1fmXI/JzS8meftA47CtkIYtkzAxPgDxage+wD54LIiouYIu3jw==","signatures":[{"sig":"MEUCIQCQo4XQQTVZ1/HJc4ZBCqJTFm7/ALviK4EvikzWwaRpogIgUEtqC8RmlUSCdebMD4W+Q2C/sdNg2KbOFIOmdQfC/9Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HI3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmru2RAAjyB1HAyWuhtIlNrzsgDLTe8EShFlNBzz+e5Ch2EB+8p79irt\r\nWYk3gtnX37IoFG6pkhj9H/TjxI7FJTOLQ/HUG0OH/QSdnr8TRhL9/1cCxObl\r\nJHGkiZ/qAh1iBWPEreZ2zHrNBmO+lXmYpa78EppZGDa5Qxrs6Us/hcXHjSEy\r\nwxrlKvDfd6oSxwrLq6Jph+tgi0B78iSKMeACTIyp9d0539mLlbuTMmu3H2me\r\naGGgOouzrnQ8lrisX4mcjTKldt8fTDZhM8oYGCO9KeKU7w2G044rUv/+uDEa\r\ntH5w5PrGYzcKEOIohMykgcal3m6riId04BN7Q6wv6ledhK/6jTuGk+HKEC6L\r\n1xhI+mMfTlCAtltasc1w47NYX42URPeuScK9+oV4otobFC9ZELOc96E44mmv\r\nBXV5ikPvIQfflkasQUeVL0Z059Vosb9jBdwhpvw7MAngF2TPoV7u9YdaDCMw\r\nKasXYDaFHDrOfugTuxX3AUjBXMB5v4ag3m9GztkBg4DUxpdn+DR795vRAvVF\r\nNOFfE18B/XD8x1Z2C0VpX2cZvX3UrNwBHDn6DoeRDn2q82SroI/nvH1luX7E\r\nbWGaGW2dvJjNSnpSeln5KyL2hGM8nahZsUqMF2biW5PU1n2ljktkvTLuz5sJ\r\nW06VxSuXRPAvmtUBqzU7D8yQwBoq4XiPaXs=\r\n=W+RR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ff18947542e40ce8532c2ad78551ff4e74f9d647","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/rtl":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/shape":"15.0.0-canary.cf5c5907c.0","@material/theme":"15.0.0-canary.cf5c5907c.0","@material/button":"15.0.0-canary.cf5c5907c.0","@material/ripple":"15.0.0-canary.cf5c5907c.0","@material/tokens":"15.0.0-canary.cf5c5907c.0","@material/elevation":"15.0.0-canary.cf5c5907c.0","@material/typography":"15.0.0-canary.cf5c5907c.0","@material/feature-targeting":"15.0.0-canary.cf5c5907c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cf5c5907c.0_1658352183711_0.6776323265830515","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/banner","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0617e2319.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"470dd7248b2f0cf727fee6cb1619dbb6aa459fee","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0617e2319.0.tgz","fileCount":31,"integrity":"sha512-+ALv+4gvwvtWa+Irtt1OgV/xAIo5b67tEFY+uDoMbO/jkqOYn+vs5DlyVpt7wjJ/qQXhNGROptyDQR/xeA9H3w==","signatures":[{"sig":"MEUCIQCCraJLu0LCC1Y/9I2DfzeEyO0BGM49J6yD5ajdD/tOjAIgQbX6BCgUSNd0/WVwgq4w7FwLCYYLiLH0YNtVIdUNqYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HaGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP5g/+KnX0tIBug/Rh+KSb7p2kpsL+xuIBNbBfrYauQzQ53gZ1WgQJ\r\nsO7E8+nQgBT1jFewb+CzAkD1xCcTeHrZAjeEkHKMAAy2ROqNOOViuDn68hvV\r\nQJThsZQ0gzrzXQQV4wa+FWX/IBwILbXiKolbDK9y4xVwy2X4tSyZVFNL5GAh\r\natwlf897a3wNxnA/ogEaHx1ZpLWy4vi/jd1EPiou6TaKVFN+3myzKVBDRo32\r\nYL/aS2mygk6PU8ztfMi1LFwPmyI3oDdxy+cR5EFS9CqhOCNPwssUzhFd7vBj\r\nHZLkBSLRjiIRI8L4RMPZPX6V42QLrCDxYJlXKb7Hg3664g2+NqMS7cI4Tb6H\r\nqId3GJ2ZvgkCMPww2ixYiWhmpTACCBDZc9kAWZrPX5eKg4GF4J7kKF2fNYpS\r\nzDW25xvIDYuRRBbkzIWNoYmKREn1Q++8axKKJchxGGLOr9RmGJeeIrXlQkl3\r\nzVipftPYuIQTc61/7Q7uwvsmOWgj6VP+cJ3+/lPswhKwBiBNrrPh/8mklEsA\r\n4+IBxZ94G0KZC/OJo20oeY683I5gewFZPlDDrl58rrVvHMRAotY01aGwKfyr\r\nOASw8ellGvOQfxYs67mcN4dficjtE5GNgvMJ3mFs6r+hAgtUAyuCA02wKUuh\r\nwyIX3G12uc+RoiDvjmj4w7NCfrsRILXBJIc=\r\n=vgRS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a4d6efed0d00cc69adede24744dc368da0b2c897","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/rtl":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/shape":"15.0.0-canary.0617e2319.0","@material/theme":"15.0.0-canary.0617e2319.0","@material/button":"15.0.0-canary.0617e2319.0","@material/ripple":"15.0.0-canary.0617e2319.0","@material/tokens":"15.0.0-canary.0617e2319.0","@material/elevation":"15.0.0-canary.0617e2319.0","@material/typography":"15.0.0-canary.0617e2319.0","@material/feature-targeting":"15.0.0-canary.0617e2319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0617e2319.0_1658353286046_0.29206863393588733","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/banner","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a743b7967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d7073636a9f14a765194b4fbe0a5cb4472873988","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a743b7967.0.tgz","fileCount":31,"integrity":"sha512-KbliEmFVrTv5WVpZ3UPL4sSZn35Ko5xbO53+N6lJK6jUkHzKdrt/B8YEu+/XnQX/2TFjUFRkvR3lkZWI07gubg==","signatures":[{"sig":"MEUCIELURwnZaz+yW3XaUs79/A8oixzFcRSKjTYyT5nNST3sAiEAxoKMKV2X8THEuzancW4/xeEeMmovKbVfbJFVMWfT28o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Hp9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNWBAAheHkbGGyUOap2F0XW/a3N0pDX3EUSRfFk7Z97ktb69LufR1S\r\no2gUleUN5GA4pReyQ77nXfL27gi7yqjdTPBkryVvob6a6AuBu2kQ+8CY2sd2\r\nemwZ2ptr0IB+TGtFBGLjklhyUQJKb/S9VlhnqrJ4QNIaC+uW0VokHLThCAHv\r\nWx7AYbHhwWDsGRBayUqjIbVxq2kwRUA6VG3cK/HoHSdvQgOvEfXX4rUGOjdS\r\nmMo7i7Ti2iycoM8hm0v87v8zQefAUb/VCo7I/k8iBUB3n6FlXkh5xpenRtTM\r\n+xlW2u+i9vposHFLz3xX8J/9sFax423Sq50QYi0FEo71MLjxaiSxqe4foQEJ\r\nqJbwgkQLcMcSisX9oio3fu9FEX17QU4tvTpk93ry2OpKLJPKMOU6QAr92b9T\r\nHsPB14MZ+4OTOHS/SF4BsSI+Ns4Ffn5kHnoopoWGiny/hp4OI/D4wxjYkHL7\r\nQzAfz/a0s7ODEE27L2NbbgrZo918Ncl3soFBaKUsb8AMi+X1nGbMzJ8Rrha2\r\nfMSmnodgu84BsaOokmmUNK2FaPWHkdG8McX9++4Lu5FylNXdZ10AOxwy8l4i\r\n2sFFDfmH1gLncUq8zdomeCEP56Pgco+KA2xUWXT3HRaPkw+CuXrG6pUGAXEv\r\nE2kHWxIYngrqHhBdscRaDwxXBY3JgChGR9Y=\r\n=9gmm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6fe7cdad71b01dac35a3d815662020bebbe50e23","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/rtl":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/shape":"15.0.0-canary.a743b7967.0","@material/theme":"15.0.0-canary.a743b7967.0","@material/button":"15.0.0-canary.a743b7967.0","@material/ripple":"15.0.0-canary.a743b7967.0","@material/tokens":"15.0.0-canary.a743b7967.0","@material/elevation":"15.0.0-canary.a743b7967.0","@material/typography":"15.0.0-canary.a743b7967.0","@material/feature-targeting":"15.0.0-canary.a743b7967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a743b7967.0_1658354300787_0.9803263527234893","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/banner","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.69fd619d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41507f580bf20c7354e42e0b9c83f6f380df0cb1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.69fd619d0.0.tgz","fileCount":31,"integrity":"sha512-w2I4hpRm4Sftc1CywK8VUbmPvivngod2BoopXzfc1og9Vj3hU7PMlYpowiDuac3yHvjN8RcXdHXtYRMyULhZYw==","signatures":[{"sig":"MEYCIQDOn6V1OkmkUIlYwDvNnNUjH/k3WUS2redBueVa3C2+/wIhALkxCoKNLHz1gqPN6DEsIW02Ue+14okweH+BO8VbG5A8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H1WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMcQ//fbx5DYaIcgMYeYuKbZGuiiucr/qSW5ug4TiidutgpJ4hhee7\r\nx84QkxK3HhEA17d/LdOlsd2n5gX15zjhQyo6ieC9x+xHrTka82DwrlTIu+um\r\nQ6su8sU/OlD/m4oQHHpZ6qrU5DdM7TIabJMSiWt6cK/UPgjQTADYe4dmh0n8\r\n1KxbIl8puVxbfoeDwkBbyYwY5fs50ApX3qjXs+BF9rIOmK8QKyYnCn4sBsli\r\nYUw8IRqLqGNnytBg6qG7o6HVXqTjXVzHPgyMOBElT6V1WveXi9r4xzi0rtV0\r\nVqRSZNNGAB6B9eaca4xKWzs16zANDZgv9qR83sc0hz4xumAjFoogywhDLu79\r\n8JDS7ApRGxJdOq+lKstGGCHWiEfrYxf8XWIErKTPri+iuCSeW1pT6rT8/3DA\r\n95BRrqXThsHsOq6xbTc8vT1ybPzKNfrYb2wz45L07c3RBx8Q5E6x6D35n0WY\r\nTAhc7ztjyDQRfkdy9U9QIdQYlSiX/6b4JpvxTMkMTgCeG3aDqSS/tWxuspHI\r\ntvSCF1NBfavLs0Cxflt29CfTPLSydGnAWAbzWrc4OiWFSx9QbButys/Icwo9\r\n4oJaG3ewyFkJPe7/3UU1iFKAdpc9HXMZEelybOMtpZudnb9MxRJ13+SAb542\r\nb2zyoTBvEI45HqGzIldJHetLYMUwRQWB5tQ=\r\n=lRJJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8982644a21769a71fcdbd9d8a35d87f00bf73b3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/rtl":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/shape":"15.0.0-canary.69fd619d0.0","@material/theme":"15.0.0-canary.69fd619d0.0","@material/button":"15.0.0-canary.69fd619d0.0","@material/ripple":"15.0.0-canary.69fd619d0.0","@material/tokens":"15.0.0-canary.69fd619d0.0","@material/elevation":"15.0.0-canary.69fd619d0.0","@material/typography":"15.0.0-canary.69fd619d0.0","@material/feature-targeting":"15.0.0-canary.69fd619d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.69fd619d0.0_1658355030233_0.8262986982900462","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/banner","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2a6ddc1cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cbe4b5bf72e266105b93bd7a84b20282a7e74619","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":31,"integrity":"sha512-rBS5CFVquGSByCqIph164BN5gKCGAXY4rcZDDVXO6cJ7Y5USzT+1IC9TNPey4u/303soX8gKYxLvFpqnJnZumg==","signatures":[{"sig":"MEUCIAqxO/Z6rNXdHxxVkSEWqgk8z1gw7iPSBfFZolQU3n9uAiEA/H20YySs+jZsNgNxz1RdqQm4V5hWqjdrpXb1VXsYCnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AVlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqPEg/9HHTNIuXg+2pSTls1ZhbSpfrZSBHyjamTuZdIGl+V7eC97BUZ\r\nxbZ7YDFIrWClOwaD9hjHQr2i7DDVg0g4WwNFJSbHS+ZWzCpwDODXPKn5ymFd\r\nQd5UWndvO9lxxyHNRr0aXFZrAjeQAubvFmqHTZgzQxjHqDZqzkV50WKctMQj\r\nXYTgPDYZZ7b30E8G3auC+Wlk29YpcAUSnRlpr1FV3fM+z8Kk7bVJJCB8t5X3\r\nsJV4tsZcdL0Lq775wmXJYq9mGwNqhu2fAg10Mh7My7jLzBLEiyMdJjriHrwv\r\nLOk/FyAAi9jIe0LSm2WeLPrKxbCOJz5HlW8y2dwjnUR4d43nx05ipOfsc3wp\r\ncVkISY30Vshs+7P0El3OqM8ipv4t4t1cjfY6gC9VrcASUDbna7lhJTsJJgG5\r\nThMEJGnARZVwdSaYyIeYSwYMyO6371/vocGruxqC5B5q4XeW3g4bMh9FKFKu\r\nKLLKtb34iWfkm3+Hbokl/GS4k8HRkBjUNQWLefXZUTrcrMWJPigWDA+2oqR0\r\nHpgTTckquZgDgHrl3FtiIxm0I5r76wzv88oo5+6TvRmMkwqVdiptTTMIfs7/\r\nqphM1pN3nkynjXpJSEGVI1RLUx9phH/UPf1+Yj/z4psc580jFfIX8ViDfxqQ\r\nMqotUshZYrDlHP3BNnII5GU80IIWtzIug5s=\r\n=J5J1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0e951ea9d38f3d449f24bd1d8ecb0fa70c0da462","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/rtl":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/shape":"15.0.0-canary.2a6ddc1cf.0","@material/theme":"15.0.0-canary.2a6ddc1cf.0","@material/button":"15.0.0-canary.2a6ddc1cf.0","@material/ripple":"15.0.0-canary.2a6ddc1cf.0","@material/tokens":"15.0.0-canary.2a6ddc1cf.0","@material/elevation":"15.0.0-canary.2a6ddc1cf.0","@material/typography":"15.0.0-canary.2a6ddc1cf.0","@material/feature-targeting":"15.0.0-canary.2a6ddc1cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2a6ddc1cf.0_1659110757455_0.40625291207643577","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/banner","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.86efd56f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc3b59c4448d5d9252e0d2a955508d543a993dd2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.86efd56f6.0.tgz","fileCount":31,"integrity":"sha512-+JAS71xGmUGvh1rK08YeA3o+qpMf6hf1dkEvye0uJMP44h69X0qhCw/mmqskdAPMH6V9TRTVkJ31tRv5fS3kCA==","signatures":[{"sig":"MEUCIQCVVz3hX3uT7NEHwAvTitT0ubCPa0hUYrGqPtwH7TxbbgIgHsxrYqt19TTyfi7Cy5bj/nyYhnSitcC1IF1+4noM22E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TjkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgohAAiqb9aBmxAycKflRrIVINiRnb2GxXL5ntrqT6BsIJA8JeWK8J\r\n8oYBdC1RpJjuROd/gYh1ZdchC5YP/ZcuvuokleG+b5xsDRohmhQq37Dlfw9L\r\npnswIPqMqv3xConYjbO3ulVt23z8LVohnK/u/DgIEGexEtnQzG1W0Wh1ldEh\r\ndcYRPefF20aj36hmrBRT+ut2MovybMkzRCJOWtOCzf85UGv0tcFy95J2J6iz\r\nUM9GF6Sq+SZENfVvYoCVzlxmb4JcNStnpcEVZ/DabLskncjowViZ5yTNBgmO\r\nWr2Dbd7jmI7fX1E3AZmCngspMwz5GmA/BGQqUrknG8qzvawdWS+FWrFvPuMN\r\nI7MWoyFsZ8u8wXIV9px4t8OW4O+PldoG8DvSmHTA7VTIKdptOUKCuzaoI6sz\r\nKrZd/HYE5Wi7zRkNzqiAzTHoeS7zWNBgY2xtBGMKdVZkvBhiJoM8Q5fpFr9P\r\nuhUfs2TGS7dRmlE4Zsrez8W3HLu6g776PGResCKOjpkM3gpnjwzdJ+m0lbIo\r\nz2yV138hBL7zThG2cpa8/IbykxVOsOtxZb2puZ5QAXMNEgHIf54rHfqwlNm/\r\nKbyxXrNvzy8Np3KGLLbiBK2QrUMbJyofnbWzQ7DUKhUMVevJAG1AXINl+wTm\r\nYo1m+FcqDNUrmP1p6uFaK3GL/FKW4vnEHkg=\r\n=S1S1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a4781ca009f9a9b59c7dfff5df2d23bb14b9de2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/rtl":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/shape":"15.0.0-canary.86efd56f6.0","@material/theme":"15.0.0-canary.86efd56f6.0","@material/button":"15.0.0-canary.86efd56f6.0","@material/ripple":"15.0.0-canary.86efd56f6.0","@material/tokens":"15.0.0-canary.86efd56f6.0","@material/elevation":"15.0.0-canary.86efd56f6.0","@material/typography":"15.0.0-canary.86efd56f6.0","@material/feature-targeting":"15.0.0-canary.86efd56f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.86efd56f6.0_1659451620396_0.6636936994397966","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/banner","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ccfc24d19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e983b91f54737477a1897f75c34b9fd34a6d6411","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ccfc24d19.0.tgz","fileCount":31,"integrity":"sha512-8keEmoGbfisUdO6IBJOFipaoSYvowvF/b+xGMuxa4SRplV95zltzl99IAkf/rNaJWwYiMPtoTLjocrbA5BkgaQ==","signatures":[{"sig":"MEUCIQDhr5ZH5m1kT1+Yr126wmLr36mcBF7TPcBmfN3DqZRWKwIgX/zx0O0iSs2TTOUkf+CJopciZn2O1iqBP125+r+98F8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rsYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoERRAAhqY/W2LFuNSD6wiKCXl+EG0m0qQ+Xhrdc/k782dVQyf0Q7eS\r\nCed/SYrVxIjda16JkveROpI5Jmq3HcoAuNeMkvMUkTn3dmSNBWM+7NdmD2ZG\r\nkXdn0J3Brpvv39dj7Uku44m74qU4iJz7sHOt70HFbBnE20voVnQqEL5Uyqg3\r\nkvzE2/VtYVXjZl2fN+lEuAVnTVR7IDGroQ/MxrTsBvXlGIV+yBFHPywO0CdP\r\nFVLXR5i2lwTVcsx5LeyFL11UACqoYRkqSW9Rvwa4Fr60Js5BEr1MsVPul/2y\r\np/7j8W3Yw2FKi6P9VnH44jneoRpuwm+8Rx39daoCys3vpbw/exQ2lMdxE2/5\r\nUPDC6eByeofKgtVgl5HOL56qgjDGoVOqGoAmvdv88pFp5PIFetuiI0XL8Df1\r\nYCAJNkqM2Dz1F984ryeR3W+2UHu3llq1E9gpQao8mhaL/lzGQWIambrDrsxo\r\nv7R+O/aBY9la9A1YXrtQhQJmlxkYGcG3rgv0Fo4F646IoB0HNHvAGz3gxTcq\r\nAMvAGWTQRtkUnWb6FVcTogl+HZzEYElb7VAYZJ7Db3dKoLmL75nvkN2KGbYz\r\nf6Z3zPf4tNJEcBdfSqedHmVemGKCISBtRaburLoiP47KzTYZfI9DULBWfbxt\r\ndc9lPDb7TRKUoAtLdX8Hxwx6uiV2osqRT4o=\r\n=VqQq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f790058ff0b4b30289ee965102aae1ca19654ddb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/rtl":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/shape":"15.0.0-canary.ccfc24d19.0","@material/theme":"15.0.0-canary.ccfc24d19.0","@material/button":"15.0.0-canary.ccfc24d19.0","@material/ripple":"15.0.0-canary.ccfc24d19.0","@material/tokens":"15.0.0-canary.ccfc24d19.0","@material/elevation":"15.0.0-canary.ccfc24d19.0","@material/typography":"15.0.0-canary.ccfc24d19.0","@material/feature-targeting":"15.0.0-canary.ccfc24d19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ccfc24d19.0_1659550487993_0.20878356355251082","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/banner","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e4570146f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e86fbbeedd22e4dbd89c5c92d3b1bd51014c6b67","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e4570146f.0.tgz","fileCount":31,"integrity":"sha512-NOwQFVOT0Y8y+g9Yr7/WjBQcX4n8hMLVMeakQUkW4cvwS72NQTla7OLXFDxQZaXXZuQAqMrXSYahCxSPYnFayg==","signatures":[{"sig":"MEUCIBme5fYZ5/asT+ZSm5Zpu93MpiHz6MApK/mbYcaMJby9AiEAugwXxOImth6Foub7nmp/DzEWMy+7ymP1pE4Y28PTgT0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sF+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnCA/+O8ylJ2H3Fy0xBWGMvKWS6FhX6zgJn9L02RZP//qvs/bffho4\r\ngRtnkdqK733XjojTpfODcWgVnQ64//4mjeiyIhFWnajkG4L7SDkXpcTNd+4Q\r\nN4FhafO4qd5GJt91d8Py5opUQjzYLDu1W2erHfKGZQ5NFPfq9ZlNjiwCRrnD\r\nw0k1QCXOpJg2AIt/VKasCUzWPUwpbba21xscbkUiuQuMGx6NLuU2Ej7uZ1xa\r\n+qGPBTU55PRF1UV87wfhQ01Pyr/Nt+Dz6I4O/fC9Pwf9xPr0ghAtd0Z8/W37\r\nC45fZl1fhFpFyFSLLpon+T5Cz5dPnMao7CHV2UZgFAVKPoi+9OiKWKkKLIYP\r\nF8IPlamyWzxV+L+lCFZMoFcmdSOxwqmLUsXlUnCp3fV+hji9Z+XhM1j7KvVB\r\nHwEma6JprtMa8RP1ZqItpwTHnld12fh9yHlsw6lYDqsLkCb+euzvM4/bX4cR\r\n3ddUvW3AwEeGTg6pgFiCG9/YdBeJoV0cbgMohsEvnjGakhVNHgDIHhfHuwm1\r\n3uvfNKQzPoHbZQ0sRrdYPnsp0pcb4BdiJJBiMeHSceFe5XAafFvit3kVr6uE\r\nRAaDCvUnfiwoa0lkY0zjeQzYSvkhW66gyzi+OmJc1foe/oY2nGdQktxJxkah\r\n/dd8m0xinJpY2ej89KU9ajQkNf0BobhEdbA=\r\n=h2Xd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e80d690ce0a868398025065053615e866dc51ada","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/rtl":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/shape":"15.0.0-canary.e4570146f.0","@material/theme":"15.0.0-canary.e4570146f.0","@material/button":"15.0.0-canary.e4570146f.0","@material/ripple":"15.0.0-canary.e4570146f.0","@material/tokens":"15.0.0-canary.e4570146f.0","@material/elevation":"15.0.0-canary.e4570146f.0","@material/typography":"15.0.0-canary.e4570146f.0","@material/feature-targeting":"15.0.0-canary.e4570146f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e4570146f.0_1659552126627_0.8853324520896284","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/banner","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6683a36cb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfd354c3707c197b617abaa0d0a60891aa9bf61b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6683a36cb.0.tgz","fileCount":31,"integrity":"sha512-nIf0ZsLVm5bN19xE5BEEG/xpNs3kY3HTKLy7cX6pX7vK7n31ErHSwf+ff5E+l/irVwy2xavS3D7eoZP2dFbaKg==","signatures":[{"sig":"MEUCIFD3LCyxwLEo3BEaQN1lgxtMhAe13yX8Sqj1doSmatDWAiEA/qGUNh5+gvuFnJHmz5JzC8kB/nHOQjDdVXfhIizQWAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6srgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0RQ/+PxAuxtnKrM9zVkEL8WoTEIchzwN6qUHEckadvBygt8cnZwx8\r\n8XEyzjJreEO9OUz0sCjRU8XVZ0Di1uCl9zpn8SJoRdZqCnRNGJ9z/1VQ3e/X\r\nFDqQLWMeqLBaqNoqChKnnnYvs2YBM3JDf00kwwkRlhQIJIUIQgxj+mRcBZ91\r\nJQMAymKbr+k37u2Qor1DsS/9VV4mL0cgqrirS+a6E3gF0OvOy17ldZiqtfoO\r\n6m9hnEx3mOfRv85ZUVmXCLar8oD8o3+OKAIIJ/lPgbbhIOCjNgMH2cZFNoRZ\r\njZQTcQ8D+Bxi3Hv38BAN61ywnH2iYOCM561yda6ogaV49MKtncs341ouBlJ9\r\nYvvM4gNg5BkCLDV0NLL153JwI996GL5VTRth6RX7xLZ8Lo35FL09plxYwusd\r\nmkYjmri1bCLZgmAIEo/gw+BGiBQm/vOF9htqvZ7V90cpT5k6bv7A8B+lEyKZ\r\nlSMwC6AwxzfZanhQBvCFIPQuUO/3uftrl29IEVgbkWh4pMkDqDV1XkfonNMJ\r\n7TrkeB7nlxlJn8oMjjnyVG4LviZyIErYjZg9XgoZAwtMebj1DdgA5auf1BCE\r\nJlyqLK0RkgQNLzVAgtTfvKUZhxT3Xk3LM18Rxh/Bt6lOEDg+jtwv9XdgZYbQ\r\ncjJxUIlgZjT3fvZuPrVB4qLPAHqmlngA/PM=\r\n=MDXp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8feb0b9a8c5151a18a06d282cce87d861ea12e5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/rtl":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/shape":"15.0.0-canary.6683a36cb.0","@material/theme":"15.0.0-canary.6683a36cb.0","@material/button":"15.0.0-canary.6683a36cb.0","@material/ripple":"15.0.0-canary.6683a36cb.0","@material/tokens":"15.0.0-canary.6683a36cb.0","@material/elevation":"15.0.0-canary.6683a36cb.0","@material/typography":"15.0.0-canary.6683a36cb.0","@material/feature-targeting":"15.0.0-canary.6683a36cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6683a36cb.0_1659554528250_0.7512667307827505","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/banner","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.10196647d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a537c92a92e444915a62e6816abf1c48eeb3fc6a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.10196647d.0.tgz","fileCount":31,"integrity":"sha512-fmIJpfS2ZIMvFuWBiBFYzIToblpJ3GDn25d70XezpRmYE03xsz4IBDJlwjmNpSFOn07Zq0UP2U6M4caDLxiJ0g==","signatures":[{"sig":"MEUCIDXHjIXkI7CF2L7FfqBXD0pYAOSgRcQYYOpfUbdaDL5iAiEA9FyGg8y65o4HVUUxj3nnV3sj8VdNmXnNus8/crN9Ei4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u63ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcaBAAke+3Hw+TMx9mP4q+Q3IIOKyR07zykFTBRJTdrdUD/wzuGYbt\r\nV5DRjs/iuJ+SbdTXT/1YC9sg7GQxbuq5lbHafHBHDVDcaMlyTNfrAgxgygTS\r\nBCdOW0uY3ks8PgxR4hvBLPgMTPFk1WYVLuDnvRCgTgcqD4R4t+bbP3+u/sV9\r\nmNGM3VeXQ/njiMG55gDafket1T7gArHszSkD4P96z6jTY2jzGr/H8AL0YYaR\r\nPWNEz6KYtxTlOzHHJX/HP+6Psd0euO/FANzsvm6fCma3swMwinNqiVqS4Owl\r\npj0K0vzO3gVjgMzjpHlNP8niw3Nkc2AN5s/eseLVn5t53w6LF77Dxrklnm31\r\n01rN8rq/BApYIv635B6C0FPlQfgiIeWPLZ97y6JGHW4uLRj+NmICoRSa8vuR\r\nQ1AntuIbX9rwvU/wuDJ/eNZhKE9qSc9N+PptOd9dr2WQ+RVTpk8asg9V/RNa\r\nyZWBnlJKX6Ie4wP3zp7cOVuf2Kd0XsMUl2piNbBtn+W5aZ3YffFOlnl49rRF\r\nhfKrblYkfqQyWIHGiEgP6smHGQ6N61ghsFY/7j5FR9N6UlpRxoOxqiYC62JA\r\nczCUt7GR3ejynv7hWgXcW+y9CRH3qmhHFmgvODUJY1pFB9EAFx7gvuVMII+i\r\nIw/yZFwb5cOBwClJcgZAJhJ3nmsEbRhTubE=\r\n=VIid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7a708dfc09b3443c565ce80a676b159abcec1339","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/rtl":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/shape":"15.0.0-canary.10196647d.0","@material/theme":"15.0.0-canary.10196647d.0","@material/button":"15.0.0-canary.10196647d.0","@material/ripple":"15.0.0-canary.10196647d.0","@material/tokens":"15.0.0-canary.10196647d.0","@material/elevation":"15.0.0-canary.10196647d.0","@material/typography":"15.0.0-canary.10196647d.0","@material/feature-targeting":"15.0.0-canary.10196647d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.10196647d.0_1659563703329_0.1673892273106139","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/banner","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b20d3d73c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37bffc93b50e197f89fba7a01a4323b379524b04","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b20d3d73c.0.tgz","fileCount":31,"integrity":"sha512-v/ONG37em1aXAXysIHD0fTHGw5FYC3AGV1MNQ5if7Z3wceahnvPsqO+agR98930PU03ZCflFf1TfkdVzq/4KvA==","signatures":[{"sig":"MEQCIGqpnWCKw8s+c7sd4m4bffHyIsLK1RcEfTm5wv9zkTEQAiAJLEARdTruKkRrR+zg8ddDXfPprzQHyhmsdjokLZZI0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7Eu5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoDhw//bG4l4hdITM8runK+hByv/TRh/2D6C4lerUxdYBt8bqb1XTKw\r\nZMk+YHPnQrTd0a0jt3WLaG0Ou89zhJQ6u95AuMc5CN5w6vQ/Ex7Q6AM29009\r\n2huqxROQjcgHm+6bhDr2J1rjN/Kt8+L75tle4Xt2I543b7mQaem3LoGyG3WN\r\nVTtHiBc4B7PkEd+7K8IdWyLcKhUgRia2H1T+RyLy8kIoZc+kBWpRbE8/0fdC\r\nixmx5DLmtoMp6ogGRIc4NuO90iCUj6j/37uxFsh1P8k+mezrPeNaHfkbmaJa\r\nbwbqpPFj+IC3STUS5YViATn0y0I42odyr+5UaNmQCd4F1gjJuA7NEPzaPaeQ\r\nBHUDT0md1c50NjYtdfaIOPbwTzzB+6hnMT1BKD0rc8hSsZ/7HqJDSDgpcJJk\r\nmHb65l/hLZrWxI/e1iZ8lrooSELMaR4c5zhkjoY06pRxSc3Nr8uayooR73hk\r\nBJ43cULl65DNIL5ZW6mH7MdLaQWKDHc6MNqdWlJwPJtzZ7cHWIPE9JFl5lrk\r\nn5rDYsy4GgPf/arIlIO73jUuoETj5erMWNNC98eCjhbNvF7+UGBLchbnoVtQ\r\niTnmgg8HN1M/OyuatDXHqp+EMSZ/ltd2La0ut2B4YVtBr2U7vhXrKCKMf/3P\r\nxqpULG/PUj8Xegomc3LtpFtkD8UsOl7djLc=\r\n=7Lwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c869b5a3ceaada6bf2ec164c65f1e4fd88a0e7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/rtl":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/shape":"15.0.0-canary.b20d3d73c.0","@material/theme":"15.0.0-canary.b20d3d73c.0","@material/button":"15.0.0-canary.b20d3d73c.0","@material/ripple":"15.0.0-canary.b20d3d73c.0","@material/tokens":"15.0.0-canary.b20d3d73c.0","@material/elevation":"15.0.0-canary.b20d3d73c.0","@material/typography":"15.0.0-canary.b20d3d73c.0","@material/feature-targeting":"15.0.0-canary.b20d3d73c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b20d3d73c.0_1659653049460_0.5921992674329433","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/banner","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.47c0c6b1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5392804b7ae3409bb8d6aaecd969556ea46f9f6a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":31,"integrity":"sha512-9JZquNMNAvJ4bc3fq9YjNaTcvChaevA1bL8sx7QJ5tABnERN3pSGq+7Pz+mkWfqZq32kEiYIcnl5bAGxK4MkCg==","signatures":[{"sig":"MEUCIQDPNQgQ1itTwFXpSPm9pSe5narWR/189Bl1BewestU00wIgZIz8J/C9aRZryFOX/TluYCXBhr8h82LmCLrJMtCnbJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nujACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpwcw//YtYBLpIYzPiZruupMC9SjaYywW8c3WOej9Cpms/8FmUpMfkv\r\ndfIbXau2vdpwdvr0KjUJqTbFgIUSBTsLN4Wqt4+xqNcA133t7nVJR8EYvGlE\r\nCr2QKpk8I7p+0KdDb7fRdjlIZLUVLXONz6Unc5mUrGMTwXT/VwXC02GRL1Jx\r\nK8cL1kkBEPGvcahcWD0PG172ts/42t0B1lceaPYaAriaMbC2aRhgaVQJFXIt\r\nwuZtCuuREfs30vs5snjtadcKzRm6Ggz7PKfC7UWoeQq7IR5mER+AuPppnQM5\r\nTeTKASmZjA6jDaSdxHYkACZFcmEzjVwR85vJLBYNcB4Wl23fvOJZrmOnh6Ti\r\n2ySBNvm6wCv0pT6YzViRO472I4++S9qzh2hNEfwMy5indAf6lNBEQtXdYYwI\r\n1fJRwE11P9vjJeohRCocMjnhj4JLf2DwoAbE+bY/AvJAlW6zr58Jn2IBBDO7\r\n/CJIGOcJ50conSB87B7ja/F2UcXvg4N23+yHCERCMeoQWG/08q5bZeSOGcRU\r\nrt+fe8imSjrEinaMpPtEuFq6CHJklVcmh7Ddcpy4y0CtYUjJhg8L5vIykUEW\r\nVGQ3Z5i1jCbMuix7ojtzKDk1ZxT5Vnp+gzgORTd9GOgZmNBp10+3mIIpz2+x\r\n8jy00CmoJ/mkQJcZ/IVmw9sH9sLyBSSk7MM=\r\n=PApC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"692955bb2bb9c99ddd9321606e40fe4a56de120e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/rtl":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/shape":"15.0.0-canary.47c0c6b1e.0","@material/theme":"15.0.0-canary.47c0c6b1e.0","@material/button":"15.0.0-canary.47c0c6b1e.0","@material/ripple":"15.0.0-canary.47c0c6b1e.0","@material/tokens":"15.0.0-canary.47c0c6b1e.0","@material/elevation":"15.0.0-canary.47c0c6b1e.0","@material/typography":"15.0.0-canary.47c0c6b1e.0","@material/feature-targeting":"15.0.0-canary.47c0c6b1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.47c0c6b1e.0_1660058531140_0.12436105943272491","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/banner","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0e3dc8e38.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8af3b55e6fc6afa4f3d5142381bb49570f30a7b4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":31,"integrity":"sha512-Ya8UPJZwZan6+Kr/AgLdcd/JC1fhghhXG35ZOAlkV6dB+n1QNi4D7GTIy5xRraarANy6IQG8w20DAHeqz/liWg==","signatures":[{"sig":"MEUCIQDeAYSxyeRS8RU8B29D3bAsOrQQDWq2hf/I4qjX0gRJ6AIgIhO7bi8lJBpJWIszsvRW0b05/coV/5B7MOZJY+aKoFw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpy2A//YYShnhg/ZNY3c+aasZ2f3zcDykmOWb6eIN47OsO7qsguJF87\r\nAbEbz6ZrrORBYBmcqgG/PsPRpdiimhZ2osgTYAhaeBJPZfZLbJpfPVIPtxWh\r\nuSQjEt5k/UXLZ8VvTKTVxxjbv1nEtTMgtlCO3yOnFC8FRSYe8UNYiakzSXuT\r\n1Rnfpm1LPjaZWi4GfHITIF+zAVvCNoZMy+h97R1F/PU/cYg7j0xU8uE15d5W\r\nRpVhw+QEn1acVR41RTewIf/jPjOEvgcjPs0lrapArIbfH0yR2rHbKL6DjGcw\r\nLpk/iXFoNDugr5b0jE0+WILUwSEkETu2ddae5SSXt3Xh8oGjSwMHYaJjGn4F\r\n3Ih5ewMla7+a8MKsz2aIwgyhVwyUC7Gdm0q6rORD/r97n/BI6quO+lwZrn/d\r\nMFkiu9pf0rsGjQrBr5Ej3PG79TlryYzd6Faaodda9A2QsizHusDyDlS70Qbi\r\naFmP2x/Z3XiFkQitM4quf3ZaUgzkqLbNhhCrdTTnMmWzwbipZ2Ol08llN3rs\r\nyJAvo95eI591ds0G3sbONDKIC7XOBlRn5ymFoXdl0edBlnPm+Gq1yB+LwRLg\r\nCXdzACkb7wW0h0M1he+SZ+aeYYW7DrtConci6nEtHybAU1bde9NqYXwRdKE9\r\nWRv3oxy0pyr18Cs60EzuMs2ibBfO87tUF6I=\r\n=gPBA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"51983e03d07e3c1f50454770dc24ff8d6d6f97a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/rtl":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/shape":"15.0.0-canary.0e3dc8e38.0","@material/theme":"15.0.0-canary.0e3dc8e38.0","@material/button":"15.0.0-canary.0e3dc8e38.0","@material/ripple":"15.0.0-canary.0e3dc8e38.0","@material/tokens":"15.0.0-canary.0e3dc8e38.0","@material/elevation":"15.0.0-canary.0e3dc8e38.0","@material/typography":"15.0.0-canary.0e3dc8e38.0","@material/feature-targeting":"15.0.0-canary.0e3dc8e38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0e3dc8e38.0_1660243629053_0.6278107498951142","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/banner","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d5a11f1c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4f565312ffd76ded80686bb9a0c9fa33bdcdc00a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":31,"integrity":"sha512-kSwsTH9bbXb+Ch0hksUvyLWYDP05N5H/KSWLlHHtPMHE5jtoZM2ucFaPhMOu6aqVdQ4XMqoy5zb9hUwXFBu9XA==","signatures":[{"sig":"MEUCID3hFm1N3jhSLIulDzqq7zUJWuHOcQN0lwVmWJObRUrKAiEAg+4EGKqtELb7rSuPTXxuaPP3F2TqEkQMze/U7VHUfDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpcIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8zg/9GgrBlLaLDHlSJf0UNhLlK/WNOJ/pu5itAN/VLvuC/wTynXv7\r\ncqJdeiC5TrPPQg5WvGq2e8d1oxJOMj1PtLmtO6Wsm3wzLoLMLWurA/gTemgG\r\nM0RdSwitJmFPMiqXDmsmx/1+3z3qFFarJfq0F9U6xZQ7O0KGGGSg1aSZVIP2\r\nJRPrDuuBRoYLkCSEgRO3BeCr1yIREyP/HLQPcVbuiVG9NRJT0U0/vh6HNqUX\r\nhJkjBgcmvzkcvTOxCtOMntk72AXDCOWsNpJ1lq/zHpgaB24o+gycAkqGrlGe\r\nv0qaY5JHSjZ4csmxZ/oHha6HPp+7AIpuwVpv4CRcNOc9wLPtDG4zJZBR9Ouy\r\nEtZGUsZGMwXHLB37mTo/H4DtJUMlMPOPybYqdy67jAJV+acFi5u3CiYpUfMn\r\ny/4dRqgnz2PtUhdzirgebfsb6+3FVbMNkXQM4JMqNCPmf2KPJCyTOH5N5d2z\r\nITkFdle/JplXwtDEvUFbEOPGRKYiu4U44qEf323x5WbWb88lpZx2gU93gfJL\r\n+HUodiIRLulX2OCdn+jtKabqBcKyqoFIqtvu6MuUT3eadh38kMPqEzYQlxim\r\nDDnUk5OiCVrKEg8YFL6KR+jHizp67nxL1cUVopLKqeirhsDP5NBp1IrpcFe+\r\nf+jIhz9USRpZLIGsQyxNd8x6DFFWyX6lkHs=\r\n=xSDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7ac71b54192751de3a5469d20cb2e1c30e544d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/rtl":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/shape":"15.0.0-canary.d5a11f1c8.0","@material/theme":"15.0.0-canary.d5a11f1c8.0","@material/button":"15.0.0-canary.d5a11f1c8.0","@material/ripple":"15.0.0-canary.d5a11f1c8.0","@material/tokens":"15.0.0-canary.d5a11f1c8.0","@material/elevation":"15.0.0-canary.d5a11f1c8.0","@material/typography":"15.0.0-canary.d5a11f1c8.0","@material/feature-targeting":"15.0.0-canary.d5a11f1c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d5a11f1c8.0_1661900552254_0.6165277381692196","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/banner","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.bac992a95.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeaaf202d05ece2bc890ee5b291b7773692df841","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.bac992a95.0.tgz","fileCount":31,"integrity":"sha512-GGfc10jNvxi2l4uPw/pL1nn3B8n8lSJbLgSVDrOkpBXFpeiEb/Wx6hcMnQB99v+Hz/u9TYbL1NvZWmdAg2tTtQ==","signatures":[{"sig":"MEYCIQDt6SpHHh/ApIKCK+MsB+j0RdGTWCIpCni02re+jXTd9wIhAI57Y3wZoB8PxcrRW0vmXJJNQTCIxOHwJCRZ8JncdOiG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFoXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9phAAgT+H9Op6apH+O9U7s5tSlh42AVxFkTZBNotHkuYpFlh1WaGa\r\nWeO8hytQX+xP8PZryQHUCCOZu82z3ccwNNGTfkx3qgMit648xogrBiJ9g4FA\r\nw5dNcoC4szOAW/RPrm46dIOCSQZ5DD2Sul75lNJdLzy8L2qebQwC8uWYGFBP\r\nX7rYZv3dynqxAqPBPgm943X+r6FLocs0MKsrbrmYWgVqNlg3aJa6sVGkR6aY\r\n2w71TNV2fBibDl8hLIjjrbvpN7Evnxpv2vMsNR4+/hcJ1cLdKI9/rS5vd8ED\r\nlCDDIOWUwCu2V4h37FDxFXUV+BKjmDHM4CJ1e8+oWf0QH4pnXqFUFXHheS0V\r\nvGV7AO2Tk7Szk1jSK6FxyMgyeY3s/YfxJjfguWBzoAF4WZsIck4Qz6k3lr/U\r\nVwvYU524aZV0cPAxwipHbMgVHzAsPdfSNlQ5UHKMzkEG6ty1uSYNkp4LQTMS\r\n4HQpd0f4GLt6CMNYnd3kuG2v8csWDVrhIh5PyOE6QPSu2xZ421dmwHfD4fbd\r\nWn01QKYl0TBfE6qdmRHoWoGZttlvkNtaDtsI0sZeooyaIMia7Ps6YCtWwZIx\r\nVlOZfwBUUYjsyVcqLErB7Smr5FrZ6FKtoaPqA9SaVHrDwK3LDBdmLoiGjh2T\r\nlZaP1Z/22KHRKDbhrxsZhRbyXOTQpKKgdW8=\r\n=/TfK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b8dc8f019b6b9a7241d55c21925faac495f9230b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/rtl":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/shape":"15.0.0-canary.bac992a95.0","@material/theme":"15.0.0-canary.bac992a95.0","@material/button":"15.0.0-canary.bac992a95.0","@material/ripple":"15.0.0-canary.bac992a95.0","@material/tokens":"15.0.0-canary.bac992a95.0","@material/elevation":"15.0.0-canary.bac992a95.0","@material/typography":"15.0.0-canary.bac992a95.0","@material/feature-targeting":"15.0.0-canary.bac992a95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.bac992a95.0_1662016023353_0.8057101066107311","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/banner","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d25f3404c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff4ac9871d2586cf3433d7f8b691f4d190bdca19","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d25f3404c.0.tgz","fileCount":31,"integrity":"sha512-ZoYvjw68t6dMdE2OjIXAXNO6jK1qcuZiznsLmwP81DfIfEVkNpF3kFCBdIkxF+7IYwSW8G1BUyiP29FUH6jE/Q==","signatures":[{"sig":"MEUCID4OsQGMiuEUXKZC04n/EWhYcRNPM8raaj9mN2y1Fra+AiEA66RBPDgwUJEO9ZpI3uAit4bwy9AkTIw4VjkHOpJYBF0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459863,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH+QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFpw/8DQSbF0Qi7eIvQ+dGpb3v0Rm3sNqLsCNUdlyg53Y/c6xvU5OC\r\nDoc9QwrNSVSxA0mwGAgbXeqoYcb0Yol4tJ1b+3sna+G1Ex047yVEX4/QxvBc\r\nsRpAuaFx83aRhXYQ9uvvQdEi8/dTuNGVbZsUcjQ3/QmdjlqCUO4XUbiyuhKY\r\nLbE8in/cBuvlJ2rynH295fI1VWYhEKL6DDjS5sCbGEdLMxMnEpIMYS78dWdb\r\nNcOZBZ1UU//pOB01/0IRwkXC7srilVFAkU3xqAtx79bTL+L1Ydl6vsEb9+/e\r\nrQ7Oy/Okp9NVYxAsuNaChZKIdX4mt5v1W98VBIVin2rZUPpquC6nasfPryQx\r\nHqxslwRdDPajPnZUMVChlILFv9vriQoq6tw8mW+kgBn9CzIklvROFLandM9G\r\nk6GAZyRhaSnLC9YZ1lCZKqLyX5dL6uV49lQJZ5m1c98YH6hAssLz0hux5JLk\r\nbdk4txGxof1pOQg8SQuJZVG+q+u15OeYo9JQRWFmEE5DIcETUr54HZtwKXBQ\r\npZx6V8WF+r1qb3lF72zFchQMDQ8meHYCYTlJ2mPdW+O1A4qZpQQA2hRvU5Fx\r\nATTpoGOGrTG5dR46sOJt18GOLxw4TV+m5sMo6CwjJY1p6DUPWt0ZfkZIQp1X\r\norqAl5lefR70KVeVI5kwkRMKm7d8AI20dIs=\r\n=w/Br\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cea256990068cc2248c9bed32c4a47fe622a3286","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/rtl":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/shape":"15.0.0-canary.d25f3404c.0","@material/theme":"15.0.0-canary.d25f3404c.0","@material/button":"15.0.0-canary.d25f3404c.0","@material/ripple":"15.0.0-canary.d25f3404c.0","@material/tokens":"15.0.0-canary.d25f3404c.0","@material/elevation":"15.0.0-canary.d25f3404c.0","@material/typography":"15.0.0-canary.d25f3404c.0","@material/feature-targeting":"15.0.0-canary.d25f3404c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d25f3404c.0_1662025616491_0.9126279252769574","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/banner","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.920d8a79e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"80f3668c0dd4d37c6fed70668258db7507c39b72","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.920d8a79e.0.tgz","fileCount":31,"integrity":"sha512-uaENcbeg5CyCrgBp9wUY5V8CqRk/Jedjyi3WfyCPeoVpMpS6Cc0uaZTmnDWEDga9+G/iq2vt6YP9XIyP330t+Q==","signatures":[{"sig":"MEUCIFRkpmCLNSvsSAz9tf5z8yA4kel8H1vW4fx4zBll09XDAiEA5zWgX/DCEZACM8YVDJUSeG0/BATpOUq7eOmm2MPpHS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERR2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhbw//XE2+9TMeRlbVafQkUJPliNgTmq1CrRURnKhSI0mTqro0iOYH\r\neV6SaKOZf+znO06nfKgBaOyGAI5x5/vTwyEfLZphFaYlLEHSOiAm/6H7Zl9s\r\n7Ca51bHi5nZ1xZguaPGwKese4DA5rRF6GunQE5vT7fqnPhzatntmCQGyPCsZ\r\n5/VDGKd2IxSGxo5wxf9QILfRRGEyu081GzchgSE1nbnn5jmJMWN5nutonAly\r\nyNm8WvT0pOhFcAskggMkdUYxASJJDN3GvQJ/PEocg/HHHxWiAv/xjAujIXoG\r\nlgL6Yxbh4N8K/V7L2atYhIX1P4wH0+75r7Glms/9OUOEQ63Dqlp4spPfzYZW\r\nrtKcFHrhKIvqu3sHiId757LURhjaOjtZuP3fqZiOUjDE9R9qRBIPTJcWPTtE\r\nnxh7PNeIzB0IXW58QxUF9iog1a6ijtqkM7JAT7aoYLmrVlK0xn1lpY22DNPt\r\nCwCzpRTFf9dZ1Ecwnu5f/zMaTSSCDHKVUTdTcEI1cAovRA0ctLahPCXNQEj8\r\n9WVXfIIHKiVWZBzRe8LoZRYhhB43mz0/WjTWu9s1yQH8lK0KmZ6weg+kF8qU\r\noVdZnrfFKWinyFRB1luCE0Pvyj5kWIv8vsLsfm+d80n8/1hQf3/lwA5VGCPQ\r\nPCyJinJ7YnqWg7dEctlbuImxZNopgAB+YuM=\r\n=GHSJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"781a4c78770587fd97c25633bf9f137081c35bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/rtl":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/shape":"15.0.0-canary.920d8a79e.0","@material/theme":"15.0.0-canary.920d8a79e.0","@material/button":"15.0.0-canary.920d8a79e.0","@material/ripple":"15.0.0-canary.920d8a79e.0","@material/tokens":"15.0.0-canary.920d8a79e.0","@material/elevation":"15.0.0-canary.920d8a79e.0","@material/typography":"15.0.0-canary.920d8a79e.0","@material/feature-targeting":"15.0.0-canary.920d8a79e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.920d8a79e.0_1662063734493_0.771032660500721","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/banner","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c363f267b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aad6dfb61bb288cbe07e611fa2d5efe2074cf9ea","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c363f267b.0.tgz","fileCount":31,"integrity":"sha512-tFm7HlPlcjQDbvMgQh6vf1Eakh+sbb36gYAKPOtlyh1TaZiSciNo8TYtfIenTWQv0K4urGnQOLew5BY+Kddsaw==","signatures":[{"sig":"MEQCIGxL3vW0jpQ0IRdZ32n+1+sqE4Bziriyy3HtYvBbykMaAiB3XRnFH8XAxHru6rfZlJNMsDTBo3Ns3h4Zht1U1r6I4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpS9g//VDDxakk9+5rx+FOS1FOU2gmUCXeqdLmo2qIIzhBHR2vxi48Y\r\n0nmZjhtVN0IoNQpPN7EfGHBo5SYFj4w2QeAMum9VuIpcfvnE5ONBE5DsCJLW\r\n6gnqjoKJdZb6OLYcVCuErR16g9wCvJHMUuFeTnPyDJ5rUFlim5eSQKrIEPlc\r\nuHLve1WFtMeBKZillMzIVUouPZ9vfxfn4DuT6TjikAZHGIWiBL5KEV1LGRlg\r\nAIkPUKHo49WwWWxSouEw6F+xlqd1eUkV/rxoSafDwXTqR6UxNrYcVdq/LBWd\r\nmVpGWJoPwJKHAkeDf4HrhHmi1F3hIOo+nGh1CnSsai+KqMcV7Hdnia//XtfH\r\n2nnfVM0NS+xzHNzeiiC3lAtZYZYvEkS+j3DZChgY/0EFWKvk9fMI9f/R2iLr\r\nFWjCSa09vV+Fk+Gz6FvIPxvusL42jO4OT9iJIoqHgNp22ExSU2u2aQ+VwhE4\r\n9EiwflEZpj0qjVQOAGGDAgmmzPe8GndCTCpezrq9fI9tfRGdEvthOZio8zpq\r\nRpPMWyXQwYsPTrdt4GoP3IfEniVBlHA+qC3IrpJFBuUeJwhfiV/oV8zgeal2\r\niLFpdx4eMiueD654xxtKw91pFFHq9/HLSbf/27Jc1HqD/r2dHHzMZUQXmHrq\r\n4VTlvGtfap8DuzmcY4ZaKmtiUhc2/q//1SY=\r\n=8MSr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6e2ef624f85a84b5510b55933f017db57797f611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/rtl":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/shape":"15.0.0-canary.c363f267b.0","@material/theme":"15.0.0-canary.c363f267b.0","@material/button":"15.0.0-canary.c363f267b.0","@material/ripple":"15.0.0-canary.c363f267b.0","@material/tokens":"15.0.0-canary.c363f267b.0","@material/elevation":"15.0.0-canary.c363f267b.0","@material/typography":"15.0.0-canary.c363f267b.0","@material/feature-targeting":"15.0.0-canary.c363f267b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c363f267b.0_1662067171276_0.48600029578803516","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/banner","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a4eb4937a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8e5a94601be12eab7efa61d8e014f6e4a2d86a7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a4eb4937a.0.tgz","fileCount":31,"integrity":"sha512-8tq2SpwW6g0BelHqEWuOk3ZX01qXAXsN75HXJ1ulpYxzeXJRw4ze/6XA8dByt75G3IRqCu6jbyaQUyNulFTq7A==","signatures":[{"sig":"MEQCIGIAnt/cKL/Q8GerLea2Z/5IpKzILj/WEL495Qr1KFPXAiB8fcjxgcVjwatPdkSNuVMotlxv08+OkVwvadPdZyKXOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF4+TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpM5g/+JwG+UPF96YC3mJ4GHmKYtSId4QoonO+P0lhoPZrw+jAGwAMy\r\nauNYuGBwwnHNuV75MzK2WzOT3ucpeNvnk9QyGZkIG6LmhcMDVElD0xhaOjfP\r\n/xeX8vJeYsygbvU+pnifS4cDClERE0adQCXr+BhaO84XCCIJQo5VYhpW0NA2\r\n/pwkrpx5SEX/qloSWhYtIEsyZ7WkZhOqnOieOPkfTUGzC3lHy0f5ThOrvc+y\r\neffr5QkWcwwcioC1FrEugK1gF6E65SBJopl+IZLOVuEutrWcXiHYjagKvD+G\r\nIiS20txFWgLl2WR2U2G28viPhKw3C704bsaQCvOm7sujI9nG8DpDbzjRmfsM\r\n8IQoYH4GZ4NyNod1iUvzbqyXP6zV3zrGpmIugod12L3ooFwG4Pa5555/6AGG\r\nIcBAkeL9gR1iHju1pGIf3hNnFv5VqzPbHBlbQzK9arpRX0IP6MzHr9VuVack\r\nMldi2iFSPvV0um1hparnR7yQnVribhdbQUyk5iz6DbvDf/9M7s7HF5MRT2qq\r\nAjFHBboLoLRfq3xUHecOSg56GRpZ8d+k8zMWnEU0A5/ocW3YnrDaNpBwv/Ll\r\n85D1to+Rj2eAUDw5eW7Aku0FC9s6CRA05AXDdr6R9bRuO13Dma652x4R3hpR\r\n+QloqmQF/2afXmdzqYrke0x8H5YMFvbqUCM=\r\n=dlDb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cc03915314119934676831cd7a244f70e12dd2c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/rtl":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/shape":"15.0.0-canary.a4eb4937a.0","@material/theme":"15.0.0-canary.a4eb4937a.0","@material/button":"15.0.0-canary.a4eb4937a.0","@material/ripple":"15.0.0-canary.a4eb4937a.0","@material/tokens":"15.0.0-canary.a4eb4937a.0","@material/elevation":"15.0.0-canary.a4eb4937a.0","@material/typography":"15.0.0-canary.a4eb4937a.0","@material/feature-targeting":"15.0.0-canary.a4eb4937a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a4eb4937a.0_1662488467177_0.307647095631405","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/banner","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4299717da.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e32bf853eb85ee65e01e64b3e7742416da06e533","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4299717da.0.tgz","fileCount":31,"integrity":"sha512-H/dZswVt4WZF7BTVwiMUlygNPJF4157/kZQ4lIs6hT2ROJP01UfvrvzesJ+53iwqZAjkIXV8zn37ocOUkYVuDw==","signatures":[{"sig":"MEUCIBlGD/JRD4AxRbWLzcrE7QHPouodgOhtfi7NwXZdRrRgAiEAlZGpNs3l905xB/yHJGkWBO2tzw9Jcc1ZGIrBDh3ifAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMP9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/LQ//YTOeXT13BV6VaCct+DsJV1HlBB5YMqS5EaipJt+vEn1FAeqA\r\n84/2iWPVrm2hZ8VlbwrW9Zu4n5/XPcZZifYDgsBrbd19M1nVG1E6vb87coqv\r\nw8D1Fdh5i0OLP2eD2KKCr2gjTw4PpnTrDP1jQNaw7Jq2ynSs7trSl9kIAXoY\r\nmAwaBr3aCtCuRb+i6on1kz+RPGl4BH8LVLrP9GOU/SlQ8zPlPY9ScmoAI03U\r\nBXFxmRyOIMTLrYQqONJW545mGC527/JNRueO1tGNyZosK0tnkclPrgsCSRDH\r\npshNdgvUNAubEhErOX21SgeQezXBCb8DGHfT6/zhFYOWZRO1oEnonnG3vWMl\r\nIhhAYHEUh1Yb3MB9Oj5DvmLv0ZI1kTuUAid5jDJJ0inQgVcey5aijM923LL9\r\nhWWuzxPof82BsrPiD/WRD54wiZAEKNfXyvCd0/+wEqKILGwVal4VAc+peDOT\r\nNsky9XaHV/1a22kq34V2rLOfDIysnbAcJ4O8zF6OOWf5ziN+Tlw6BeQAWjrY\r\nXZkb608Dkbocef0wKfsCY4GvRCWcrM9dcSBwo6U8cKzkKT/nYou0xdiLi2b/\r\nr35m7y7ReKUVShqueEe/rJGZ5T2Mx9rTjl5g5ccZc53gdluqa9cSqK+4wmQf\r\noUnympEsMak4amEiNrb5eo8v8btU1F/gEKc=\r\n=DBKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"22082634ffad1ea812192e5ac62786a8ef47aa81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/rtl":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/shape":"15.0.0-canary.4299717da.0","@material/theme":"15.0.0-canary.4299717da.0","@material/button":"15.0.0-canary.4299717da.0","@material/ripple":"15.0.0-canary.4299717da.0","@material/tokens":"15.0.0-canary.4299717da.0","@material/elevation":"15.0.0-canary.4299717da.0","@material/typography":"15.0.0-canary.4299717da.0","@material/feature-targeting":"15.0.0-canary.4299717da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4299717da.0_1662567421309_0.9869718780517269","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/banner","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.fa7d8d44b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2b907a1c45aeb13fb16662af43db691422f8f9a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":31,"integrity":"sha512-34PBHLqrnE9cg2l5ZWahUofXiCDoA04dd2qKoJPt3SsGR36ui4UY4kDrBWOxx/Zbo7LOBMhFYRBDF5cfZf2gSA==","signatures":[{"sig":"MEQCIG6mwg0DB95rbafMq1uYFolYIk9xK5NEFmJ0i7yWWl4NAiBLTAiVOFz0jPzfCTtFIY3nqiaDo81wPWQ88w3GHoOxhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozuBAAnwQT3V6WYjv0E/hzNnGORMbwixJL/v3Ev+nxTg1NIF1Wcg5U\r\nXUjVjy3vrAFGrXrf/5HceZyHb6VLDzXZuzoZX5ohzApS3xvggrtER3yiN0iN\r\n4Vp8xMApaH82JPlaKdAuXo1Kp23r5cwbb3WystO+mEBYbYDaCrVOw/Ip4yBp\r\n1ZpfxJkq0KgY7lcDLSt2X2n2gCtXtAdQRxhjhihSbxDOMHttAM7MperKgF9W\r\n4kiytjwJBJ3Nfyuj/sUMcHlHZgFuH5/5G+mUWgw8rPa0z3a4c9l0+U+p4YNZ\r\nfh5UyyLWym6JDMLUbgo3uwKEmdZVteLACvhes7z8Rdb4jun57uXVZvpMNd00\r\nCmr/lJ3a+NoIkTE6h4EkeZQz1rBOqHVpvFOSr6yMo6J8Sr7Wk9YoaSjn6i2Z\r\ns9Gp8rdKV0Hp0wY7XiNY0Z5TNGfXshdJPDy39N7niP45RT5IFBtZnOmQeDIo\r\ndjzkrSSBYDg2hx+FYeqyXWDPw+D7rgyOTTfNvkG8MfSjJrQl2xH0plOC9Jdv\r\ncegTwzn59PUIUbncxjkTDxLfICSpQeLTsK3rRRYu9QnLXV+6S9wofaPNLulL\r\npdz8tfqFfHBIN0dKQyGJHkpU3p7fC6pMgItbc0SpmBMk1LCiqL+J0Awl1Xgz\r\nY/31rCX96gDEcN1B7sZEZvMU7UoHkFohNnQ=\r\n=QfLF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6fc828292e73ec2f8aa4332891628e90f4586658","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/rtl":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/shape":"15.0.0-canary.fa7d8d44b.0","@material/theme":"15.0.0-canary.fa7d8d44b.0","@material/button":"15.0.0-canary.fa7d8d44b.0","@material/ripple":"15.0.0-canary.fa7d8d44b.0","@material/tokens":"15.0.0-canary.fa7d8d44b.0","@material/elevation":"15.0.0-canary.fa7d8d44b.0","@material/typography":"15.0.0-canary.fa7d8d44b.0","@material/feature-targeting":"15.0.0-canary.fa7d8d44b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.fa7d8d44b.0_1662578412547_0.09449192327324374","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/banner","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a40e3c768.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"585604be18455ea3f85cdce74c15bd0e0441a9e0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a40e3c768.0.tgz","fileCount":31,"integrity":"sha512-xLbqqqdiYu76OUhWSbxr27EgWvaj4Z/DHTq6mPuzrifyAqRyVL+GY0ovrFzHzCZ98VQ/EMixlgVpzf7Pj2KAQw==","signatures":[{"sig":"MEQCIDz+cTpm0JOAO86RVhvLMOwQCcp0gVG/Nr41G6XBnBXHAiBhAfkZVmeogL9EB3Ap7p32h22Hs8kxa4bJKqNYZHUC8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5x1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXFxAAo6i/WMvL/cPXA15VL7bNGrK8objRZlxox1SRbkJbheYuxga2\r\n3qPFEBqINb+060yOSsPTn6M349aSMgVW2FCDSmsl0aiqNIrPMCdnIximXw3L\r\np5Gves/nnAIetS1nT7s9BVXWiXQ/d6BEzUVOQyOMbY70hyTEgVutjMRT4Dhu\r\nUqHX0l1mrOfeS8Dcr5aL/z4YMesGZ7bJGbUeyCFQSRQb3i8/lNvPiVW7sH+c\r\nq+v+6tb8vXkoavbX8IJik2/OAS2urcOTzCjepk6FJC3PT02JkvxDlGflskyw\r\nOFxS5PhAVSw8H89D104Sx0CPoIdZWb9GdNvq6cY6TlsLi5diaaEy+htLX3sK\r\nfKkgqxW2HzwO8+A2qajwtMS0QySAMcX8ve+r6vf4ngwgC0tBiuWWidmXYjSH\r\nzVkG6zSwKu1vog65cYo0N6cKa4wYpF8pHqp9XLyGNvb+jJLao32g2eQECXaD\r\n47icdnljgcJ8liYuSeMSiD89QAcbe3/TQl4IGOrQlnEkLgrlnxueS7gC3ZKd\r\nWbfgEWzQp5SD759g6cVaPY6jZR9EqpMGns3qzjPsAPFE46O+yOqtevMLhu7H\r\nNsW+P4TroM5z/WOJPyL6G9XR4et+9eeSLZ0CEN2fpKrJK6pP8DTGSdX0X0f5\r\n6rNoCedxzkyy40I4qOPJK1Bl/QpPEW0CU8k=\r\n=AsjA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"33ff1e71e12298ba7158884edffecc83f0055913","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/rtl":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/shape":"15.0.0-canary.a40e3c768.0","@material/theme":"15.0.0-canary.a40e3c768.0","@material/button":"15.0.0-canary.a40e3c768.0","@material/ripple":"15.0.0-canary.a40e3c768.0","@material/tokens":"15.0.0-canary.a40e3c768.0","@material/elevation":"15.0.0-canary.a40e3c768.0","@material/typography":"15.0.0-canary.a40e3c768.0","@material/feature-targeting":"15.0.0-canary.a40e3c768.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a40e3c768.0_1662753909351_0.09334472890983725","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/banner","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.18cdc9a00.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2016a05be8a8fa5563c859832529b27f2d2836a2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.18cdc9a00.0.tgz","fileCount":31,"integrity":"sha512-fMewRRPoezrm9j/QN8ZJOdW1PIXlKSM19tMZexev++FIg7ID3kE0sTMrdHcMhXPAbIlhEFawe0Z0L5t4HMkbtA==","signatures":[{"sig":"MEYCIQCay6KNu3oHS3wFoY/WLdO56SOZ+v93SvsAovVCuhUMuwIhAIx9TNRMyKwqDCll+Tqj2fJ/m78V1tDDjzpTzm41O+tg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH57OACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQSQ//dOggFtI520AS9OG3oT8kZ0yh78C1FRgrTehKL9EvqkGUcadG\r\nw+OW12C1Cs0sv94GNRuI6E2Nl0zslxemtIgtoHQGg5WsUgP4KnttqJM/1xtD\r\nUC/hcJoSX0xJgLhXHPGHdwAAGmoWeu3IS3lpHMTafl5NXAooCuV/eJvXnTUr\r\nvKsz6YfnHPv4sl6pCowH6K1VFfn7A2gif2gRf18AoKtYn2tsNs0deWFP0pVI\r\n+2MyoqTUukLbypSjXjnuAuHPHEvnVCgpj4RUjmQ2v3MkO+gOPNxcC0lzSzLx\r\nXRLj74eCRsiYEfpy0eJp0bAIJLhHBPn5I5UMlrhDP2tMPrN0Wup3gjwVZjEB\r\nijs77jtvzWENbI/KchMucfT0SlFGsUtJT0ugpilVwq272VwGytutQ+UJmfnf\r\nGr2gQlWPmaBhDSs8Y4P4TAGbD6v/KAa5bCdG4mzRTsCdEMeXZNkwLfRmlCO1\r\nqnpFIiHDrTG3qIqQ1ADpvtrQ1klt0MLHyzDRlUXv+l8ZprkePqDjF84wD/hJ\r\nudZPCPe++LN0Cp1/s7q99IcWGp530cpu2VLKy5GxTxSoEfb1EKKer+DifBSQ\r\nnuiFByOOI3JrPlu3i3KUog+gEcyJMkhKlktElb35xj6ru0p24GZSbM6//Z7l\r\nI4DejuedZoAGz8MqePgHp1aI0CRjR2gYKoA=\r\n=5ngD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"85b7dc2034fbd68e480826d635d6d061ba62d3ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/rtl":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/shape":"15.0.0-canary.18cdc9a00.0","@material/theme":"15.0.0-canary.18cdc9a00.0","@material/button":"15.0.0-canary.18cdc9a00.0","@material/ripple":"15.0.0-canary.18cdc9a00.0","@material/tokens":"15.0.0-canary.18cdc9a00.0","@material/elevation":"15.0.0-canary.18cdc9a00.0","@material/typography":"15.0.0-canary.18cdc9a00.0","@material/feature-targeting":"15.0.0-canary.18cdc9a00.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.18cdc9a00.0_1663016654533_0.2854834385881826","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/banner","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7ab3cd3c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"08e9514743d321aa18318ccf885fdde3009119bd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":31,"integrity":"sha512-iQBdNtvpYdILENei/ElCWJKo/NJuJxWlixslQuwn7Ne4Iy3TQ9XeV5X++0kl8S0vPuzWrstkb0ASj09QwPRcfw==","signatures":[{"sig":"MEUCIBpWjV5qbXePoRKeV1YHm48p+oo6cT2CwjAQT6/2AySBAiEAl7qb+Cy94c0hpB0uR+wdLr3r471+DOMNgqUqzH067LU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlvhAAg1T7loxORV7OZvNOMoeSegROAbfYrkNi7Ryrw4sfefkLUGhB\r\n9WFmZ0ZEmRSg53NEV+Z5jd89RU4BbWSwHaxUY9iM0m2Lyj0wuEOc5O+dsQFQ\r\niHQQ3GkH6lQhjT3g+xzKeFOl6LkhlrvmDuMzddy0qwMS5gf8ajevn9/Tl2gj\r\nsi6on8xcq5h60lk7mnRYebowUx//tmZk3MfCsD/XuA1eii3gQmXbGGUF08wT\r\nWZk0KIU2j3OnsZZ/InKY/t8D8zZwksZAguiKwMQknFGuoTjZdRt5lA7CODJt\r\nyGIj7o6X02yrrwFjOrTuN7bNqQIkI0BfDmQbJBlE5AoLa9+2Zq9oN7y++dmo\r\nBkH3tkRYNyXBzkskcP1ykbuf/cVxwBaegcAYzAWJEFlDbE+h9jkj6tk1BWO7\r\nRo5uDPz85wPO8Cg4R8U/bczoIDPhEigytq1ERFXcvHbl5vF8qcGKl/YJc7wS\r\nehnB0UMXTtXC0AulPRm4VKRhEJ0eeScqy0xVcqcj/mIM+3BtEhjJl/w2/5fG\r\nkDWb89S64RdDfjHh1mabUBSd1fz+EiHD6BCiDBkEW1OTaxHcNlGFJUbJ71fK\r\nAHXz0nFHh5ohQxl2qyhpGf8hpW9fA8VUBjmyM/l6x/ZJbRAu7IpDlzqnWtut\r\nsREUyFrRpdkJcvjJB5Z6g7Mbm+Z0vBTuLZ8=\r\n=w4zF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5e840f2c9b221706de7ff81194e71da2b68b82f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/rtl":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/shape":"15.0.0-canary.7ab3cd3c8.0","@material/theme":"15.0.0-canary.7ab3cd3c8.0","@material/button":"15.0.0-canary.7ab3cd3c8.0","@material/ripple":"15.0.0-canary.7ab3cd3c8.0","@material/tokens":"15.0.0-canary.7ab3cd3c8.0","@material/elevation":"15.0.0-canary.7ab3cd3c8.0","@material/typography":"15.0.0-canary.7ab3cd3c8.0","@material/feature-targeting":"15.0.0-canary.7ab3cd3c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7ab3cd3c8.0_1663108826181_0.45351040801642006","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/banner","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2860d244d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef82acf83410e3dc1b920fbf2101b362d7b8b4ed","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2860d244d.0.tgz","fileCount":31,"integrity":"sha512-HHtuQN18UBZNlpOpVAalJFZ8kE6vM+c3O05dtu2z5Q2hohxPMYXbs5SRINnQJu/lzxBHLILOrD+oNF6guvM5kQ==","signatures":[{"sig":"MEUCIA6XgZcwbxCQG97qMFF2F5SCqrcMa0mTiagKt6hOc2U4AiEA9CQFL3sPeTdbw2VlQPpWO5/oTPE3lK/N2qm6BiOXAfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP8FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0WhAAg37agEM+ddVmD3pfMo3EzRyuR6NNOYt2BBLrpc7Ru0eRZ8Mn\r\nQPfwcOScFEEQsItzC4XfpVfr71KXq2LkSOdWmTFnDKSqKUiW358RuSpxlPQO\r\nx5vWJqlUuNNmdgml1sY6G2w2QuuAtBM0NHZQMTXlX9bTdglwjvXMsQnbXAMr\r\nn/HbJkcDMzOKrWHMEbTaCfGUn1er/6lyu/TmdA58/Nj8DnpRLU0yk02cFM0d\r\nlky3UaNCXYAKrXQEWGTiBXPg0l7nAFFqRwwwWuZkwO6JcriAAyYlBy/xzVaf\r\ny2IG9CyK5TEhpgyH4bX4OOuERPZptAziLnr9O/Pck+S9KggomfD37oWu5GSZ\r\nvklAbLMqbO0MLY6LLzla7zgQ8BjdW+4Kl1SflN/7J4lBroxnspl1/XVZyPnT\r\nDB9clPslLGy8yaTzoiHfPDQZ0EonDe8BxGWIF8V9RSu6lZyOX1GBg7SxHEL6\r\nApIbvgQaaLuOKeMwGI7cglbizTBdZU4rlAwmskCWyofkezzhIigjirOFXqB2\r\nRN0DxsFzAl7C6xQb26rpp4qXhulweS6/TB0XZNFlZw/bT3xcgHQ8A6rNAdST\r\nDHWUJA/fhNIGmSO8ah05imD7mAYBon/MtO/Bl2bi0Uwq4WUoZQmX6ThV7J5Q\r\nx1r0DAr2x/Mk9/BV0iMBQ2QPKWSuCQRsmHY=\r\n=w8vH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"992b4ddc7340e4e4231d1001d68229e8911eeba5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/rtl":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/shape":"15.0.0-canary.2860d244d.0","@material/theme":"15.0.0-canary.2860d244d.0","@material/button":"15.0.0-canary.2860d244d.0","@material/ripple":"15.0.0-canary.2860d244d.0","@material/tokens":"15.0.0-canary.2860d244d.0","@material/elevation":"15.0.0-canary.2860d244d.0","@material/typography":"15.0.0-canary.2860d244d.0","@material/feature-targeting":"15.0.0-canary.2860d244d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2860d244d.0_1663368965310_0.6898808247049011","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/banner","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e8726533c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cdee1bded042158666a84c644a738c17631b0d7c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e8726533c.0.tgz","fileCount":31,"integrity":"sha512-rcnKcmSb22Sf3EgLvKR+BFkSwaIdSbQ9WYQyl6/VKDkOk4QrV7HyNtrqbeJVMGkk/4uMtSksho0XugTwtck4PA==","signatures":[{"sig":"MEUCIHvyQ5xJd148BbC3zTZL/3nqYlwSZbCOBLFJBxSKlCgXAiEAlprzCSEOfsQnhTts2toaTdhJp7q4BBz6CbvDO5dqiVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4MA/8C7TnLJuHYbeulSgpnLuGiMBZOKQeStHPNAd0R0JzQ9ZZmSmQ\r\nLN5jMnJ1RIqYwUs+lBjPr2Mqoz6ywce2gZfIz4bm6zXhcy8aj8IayP9M8c7x\r\n0ZsfhscAlhjI/UsxCEzlHUigMthQFgSd27Q7aDaKy6wXGhzZdest3B795F6l\r\nSwrvfI5MV9/4CMVpL40pyZj3Q4d/NYpNs34HyxhF+ddpH8uhKUc4UU6T+9Sm\r\nOldKqRZWPNrecTW58e6mO5E0x8PZKxr1k3WdVtTaaBftpL5BZL/dMWrT7Cq9\r\nb+2VFSOlILC6cbJ97zPwC4H9JAOhEOjztq010H2kXnNRHLfgeHm52XTdBLzU\r\nMxI4LCy3ej0czmIoZ/pYhAWjrheaQA9LVxWSREw31LGL6+e7WOSlc+ODRN5B\r\n42V/gcbp1TYuMySz8mjRLUf4hlgdyJvnZqu2tU14VpCTFNi5HUU2gCDKo2QO\r\n2hD/l4gmCxV3FBXg6qp/3OhwxBC+hC+4rFPX+xPJldOcovuDBZvRqE+EXp0M\r\nN6cmxEL7/MMlfwouzVTLHV+/vypzxsDHG733MHwOzyuck2BN67baC3G28onL\r\nMJNXVDW/4wCpWPr4onZ2YmWPsic6wZsdCZ5RESs59Ec45a0Y/SD/ehFnSZA6\r\n9SnKTpbarfIszVpW11HzxJ2gkaedpu4LdsI=\r\n=v52n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b85a9f4d1ad6e30de8175562c0093248848c2598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/rtl":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/shape":"15.0.0-canary.e8726533c.0","@material/theme":"15.0.0-canary.e8726533c.0","@material/button":"15.0.0-canary.e8726533c.0","@material/ripple":"15.0.0-canary.e8726533c.0","@material/tokens":"15.0.0-canary.e8726533c.0","@material/elevation":"15.0.0-canary.e8726533c.0","@material/typography":"15.0.0-canary.e8726533c.0","@material/feature-targeting":"15.0.0-canary.e8726533c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e8726533c.0_1663705133372_0.6969661552995381","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/banner","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.00d8de0aa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"de65d39ff2e1719322cc2b0973b48d83fd5249ed","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.00d8de0aa.0.tgz","fileCount":31,"integrity":"sha512-tJkY30Qrmd1fGXqTNahPjH0fDjNhdpb1lmHX8AfN0f5TTHmDGczBtbGWXpFYeP8vcY01J/3PmyRSbZwBKxsp1g==","signatures":[{"sig":"MEYCIQCKTlNKDegxY7WOvrBaUiipn9wQvhxWm/fdp/SoDre4tgIhAPe9c52nCc0pGX6v9gd9rtvns+vVRZzjblSEusniOQ66","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKywIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Zg/9EJqvo1Y6Z++Kxh7LGOth3oS9sQ2rds4RxVI9Ec00NHTxtiYa\r\niEa7uYrbVtbhFJQpnPHk6UR14dkRZkXdTwtPq7WS4BR5QQSlK4Ybc5xeoK2a\r\nXYmmyaYE8At8e90mzbxs5N3ztqPs9AUaWF84snMUbOv6KWQqC9eQstoSMSeG\r\nC8a0GyyRzvugBKitJrxhIwKnmb7emHk8eKTLr74oW35ehbd4MrlCOBraqtfi\r\nUq0ezKD7ph5N3w8R1dBvEi8w8QRcsMwzGvd2AC69Xx83Gx/lFP7QZUeFUCjE\r\n9wbt9xUJbkYs8IthDJPr4PF5UP/35owF5tfzhy23PK9Cwey4NAks2iY57o6D\r\nCfP+O8amc5h9ZnJVbg7Nerm26ZSw9itkS9lduvU1OSy7fJM2XiTEtCvLLI6A\r\n1Ar0y2Igvh7iYjkbxR/I2JbANHRc1lcXzyqrrhPWnWhb7ckiJ39lQmnmafNZ\r\ndc2BqZFaXFzIXGS8DIVsXSzJgJmYKBR7rafx3IKnTZoSyX1LsvDEe7/jd98A\r\ntYL0evdWavdBgJhur3Bd9YTkTsPaHSVaLKJTsUrS8cqrGQayPGjHM8UxaNRd\r\nEVy93TQojV3uYVLYfGMyL+Eq+tNSqkofA1bIehr6WIJAAIf2YYNKohYnZlOY\r\nL6lajJIUCqH7F1R3yG9gnRWVO/p8NruIBro=\r\n=LLLA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0be0806991396e042fbbfb14ac3ad622770647cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/rtl":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/shape":"15.0.0-canary.00d8de0aa.0","@material/theme":"15.0.0-canary.00d8de0aa.0","@material/button":"15.0.0-canary.00d8de0aa.0","@material/ripple":"15.0.0-canary.00d8de0aa.0","@material/tokens":"15.0.0-canary.00d8de0aa.0","@material/elevation":"15.0.0-canary.00d8de0aa.0","@material/typography":"15.0.0-canary.00d8de0aa.0","@material/feature-targeting":"15.0.0-canary.00d8de0aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.00d8de0aa.0_1663773704316_0.18550546955860892","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/banner","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.271aedc30.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"709babd1676528d9d97415e68089be00b2e730b4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.271aedc30.0.tgz","fileCount":31,"integrity":"sha512-2r+ExzfQ7KOyiw+L9cLw/97wvmOJQovP6rmEu1klVMYnStUw1ox1lAep7nNWrf0EOL7IIae3Ttj8rtBT2E4Zhw==","signatures":[{"sig":"MEUCIQDosTv0WBPElPRH4ZXMqzJoGnZQ775Pt7AaNzgahPIJMQIgPCunl6BUKT2Pax/oX+fjHHXc9lfVwIjlVPM/huvuKN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+uACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEHhAAkrqayGwKOu/YhuMndLSzFVNNSAO/rNurTbF+dmRnR3Q0p4te\r\nLb0athkXWJ4VmIDX7yvJXVmaxi8dEHkA3t+FGtOICF53DBYpeIeiB2ClZIPZ\r\nXYAZH9MSsjXjj4Re3il/teNXduFcvslLk90KFwtmyy2jdzYFd/KreoYi01G0\r\nlB3/i+adRfD1jGyTxA8KHPSw+N7fh97GLQuSFZzDMrk8tmA5riq7jmBW4mVM\r\n27SWttnGkz8fK6cLnGmu5Td4e+br9AyrrBq1b+WGuLMkXQ6JjQKub5dPS+FS\r\ngfFevec+3ia2C/co+ZUB2uAzR8BdN9LTs/6JUvERLZIMs5r9Gc0f7QssObq0\r\n2Y/JwCtTLPylzTMPGc1OXInrQqUCVJD+/M5kgcLAe9sO7uAQtoYuF6B99/si\r\nfS+2t9eyEy6qL6SFLmTuQmYC3uUDA7VwH6TuqAUYaIxrgjUEhFVIX1bknFxJ\r\nsOMqTaPEOgwLmBxr+iL6MGmsf8CHVTAOI6re4C1HhbVThGPPqqeHut9toNS/\r\nLrHBCgMjJqmx/0Id6XNxqN4lYLALFQ7ty8UvB5kTJzU18TMCVpHMEcYZ1cFJ\r\ny7br6VGb0zuBRd4z4OXJ2dSsmLLQxJjtuE/M844lcNUZL6vES1JqMPj7RaLe\r\nDC0PV9f+JsyYnMLFGqyWKV16peK6OXxZoZw=\r\n=bJ5W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4972da221d6f097e904fd1a001de647e0e185749","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/rtl":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/shape":"15.0.0-canary.271aedc30.0","@material/theme":"15.0.0-canary.271aedc30.0","@material/button":"15.0.0-canary.271aedc30.0","@material/ripple":"15.0.0-canary.271aedc30.0","@material/tokens":"15.0.0-canary.271aedc30.0","@material/elevation":"15.0.0-canary.271aedc30.0","@material/typography":"15.0.0-canary.271aedc30.0","@material/feature-targeting":"15.0.0-canary.271aedc30.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.271aedc30.0_1663774638045_0.06869122256838134","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/banner","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d3344c16f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40d8f4089778d44861932cfc61ec69558a341710","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d3344c16f.0.tgz","fileCount":31,"integrity":"sha512-anHKbLMINOhserkhOXob4beSCWcFnZdt9LhDKxQTh2l+q+vcWPUnU7O4pGUiyrc/1E527++x2LXP5nsR1oi6zA==","signatures":[{"sig":"MEUCIAYzUvrKz675SQRfuP+ZgHpN02wEv1NOU7bTlR28tRp3AiEAkNQCWCXb4y5AxUAlBnzqqDgxxk/aiEc+ar293M9P0J0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCodACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/FRAAg5P+pquKggXal1mRDeOPFojiih2hfMS8frVgR/GNEFoWAp6N\r\nZlmpyODDDMrYqy9PWeRUZiPaXKgcCHCSSD4a3bfrU6yr1Nb/lRO3GSHBylFk\r\npGruevFfPCZhF2wLDNHIYEmJUDc3ppr1ymlH1DJqFBGCPj0dyuEfx2kBra9w\r\nLwilEwcytqdHBdfcMLaCtg8z1AclyRRohCeslvclpNWM9J1nUG5YjZQeZtnu\r\nQj5UpwgjYcAUTfNWBnRmyTF38TN0p9dPB4aYK9jzbMBo/Fva+pRP8sdHE055\r\nJUr1Oebwc4kx21SaNknOlVr1LxhE2qSCpC11O+dihyxMnKo5cEKjeBjqNIoK\r\nD6g+Sx61BBY4jcOSD/xE02mR/jYewrNOEHFk0w4V3BR+b2Ws+fgaewZS9I2+\r\ngNuUZ40t6QSGkmIrYZt/LXmktbWHZs4yZqc5IHGfy9op1MoKIv1SYMJEkEwA\r\nUuQ0rlTo1D/J+fny+uNXoXRONY8IPRFBrqIPssOFmCEGx32aG8bYSOSlhL21\r\na1kAlxNrVtuo+F4EQvxk//2WPPlJCvvzSLeY65nDrfMJa57QqtjMBNTiIJHa\r\nHDferCM4O83bduaVnAADE4KbuVZhrMDHL80CjBdnuy7NXZ5IxYWZC5cDPNCA\r\niYIzqYZolXc7pXJhFeqXkC6BJcdQF++BPnM=\r\n=bFT4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e0a8dfcab6df46c9fcc9969a6dba1f4fe48e028c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/rtl":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/shape":"15.0.0-canary.d3344c16f.0","@material/theme":"15.0.0-canary.d3344c16f.0","@material/button":"15.0.0-canary.d3344c16f.0","@material/ripple":"15.0.0-canary.d3344c16f.0","@material/tokens":"15.0.0-canary.d3344c16f.0","@material/elevation":"15.0.0-canary.d3344c16f.0","@material/typography":"15.0.0-canary.d3344c16f.0","@material/feature-targeting":"15.0.0-canary.d3344c16f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d3344c16f.0_1663838749572_0.5900119768237579","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/banner","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.94f20ccb8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5416474caabca4264612d31d47697fa39a3cb384","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.94f20ccb8.0.tgz","fileCount":31,"integrity":"sha512-GYAEyKkVQ6LoDLJvE2quCf36llvHfcxj6yPrDxsE5BaMY07yvnhYbfyF+eQVZjFvp42gpBbZ8DmncHfnf4KLVg==","signatures":[{"sig":"MEUCICRx2mkNZQKGgCDfHCUcRh9hKFFMcn5S45Eihs+2ioxdAiEAzVnVbVhB8wS2JqAZNTvzv5jXCbDT7lV6MIL2ukLhSmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMo7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovpQ/9FMS+t3ptceCX9L1nZQDINSpk2GzRo03gmexaZGdwDpoZb8jj\r\neis9lTMre/33d4PnAUEr3cIz/bgEuItB6Uc3wPmCcdQJcrfQYCc83zO6Gfy4\r\nIcb/1owVqAkEUlhWhko/vfAc+Ly0jNQg8wCYQqnfHK3gKVObEFI7/J6JqDj+\r\n51lp5MFRZtAhPQKbFsWzoCAXs+v4ialYwYs/gNvDcc0g20NHmMkHwfOrlPj3\r\nuvqm0Da/TkHBa/eAmx//Qlus1OPhrdxP0uwmOdis5IqIdJ3G/sCcSjMkGK15\r\n3DXTB0ERO+bkUwTjHozgzfNmVjXNmdWX0Zw6lMfFA5o/TLlcjODSSeGRalAZ\r\n+PjzazXgYjosClAO4ZSiTTuK36h/ps0dFODXedKgnxSvFKZh/um10sFNXMRe\r\nnL8DsujwnjK1jDZ8Sbf/Yy8KLGE1TGrh0+q4r3DolqblnCm0jld+rDdcyDuu\r\nxIZ5MX++Q5Ahs0zDPdE6P/EcjVvtllxw1yEpOgcQ6kDH8KGMlXZcu0ilFgLd\r\nytiqAfeRqjlRoLBjtHV6tHtdtEBtuE6gWxN3VSdghal7/WI09wyyymyid5oJ\r\n2o7kxs3qoGZGs+XrO8tgndB7Q8XJgC/0SWA+PtdZHc0HDR2dsVr9+bKshPuh\r\niLpNQFx35oexRIOnaqV06PGR12dIhIIAogw=\r\n=jH+M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"16225f613437ecef2ed2d760a08046953ecd51ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/rtl":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/shape":"15.0.0-canary.94f20ccb8.0","@material/theme":"15.0.0-canary.94f20ccb8.0","@material/button":"15.0.0-canary.94f20ccb8.0","@material/ripple":"15.0.0-canary.94f20ccb8.0","@material/tokens":"15.0.0-canary.94f20ccb8.0","@material/elevation":"15.0.0-canary.94f20ccb8.0","@material/typography":"15.0.0-canary.94f20ccb8.0","@material/feature-targeting":"15.0.0-canary.94f20ccb8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.94f20ccb8.0_1663879738831_0.07752095719132779","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/banner","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.81e4cb7b2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4982e8a40483b96e6d0af30bde33acbd187ebad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":31,"integrity":"sha512-GYNmGL4vKpkyPvaukq7mGV2Lr6pdNPtcHPomC7kiu39+FOfM2Dx2ex790r8aDlDt9ZzOLQ1/uDwVQ+dI35vGZw==","signatures":[{"sig":"MEYCIQCvdm1/O8dIRUcnddF3nWUnaB/h41WHXLrSotfZptuGSgIhAJKMLjuFfxwWOo7TUmDAeRT0hyKaouUlVZK28EDTHcC6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcwwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowsRAAko4VXN1Vr9PPvYBiQaW3u57GVJUW/Vr1IG32Mpcjya3brEXc\r\nBm2pnz6R9UunSsQviq4T5guFBkuZnBJWUTC3dHchvD0hMXjrvUYZdE2EpUo1\r\nKVXn7QUIvcKE0Nn2dA/Edrqxc1cmE0Hmx6qZ7uRqMnbJHGTyqGtIssEj6Auv\r\n4TLlJpOAWomCXWPYLfiiZazXQphf10xNV/YjsFsuQGYnEd6g7jTEJ08YDkD+\r\nm/CGlFvGSWyHva25ubWyHJVfOIKEMMLn3bDBZzJH3zPrg+XKGS8GevxioA8w\r\n3Wji+oJNDqShX2a6syx8OCUG87eX2CNFPgJjhzBUz+EF4duqAPfGmuyWe/dB\r\nnOiesEzqOTYLyFs33+rvU3ebVn9PW/LCeeMr/ipuiCPEv+q+FylwWk0EhDEr\r\n/DVz2IDQvxRvDRBRVVeetxHvzFkjaNWx6Ge6y8bcLr+qKpeQmLCphGmUsNrA\r\num6eq4LmZjkzkbQfC1s2oqoFmXkxypzw7gjJE9MezIu5MPH+joZQgtBJtQ0+\r\nifpRN3O6wXvUF68ow0ZBawgFFLCoKzDlC0oQhHSTevYQRqZzlI31pXNlveKN\r\nqF5JF6cWumc9jWGNBjskMpKLgg7nolVpUrqvUTfCI4Mhojbpl1wH5Q0uB5jS\r\nnFoelb+vh+fiAvOWq7wM7vgRzn0lntWSwLs=\r\n=0HmY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"63fefc99b30106d8aae83dccf8e6e8073043a3fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/rtl":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/shape":"15.0.0-canary.81e4cb7b2.0","@material/theme":"15.0.0-canary.81e4cb7b2.0","@material/button":"15.0.0-canary.81e4cb7b2.0","@material/ripple":"15.0.0-canary.81e4cb7b2.0","@material/tokens":"15.0.0-canary.81e4cb7b2.0","@material/elevation":"15.0.0-canary.81e4cb7b2.0","@material/typography":"15.0.0-canary.81e4cb7b2.0","@material/feature-targeting":"15.0.0-canary.81e4cb7b2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.81e4cb7b2.0_1663945776599_0.09051211048292052","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/banner","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.aa85f9413.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c1cfcbfcb0f6a78f2466a434bbb7ce368d2b7ee2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.aa85f9413.0.tgz","fileCount":31,"integrity":"sha512-k6sGjctTAPWnASkS6+YxLLJFyIhRaIpiN6PLNU8kOI62Jh8Y6YfSKs7KKwZ9HHUTO1t/axt2Sp3KQ/66+qnPyg==","signatures":[{"sig":"MEQCIH1vQDgAJMhMNN9PJ4e7pCQxqUEk2Fe5csp0HB0sQZeiAiAofynXDDbA534lhErmdD77WLDL1hE6KdP/FfMnn+A6Gw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMegYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr8Dw/8CyNRL3j7c54tfqQHTT39rjgryQaYVPT1uI+afZB/v8liG1/p\r\nxGHtDVEuOiA9C6U0fDE/51OtSgbBjfCndtfN1Xln2Y2jOV7BjxMBf9upwmQl\r\n27ovORVED8CfG41eNAe0Dp52L5HgmXZsy5PVVcXC3sLPA4sv1GichA+RALWY\r\nQmeibjS7+ffcsmPuwH+e6qwfwZi5mfutN93YcoVLgJUIEiw1GPWKbNevsnoW\r\nKZK0b01YkSN9K4P42lDszhl84Syk9OmZ1UCo92d1JV//yhrrYyoALjme53KD\r\nHJLpRAgFgmlPvcI6erzi1otVHgsJqcgxvAHkavFrao9WKnjpYf/l8uQMPSDC\r\n2n4qypfH26xI8Tg0Pp6OSLWZE6r5ZIF8+MzXA6pmSyEdHAcsX0LOMiNU/FYE\r\nRxEWLF/35uOV0HmrERQNDmDM5ZYTGTzEytFKRqLxbj+pRIrZJvVJA3gZVej3\r\nUUH+kEzRcUfsX6xP/YJQ1F8SL/6h68s3gJc6/vdrbJU+dxKocxw58mJmZsQA\r\nyKnFYKHMKtckzgVnTEuir/vx+FFA1YbZp92brDWIfNChYTuSVXRLKdIA5DxH\r\nAJ9OUyTbwJovrk43MaqIyIvPPKwwG3R3A8VeiPJiYaNF/ZQzDfkU37qSdJmX\r\n+GYwzaToEKmL/BFjfeEBWZfJEr+eqPudncA=\r\n=feDq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"73f7402d0fd839f22c2c3bca08292a66389f5829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/rtl":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/shape":"15.0.0-canary.aa85f9413.0","@material/theme":"15.0.0-canary.aa85f9413.0","@material/button":"15.0.0-canary.aa85f9413.0","@material/ripple":"15.0.0-canary.aa85f9413.0","@material/tokens":"15.0.0-canary.aa85f9413.0","@material/elevation":"15.0.0-canary.aa85f9413.0","@material/typography":"15.0.0-canary.aa85f9413.0","@material/feature-targeting":"15.0.0-canary.aa85f9413.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.aa85f9413.0_1664215064360_0.025115621669140165","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/banner","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7134a7752.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82ba56d6ed3937bc511015d1a93206fc08b181bf","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7134a7752.0.tgz","fileCount":31,"integrity":"sha512-81haSDU8dMJF3jLMHl1W+6ighMCl1/U4FM77YWvCi1YAl/9HhSun2UHvSrsLXj8Ly/reeMDeXqPpXPPgR+gI4g==","signatures":[{"sig":"MEUCIQCzEq1a7Elo/g2WHiuuOeFonG5sK1aCCZWqo93Qc+KIeAIgGNLJ5DNyaP6LDC9QXaXAWWuf30h9tjfsfvjWf2RRsdk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiCbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Hg/+JJtEZOqAzF0XJ8ZK5+KAVM2HOt3Y3mvxIFJ/FBNpTQlMSk5N\r\ntC4oqRXKWiHU8Y6u6x28UH9mHq5jJEsp/UUZ8A56UOXz9pQ4ghjRmkBIFCyQ\r\n48d65GvYVsUSLVtT5PbuFjYRgPuPuNMVwVuds6dX2q6bKWa/nH7WugEb3w/k\r\ndvxbQztFAZreemexCsXWGttV/k8LLY2IoyrlNGGnw4TrI7bIwBZNk3FfZ09Q\r\nAMwUPQFApBE75C3Ccc1m4Os/3tiDWV+V+e3K4uyexUsWEybZ+Efzf26WpwoQ\r\n1wqk1qbPP4PugGw43EexKpX0zlWrdHpelMhCgdddgzW7MMPzqkAfgIr/AC2/\r\nCF3bfSbxfLLyLPt6O3nM95Ku4GkqCS3IS5t7L7582Drd9RtCbNU06rfEHNTf\r\nEltb+MdUMPBuVdRZ3DExO0uVR7DfZf3nWe7AbFOGMcPoHJgawsg7dvfFz46p\r\nDTOwWQH8Zj5AUMMEUVKk191QwCxZ3OXhKgUnE4OolCmK8VezINKESwywJuDh\r\nI7V0OVRRGoIILDYLKrffbOqrYZ7/hxWjj0yRT6HGV5b65VJIvO03/9R7ut1f\r\nAGnFjrHCSps82YJVJzCcldAYrRulQ/UsbFpb86xteym3jonfBmgmaTGOKlbR\r\nzlzOEcoKpSrYH2DMJuqVewq1ve17d5V1gME=\r\n=7LAP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"31aaa09805eea1ad3a30e7b91a8bf8ee8911e80e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/rtl":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/shape":"15.0.0-canary.7134a7752.0","@material/theme":"15.0.0-canary.7134a7752.0","@material/button":"15.0.0-canary.7134a7752.0","@material/ripple":"15.0.0-canary.7134a7752.0","@material/tokens":"15.0.0-canary.7134a7752.0","@material/elevation":"15.0.0-canary.7134a7752.0","@material/typography":"15.0.0-canary.7134a7752.0","@material/feature-targeting":"15.0.0-canary.7134a7752.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7134a7752.0_1664229531482_0.13199942556159106","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/banner","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.70b8ac16e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c444e9ac1b4dd8ccc53d68c5997346928cd6aa4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.70b8ac16e.0.tgz","fileCount":31,"integrity":"sha512-jRZ+g+OXARkC3m8kaHDqf0XH26Z+YfKcD908z8uiJLVHvc58AicMuhsa8bV2GOPIVGso5NRBKnN8QzAFIv4Z3g==","signatures":[{"sig":"MEUCIGNrfWfIvAWTprwnszdZKCcQaDZTNuEWJg7KQ5aLwq0pAiEA0scHMhe54uSXXONg6mUI6gIaJ97D+xqa5dtmUqmUjMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0tQ//dIm1B9DM4L9HXCA8JfPCJTuVThlrq2kPARnbn5vPR8TTxXLt\r\nYTIa0sMoQsDzElIjLW8XEvpKMCNG3HqY5SRGReEMxDZy/t6Q68My/1QUKpi6\r\nvWpE6tbqtG1B+QS8x2BiY/bP7XeUHT6ZkmE11AsVdPgnTAfIK0SM3jc8vrbF\r\nPfAzhZvSdtJJknD2BoypEhdHF8WXl1pa7MoqOhoUbRMup3KiJYb0t2SksJ1B\r\n9YZWvYXtWtrQPIOfCWl6dlVOpR8KMf0ypv4ahJ/4oBg04asBqNTJm7VUjgc7\r\nHvwo+Oqu1q7e25NMWlWGfWWg4gqTktQ3bBSqQnsAitNSiTTwA79q1PKOK2e8\r\n3zoEldFiMbDkjdxukK5ynKQTh6EhIqntwCQ5EEuKBRzHCNoQNx081yL0A1wb\r\n/np8EIkwK7HHEkSW1I2yYdpOeUohaQeAi6wrGhI+rbFu17ItUsI5ZqaOclXz\r\nN772fzSOo+fg10rGc2lC9OJc6ur+EGORQJZlf2AFtJOXRLpnxmHRPa3fN/YG\r\nazsrAn8In2RY8XK2a5cSEO8uY1P5A0vl0/bNJ1h8pIwFWY+abekwrkOyviG5\r\nlbWY54uAvFqqZwHcuL0IhsF9FIFLLgxFS8LIUeiZwsSfD8n7ZV4ZZYV40Fy8\r\nkhboLr8X4MIEBj52xqjNEHTavYbvXdrUza8=\r\n=Xhl7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9f9fb4c3a4123798d2b993ab287cc4bb7e8d7014","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/rtl":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/shape":"15.0.0-canary.70b8ac16e.0","@material/theme":"15.0.0-canary.70b8ac16e.0","@material/button":"15.0.0-canary.70b8ac16e.0","@material/ripple":"15.0.0-canary.70b8ac16e.0","@material/tokens":"15.0.0-canary.70b8ac16e.0","@material/elevation":"15.0.0-canary.70b8ac16e.0","@material/typography":"15.0.0-canary.70b8ac16e.0","@material/feature-targeting":"15.0.0-canary.70b8ac16e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.70b8ac16e.0_1664318764209_0.8880080687193124","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/banner","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c20d74405.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"55c7bd1e8876c8a047fe7c965f2c2c737010afe9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c20d74405.0.tgz","fileCount":31,"integrity":"sha512-7aJ86MY1IA/l1Oh+gnmLWuBsVF1t1TjMcAbPlHG0B7r7hiUOrooNiNO7Vt0LpR+qJCando8fZpaROv8ukwNDBA==","signatures":[{"sig":"MEUCIFLpzW1EdK8vrbWyVY8P3rJmcc9szvagAG1byla8MJ2wAiEA6JVwqAAYDw1BENH+m/OY7tJEfk4NZ0JE5JWY1TNiiYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4gJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofVg/9GPS2Xyk+/M+1xFx+KouSHxJpYltJU2RwL17ALB569gjFAoB1\r\njhRY2fX6hZ85WSZJ+m7IId/y8zYYs2ycFkGCT42AjhER5reV3Wg2aVLS4xXN\r\njnxM87QUCNjQWSL2yV8bnzWcbIX4C61yYqdcIAhLAWYcmemf+YmF7rYa74G6\r\nWTSR82EiGYs1Sl/+fOABPzX2uiUmnOvzBa3aMRCgUyuB2rvzfoXUQZCYkZFO\r\nnhVdXaq9fTm7/IGbQiTFMGLAz298sJkad8rZTUg4UpHwEiYYvN+ZNIGQVEWx\r\nBWJutTyx/2gPY+JuMKn7lsq5oknDvQOXR0tIKbtZl/sm+iUVUQ5JKbsiPA60\r\ngA8M+cy435F/atPbPLNnSF3wDnK/6h+H1wAuETSA5T6jmkgrx0zB3hCpYvS6\r\n+pOoVlLHqh0NpcgUGMzllSFWI1pQwGNfIGuiL/nfCb5s7InCi9MSj/82F75R\r\n9OcxY1UEZipaU56dM700YIO9WE/DUpFSryzzmZNyBtvI2md/rjLHzOpExNYD\r\nOpwMlB3ntut7WjiHFqK1mEtBF9MlWJyq2/R9jD9cEOXW0jiYThI8MrxB9/y1\r\nUhw3kZQLbMXrmX6kCpYEclCdV/qBtJOhL+wWQfLu4D+IXJJxvhwAI1dnAxBe\r\npG21W1MNRO+YmkPOuKXsCFGeq44+5+iVvco=\r\n=xlto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7e1c6f9d7e3c90438265d23d710997462d087d78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/rtl":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/shape":"15.0.0-canary.c20d74405.0","@material/theme":"15.0.0-canary.c20d74405.0","@material/button":"15.0.0-canary.c20d74405.0","@material/ripple":"15.0.0-canary.c20d74405.0","@material/tokens":"15.0.0-canary.c20d74405.0","@material/elevation":"15.0.0-canary.c20d74405.0","@material/typography":"15.0.0-canary.c20d74405.0","@material/feature-targeting":"15.0.0-canary.c20d74405.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c20d74405.0_1664321544846_0.620929088522115","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/banner","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f033fc8d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cd86c2d3196ad33597d4bbdcb46814d3a5fbec65","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f033fc8d1.0.tgz","fileCount":31,"integrity":"sha512-+jFMrZ5YegRgBsCu8/UJ2Bcd1vRJrr9TSQD3m4lCe7J20IsEqTYX0htd4yozP934UYmNkiZDDeCXXT4ULcbanw==","signatures":[{"sig":"MEYCIQCifbOeydsGoCK6/o1lezy8Z7PkKBOCNTKXbr3asIrB8wIhANN3ORkqV0kZGo5K1A/y1P/mSK0z4P186aKVsUjh7RW2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM44wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdug//VAXfMUWx3MBtp16vp0WrFMze2gkBnUutTMANYcVQNGnDZc2Y\r\nU+VxdBrauM2EL79ZHDqs+pdb3mr5VUCJTXN0IUfhIP586jEj74SEWX9rkP5l\r\nODxNFf8Ap9RCnQrwcuD+v+TufouKZhm+61QTaMfs/CvFg21mYFJp3SP3rRV+\r\n7e5PpCX8mWI0Eky65Dt2ZkFzrIMyzLqkUCHeJsS30Rzujj9fn/kx3QODgwPG\r\nE4p7/138+vGJAY2L4ZbnMAzwoWa+/5p0OFryiwJTHgjNxgGGLb556wDbLr22\r\nTGCpmj2mM9X2XT7q2R7HzWxO54xBmGTSq/ATzIUO1DELRAlxW/05kW4GjxYn\r\ng/dLhhW2at/MrLbYLOwfXuum8co4WApbvIZ9+cLL32gkKY+AzM6j1sT8b1yL\r\n7NSsbf3Nz5BfL9uJZ5jjC8DdObOJddOQFpRIEePI4krK4K7WLl3AiGLOgp66\r\nOGhWrEKgAAjZEEyGZig85pz4WGdU1V8lp35rtnFoLX70pQx30KQTU3dJGnVg\r\nDywiIo7jM//gTHNuWErvhZLuBOwA+ZU75O0qLvdEJ57s+cocIqSYoOX1cY26\r\nH5rbgA/JjIWeMEuA6x0Y6VqEDFwr90/xqOEmFVik1Z/UMjvnqcxD6aIj2Bpq\r\nuWA6FhHUT75/YD9HfKL44YOVEGXDdFm+D2A=\r\n=Sz/q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a658683d647364520f9de8a2d51f15913b5ffb78","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/rtl":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/shape":"15.0.0-canary.f033fc8d1.0","@material/theme":"15.0.0-canary.f033fc8d1.0","@material/button":"15.0.0-canary.f033fc8d1.0","@material/ripple":"15.0.0-canary.f033fc8d1.0","@material/tokens":"15.0.0-canary.f033fc8d1.0","@material/elevation":"15.0.0-canary.f033fc8d1.0","@material/typography":"15.0.0-canary.f033fc8d1.0","@material/feature-targeting":"15.0.0-canary.f033fc8d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f033fc8d1.0_1664323119999_0.4572898402413914","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/banner","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8d7ae912a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"463452c75a6a848f976a5a50de7b3855f23cbfb0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8d7ae912a.0.tgz","fileCount":31,"integrity":"sha512-EKqVFZQX9tbNrT9xBxV/8sOuYLZErfRWOZo0KAO042798yIbXwo0fUOrUutkoMpdXfN4ZaJiG/pXYTW6eAjDHA==","signatures":[{"sig":"MEYCIQClU1o1IPU16TeCKzsnsXdLy/RfvHdSUx7DayyAL1s8OgIhAMe2iFkFrN5nt3No602jPjmzpDi91w8z9p7WT8DyGmp1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWvA/+MZXN0+E5AR70IoJUBw+1pl+Pv1wBCRyD9FmvkFidpzK4t1KE\r\n569PK8SbMnYdijc5uIG/zgrASdLBe6KUHYZ+DQniDwVfn4lwgYT2bKfhxdE1\r\nWrccQJXRfCyUjYhX+mrkJ4nF51CmgYfSGZKUjuTyjfxAHNDCLBiajXFbbbNY\r\n3kkJ3B0A2t1qd2OllD2DXqg3gUThhjRmsrdKjzF79DzXrCoCCVv+Mx4brvbg\r\niWWUdnuNAPd1i5amKwx8TDZO+2fDKla/kyZfTk7oRN66d+cub9tixLGbrEDQ\r\ntWh1W0IB4oGztX3w+9leBmA9wVjPuhAcAvtzVuKGOySrsrtI7sdgzMX0TSfo\r\nCgJ6DE+4OM7mpPN+HGNxR/u7sBeGJg3Hmyyvufs5k7BzCJUtTGBLUl0k3JgT\r\nc++4hFlJOUiNPUciAAJ+I9BbLKHZKWQRHtjF4YQCmSF0SMDkUutaynrj7qQh\r\n1Hgns1uIGT17eWGN/0EIpMOZdRaFsZ829iRQOdt1bpZNn46Th2rya8wKGti8\r\n40rQWzSh9TFVXVdatlX908+Y0KiCHE9y3TNyvR4+1GJm/2nv6AmuAh6KRAFq\r\noyYgAQwVBXfikNmJkozfsoPyU9eS2T2xB0q8XTdod5DW+YzyVK8fiwXeYX61\r\nmpxmbO3JrHZCxMfRi9SQdDBFbtGvd8O+/tc=\r\n=s2ea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"26b2ab57ab7cb3eeceab31102ed1b6cb133f4cc7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/rtl":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/shape":"15.0.0-canary.8d7ae912a.0","@material/theme":"15.0.0-canary.8d7ae912a.0","@material/button":"15.0.0-canary.8d7ae912a.0","@material/ripple":"15.0.0-canary.8d7ae912a.0","@material/tokens":"15.0.0-canary.8d7ae912a.0","@material/elevation":"15.0.0-canary.8d7ae912a.0","@material/typography":"15.0.0-canary.8d7ae912a.0","@material/feature-targeting":"15.0.0-canary.8d7ae912a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8d7ae912a.0_1664351836442_0.049674954624948864","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/banner","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.db414b864.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfbecb8288ce5cc49c21fa4d1b28d1666e30ccb0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.db414b864.0.tgz","fileCount":31,"integrity":"sha512-6VGOwcAKJd/fvBi1dXOLk7G6Gvabsn+SXSywj1lmkWFRShQYPtrM7E0MPjwlbAM5hjX2DAxkBnzCYf3d/lKJ9A==","signatures":[{"sig":"MEQCIHe6siQXsuWWoaWcuSi7afIEHAEu//HIEAZ2QqGQBMfAAiB9YJxyUsksTaKMmhmOgh+MT7qd52MXnLi2WgSM9C/RVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNGAEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxBg/9FcmglJGroNPUYEq25PFD7z1y6NFlegv0vI7sRw9cN9Y106vk\r\nHrfNezS1hx3+iFxPTzPGQC7xUDu7AuUCraw4+Fl6YkOzhAzaAmi06HPB8HP0\r\n2s9mZXfF6HEH8JG9+OGw/XS8Av1jeuEygA0FPisf3YVzKon2g1M+hxHHJwml\r\niyjjKHbbxeFoSXYvdpIXAIYVlo9hlEqvJ7uq9ZlDJ7umDh6z4pw3MitRA5bf\r\n95zTevkmrwiBSt7kaIqcirCnpP7glC4lyX1QCJ7ox98ye8urdVVAjLqudsnn\r\nOByVEgyveEYNGnPLPEfQEDv/kOKsZYnSzOtEH87jhPMkIWUccKT1YRph2rCk\r\ncLMufzUWvs+NiwXjruks7scVeeS1YTiSGmSDWIa4m7CmvcR9UTpyJRvJpS25\r\nEGGze2nlsaUiFSxP98y+tU8E4M1cU+9ud2qwc6sglZBRc9w9A5dy3oMXCcvv\r\nGFq3TePOgInDSRFomu27dhlhl86XkYUcMyk4TMl0V9JQPvnZW4pQxCDBmPie\r\nUyhQQUKWnRd3+gmkD2SSbU9S+7yUCKz8wP1024i6YXpGXIK89RMpeBprlEf4\r\nHvsHrCqPZcHjGJMYTKQCsAJQbAengsDUFh+9Y/a5/VjYOlWqyRZlzeu+LHet\r\nx/Y1Ec/7cMdLyqi25yE3F4JTHVklfWbT4g8=\r\n=l+lo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7601f089a2e7599728805effc4e9bdee40008aa0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/rtl":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/shape":"15.0.0-canary.db414b864.0","@material/theme":"15.0.0-canary.db414b864.0","@material/button":"15.0.0-canary.db414b864.0","@material/ripple":"15.0.0-canary.db414b864.0","@material/tokens":"15.0.0-canary.db414b864.0","@material/elevation":"15.0.0-canary.db414b864.0","@material/typography":"15.0.0-canary.db414b864.0","@material/feature-targeting":"15.0.0-canary.db414b864.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.db414b864.0_1664376836548_0.7391870472093727","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/banner","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.28cc6791f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2f4bbff5e6851a83a3c55e68cf864122459be7ca","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.28cc6791f.0.tgz","fileCount":31,"integrity":"sha512-0I0/rw/4/LpSUw+OAiY7QI68t4FLcCxaIoVC48PZoV3hKrFm+oMkahNKBdHW9wSzkfD7YNtE5OUgIZUxzx7Djw==","signatures":[{"sig":"MEUCIDB6kDikqtB97hW4gAIhSmcbHLVrtri05aCj49CLx2EuAiEA1n9WrSLYwvriSw1qr+buqYtB7Zb4g/fsIhMBS9K2kkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI2bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroXg//THWZ7zO+2tn1DgokxzIQEjFkJfc9Mnj9pih6slsmDH2xMxnW\r\nCkGl/8a7QBsJWT1DrIDgleQb2SpCNUeSg+Dm/8/A2f/2t+oagKofCdtHlE0Y\r\nPWT1aZLLRtGqQHNReQ9w5eBLCxulsOC+05L5k1w2rLkwvJF0QAqLPXoqKBb4\r\n6yArmdgfs3l5Kya74o4G0NOGIPtIVkgR3l2GNYGG2bFzlYu4FPwG5DKntUdT\r\nXozsj3XRAhXv7ePP6Myf1NGjvpd6ObZ/Qy+Rzqg63sMA9UF4WcjpYWkolbeu\r\n0Vq0kYPbOxQiFiZEq/U0kh26LknKIXERDi1SC+TJwf8kq3lVnmEN0QzaP0Az\r\n8UmLipx3I7uH5THCp5WdOle2tYW78UhwOFJplbUjp72gdDDQNUdDTf1kDv+g\r\nGu+gaMm4oo+Kf4scWfw0ax1yztjIaQ8zx1nvz+972i+I1LwW/sjmcpU50ddv\r\ndHjDzkrs3+kM+YFX0b/qSFX6yOzLuVJ78IG3DVNuOtW/5fIYh0R939N7IE/G\r\nRe24XWhPPzqPNhmwm9wIgxn4pOm3Tcw+88yVCBEvqbDcu80FFQHr+tRXg0At\r\n7TL/n8H/J1CMVCRj8ttCXvxsLv5Vv2xZrQXasUFIXsxqZR3nI/RXViaBh9Sw\r\nsWlWDB4Os53f7YV4a95CYD/2/y1f7eVqKH8=\r\n=/f27\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d2dfa219437727922f4cce877090f9afdd87edc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/rtl":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/shape":"15.0.0-canary.28cc6791f.0","@material/theme":"15.0.0-canary.28cc6791f.0","@material/button":"15.0.0-canary.28cc6791f.0","@material/ripple":"15.0.0-canary.28cc6791f.0","@material/tokens":"15.0.0-canary.28cc6791f.0","@material/elevation":"15.0.0-canary.28cc6791f.0","@material/typography":"15.0.0-canary.28cc6791f.0","@material/feature-targeting":"15.0.0-canary.28cc6791f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.28cc6791f.0_1664388507029_0.5529462879305851","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/banner","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a515a2d18.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c55fd390323ea4942348a4f3d64e46304cf2ab08","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a515a2d18.0.tgz","fileCount":31,"integrity":"sha512-BPilffSRyvcYe/mxd0wfDjlKKnBlbo3hD5DmKzL1s3FCiZ70PI6e5z9L0u7VwdSJ6W1fq8rFvB8//wrLOKbbfg==","signatures":[{"sig":"MEQCIEisR7nk5HeSN1nANtTe/n0P9n2GKE+6WRAVC6R9pAOwAiBg4+9oERbnMi0tURHLsVNq9VzTg2R4+ZEvLKXkLGymgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJj8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmonmw/7B8alx4LY5ypKQ9m3W2zR8a54rucHw7o3mDMZaRHjbdJErukb\r\njNxp5GJIb/ZA6LsCq/gSwzwO7bXeByd8Qgj42UNwTTHq9ufYWb9IPx8uEonY\r\n3l/ucIOK7v5RIt53F284Hh/SZlCsO7d+cXQZMMP15Gqov0dI1lazz8YGbPRh\r\nwgDYxbgl/QPfOcESt/Biqigq/hAwarMT1UWk8r1/5w/lcXnWKyeaddjsP2Tc\r\n3F7S89WWbJtu4Eq9+dCrjJ9YuhpPTbqC6ATteMDFZm7cyOhByIvf/V5BUHIp\r\nBS+9+AAuTspPgK25yHIKdhphnNDOWQpWtotYjH6Xmp/qlT1kBnFsuf4u9rjV\r\napgUaWQoskU064dyVAYD0MXqfS08sN1zSiAPsMkzoLFwQJhmeWq4d1Eahmp/\r\nk4ESeoC+buqiaXmPxlUq+S3wvjWMiJAint9MxTBNp7AN7kzkdGEkSqcRs4ng\r\nVE7J5gyW7VWQ0dWVF0uVIpz3pZBCjEGP77fzODA2D2k2RdMAb5RggLKx8oGr\r\n6fgfL9MGyt0yQgJW32A5MEc/E972kILikOjGAM+Ctew376vg1fGmwNXm6AT5\r\nrki6v0G6uarh0XrWBskvpcKcxoa/fafVM75kfjZXiCSrJ9QcUpRHuFyvX5qQ\r\nYvIFylp70l44J0mC1xQL47SO+Xfo1TYAxPQ=\r\n=WGdZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b634251c1f816bc66bc81c76758fd339ec40a76b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/rtl":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/shape":"15.0.0-canary.a515a2d18.0","@material/theme":"15.0.0-canary.a515a2d18.0","@material/button":"15.0.0-canary.a515a2d18.0","@material/ripple":"15.0.0-canary.a515a2d18.0","@material/tokens":"15.0.0-canary.a515a2d18.0","@material/elevation":"15.0.0-canary.a515a2d18.0","@material/typography":"15.0.0-canary.a515a2d18.0","@material/feature-targeting":"15.0.0-canary.a515a2d18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a515a2d18.0_1664391420561_0.9022007423708114","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/banner","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ce9523167.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7470c5d08ed4e0ac799afb977e31329600785cfe","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ce9523167.0.tgz","fileCount":31,"integrity":"sha512-2oZivy6IS8cCzqGEAk35AQxKNu+ZYY6mIR1YBF4s7AbtAIFd0AH3J/rKmgGppn2uy8smqiM4SQdyiSTjvJ+5wA==","signatures":[{"sig":"MEQCIH7dbAC1PW8iELSoTuvRMTmxBSPzntkytOsTEoI4LPfNAiAFn9xC+rFYKABFtKCqjcS230SdZOW8jYnu70++leQ35w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgDeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplSw/+M7DuNe+UYdKdFo0g/xSn41bHEAT0yhsi8aIMmqeK3PNKtxfJ\r\ngVhNcDl57R6sx0ar3CX4HpAqITihl7d3laZtS16WscsyjbsYrASz69Aq7/zH\r\nKnHam4QqQufCw/U1ssplDRKSG2BRnMqCWRt5chTe1enn1pHW2Bvbs/LHhenA\r\nPHnOXlTR17CeJgghX2TLdaqrtuC8bSCicaak66AA7MQ6MpSgju1KprJUllsr\r\nTzp/IH9ndBM9QwA37kUXlWoDx1u0Xf/9c7/sbXW2bCBAKQGLOmxGCi9otqLb\r\nL1wrXWpoN/XNdpzwEH2rA8IeS1DB6RNf9HqRJbz1c11jffNxWsSh26eE4m5t\r\n7nLk1S5bQOU3kJJElVVtK33WK5wmrMPUPiPGaWre/LXxBDvxv+C2XanXRsnc\r\n8HooB7Mr5JpBV3KDqg22+w0slPv2yPMJcXMJQfM6fvQ48vIGK0MYzNs5QXb5\r\nFuULQL33cZs5f7RPM/NkxcQdpAzfdrMUQBZzFGfXipjE1ziUlnE9Sd3JKgCu\r\nX3OrhjdObG22bWmK7ben2U+nxoBg7Jflndqa+8wxBuUusmlPCZg8em972waA\r\nSgHyXcEpdLrbbAIrTMEdKxWlX4QNAkn411z/+grZ16vjI1bBTGYXSFZku0kP\r\ntXWnyQCIGyoC60yRuFce5/6JqkCpEjX6Dq8=\r\n=Y8MN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8aac5a80fa36dceacc7b3a6e2474218f9092a107","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/rtl":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/shape":"15.0.0-canary.ce9523167.0","@material/theme":"15.0.0-canary.ce9523167.0","@material/button":"15.0.0-canary.ce9523167.0","@material/ripple":"15.0.0-canary.ce9523167.0","@material/tokens":"15.0.0-canary.ce9523167.0","@material/elevation":"15.0.0-canary.ce9523167.0","@material/typography":"15.0.0-canary.ce9523167.0","@material/feature-targeting":"15.0.0-canary.ce9523167.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ce9523167.0_1664483550308_0.6673843297776445","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/banner","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b2310f7dc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"273b17681e557c43f41ef5671563c53d297536c1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b2310f7dc.0.tgz","fileCount":31,"integrity":"sha512-IvoFY94khP9nCzoXoLxgzj3pZVDZoQfNc9COuGffRsJ+tu8YhN5YuFyqrfDvtXk/WCGzNEV+50NtGN2P9ikZSg==","signatures":[{"sig":"MEUCIBoLzRYQeERpY+676Sc/4ccPRoMpmkJdKFeUD3728vDLAiEAqHdIb0aWBCBPfWAnfAsrBPGIHUq7Zso/wfQa7UAss7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjUDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2oA//WOPp0ALvKqho1tHnz7Ah2O2uq6rEmNYabTmO0DnXJNqw/Xj1\r\nBPBQjQACJGuwVUSnOrp9zjxAiOty9q4hFet85vEDrEEnWqmZhSwyWq1Yo2Io\r\n048+00Vja7Wzm+/oHhEuvUwkPdyWIM2PaKcpGIZEdl1sb0yLobB65LR+yIKs\r\n/8XRs8T6v6I3InDMW7iRWewwYudvyXk/A24Httqaq28Xyl9pjjHqb7ycygxL\r\nvUWqZNs4uG38SirC3QcfwYLzwBfifUqinFE/wMJ151OM9MEs6KgAfUROaIwY\r\nY6YSC2IibnTHZG0kOqK1feOEf8Ogn2NgXS55kAs++9rsxvSs3FLvmfWMLPgs\r\nckITt4Spl2YnKONPCRpxfI18Wh6Y8laiI0RZHuvryQR9DfNmWmmJsFNyf3ti\r\npAsssZlbGdvc9KVSvsmrStlA72N9uLgRWdP/lVxW0aoB1sEvXJNzuqa17Xe4\r\nxljoRBDkEmPqrcx1XphzlEDL4ABgjtxYt/3fvSYkXJy2Mo4VNyliUPOhp3KC\r\nm/nB8h+XiQ5x+ISrQmXgPjVNPNAljg67OOI/cGJEmu0OxOGLzipIKbOfpTVT\r\nOqYaY4yQLY6tqRHpzfcBBCAe/Ul2atBx5j0FeJXvo2zQOV1YuUoi79Wv4TSH\r\nn4isWwnpuqLmznfO4f/a3S6Lh+a4LdYGAEg=\r\n=c2na\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1b1f8d124dcef049ff4f3730b930eadfe1e2a58f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/rtl":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/shape":"15.0.0-canary.b2310f7dc.0","@material/theme":"15.0.0-canary.b2310f7dc.0","@material/button":"15.0.0-canary.b2310f7dc.0","@material/ripple":"15.0.0-canary.b2310f7dc.0","@material/tokens":"15.0.0-canary.b2310f7dc.0","@material/elevation":"15.0.0-canary.b2310f7dc.0","@material/typography":"15.0.0-canary.b2310f7dc.0","@material/feature-targeting":"15.0.0-canary.b2310f7dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b2310f7dc.0_1664496899502_0.3878166879694738","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/banner","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a44241e54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"313d8cf362365dfece9d4b895d8f25c148a5cde2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a44241e54.0.tgz","fileCount":31,"integrity":"sha512-7B2BivoEgiu1gUw7TQdK7YJEtOT1HHnozTZ5WL8bUYlWa8C6CcAm6vrIXDVhewK9buSm+YOpS5eajnT3hQIA5A==","signatures":[{"sig":"MEUCIQDaqUgsnGf13AR1xlB1fyYRw0FdhyIL1V80Vexi3JmZyAIgDs6PfmTkKq9TiSr7JAsfdNTwsTCaw4+WlRw2be4uzMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqc4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO9xAAl6y+U5Rloic4nz9vk8uypJIHeuEq8bI4F8gH6TyB4bKN+2CO\r\n2lNGTXIu8jAuyl9PhTC6QtUZswhLJBrJ28R3DHJKPL++CTcqKUhnlSVc1sz5\r\noMlO1CzUDKFf0bvw4p98Golx6KgTiEsVpau6ln87ZbeTx678y+zHqv8brpBt\r\nQO7VLB3rI5ljqMwn+s1yDuEgF2A7eKugXlnlaOHJJanmjwmTa14hXZxcWP3F\r\nvlx/o83YT0l6l4Kz4IE+eCliDRtvH0W3c3nZ7wIGUfQTJsV6/wWSEc3GMrYD\r\nVx55Jryg64Wy156iKFOtp3/YjM3LQloWAEoDLJlvzJvc5FI6IvNGgL08S4qr\r\nIldmBRoZt7napHbaFxigeofXWPnc0Z0+PvX3rzIL7RSMLAix0CHCXH3Fhk9N\r\nTIUMkrJRsihQF0osN/5RLl+9FYJ//4wk6S0x0LzdVXebYTGY/GdEqIRFEI+P\r\nG6K7gdY1kBKmMpLIF/+Xn6dSjSPmfacQvagS+dNWTYyt8wOT+ah59SkXA85k\r\nu/iePla6Le4zyEH5uZKnHv8aG6FfxAl7+EHdqnwkG1Kvo6CE9J+v2+cIWCSk\r\nCME/7tMQb4pd7g3pGg6FWl6+EY4ZvukyqBrolWw0DzSODx9HAfky+Jr24Yyi\r\nZARco1d72imM7c/FYwmURRpcbzvgLN8WQgQ=\r\n=nbKe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2a5fa6460bb58b3b2866631eacb27411a12f8d21","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/rtl":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/shape":"15.0.0-canary.a44241e54.0","@material/theme":"15.0.0-canary.a44241e54.0","@material/button":"15.0.0-canary.a44241e54.0","@material/ripple":"15.0.0-canary.a44241e54.0","@material/tokens":"15.0.0-canary.a44241e54.0","@material/elevation":"15.0.0-canary.a44241e54.0","@material/typography":"15.0.0-canary.a44241e54.0","@material/feature-targeting":"15.0.0-canary.a44241e54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a44241e54.0_1664526136257_0.7066052921026693","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/banner","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0ce81e115.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3f12aa955705d1e64729595a1e513ade5a0e93d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0ce81e115.0.tgz","fileCount":31,"integrity":"sha512-BIN3C4+r5CW5H+jD53KHDt/4dpOeY0gp/egv7H7qT4nsvYWvlGlLEhFwf1OjPEBc6vSt1xEoCjUFNk+KG7A3Ww==","signatures":[{"sig":"MEQCICSQPjeofb7TVzt8W0+LG8TlJH5rMcvY9b+buAOoT9rsAiAbEoLCuJU9qDppqJoPlP2+6SFBKlCtu3C1AYXcmRNZ6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzM1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJQQ/+MqmsScpGGoUPWHWjVD8+9s7I2v1Ylxqvoi7c2IdCwYjUwK63\r\n/bwDOPFt6aOo5aFXAcvuKFdifZ9W+5P08pRDYzU52FBrALVFZbtlDWhdekZG\r\nWVft2S4BS0KRviKqlkt0fxWem6YpNqbm0bvRvyfk5+V6C7/v6ZLBqOgoN86W\r\ners/vBuKVDlk0/zepwP9eGdRtYqjMoCbxw5lAVX6L23IPzppkXzrcNrKhsVU\r\nKr8WxatPNnCOo+PgWg4SNP4kj7jLO2FO4mCsPUN8HPKpsD3KrUcRXdVt3iK/\r\nN02UQBXLBhB3AVs6oRcAZ1O+gB8aSuKa5fHxcrNetqOGk8PQMouks4IVsrwF\r\n01tDT9fCCrXkAVukoxnE1/0tTo3KngCi5jho2DLDPSIwlHSAkOVIJz6RimiA\r\nwwzLug7S1ZZlETCAaF/GTVZJ6nipPWSAYVYkdWNCUuQbsRhsnQJFjAIGV86d\r\nzmhN1GBAPzlfqZuBz9OKcSsDf5qaPETrd7yeIZeFrws26rEbSy0BVN7D9F00\r\nLq7ifhY8OyCuvhgEpa5MQw7cB62JooG+nFrgTXScF7HOZp24DyPL0kXDCWR5\r\noomf3JIyyGYXFsrjN22uAJ+m43NqgdBv6GchzD4bSg96XfNs0TfUcwduQyvp\r\nMfYbyU4vlYhqTpWjAw2nJLezVokKI+ISbWw=\r\n=nlH0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d690b44f4e157e829199ea749861c3b827d46dff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/rtl":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/shape":"15.0.0-canary.0ce81e115.0","@material/theme":"15.0.0-canary.0ce81e115.0","@material/button":"15.0.0-canary.0ce81e115.0","@material/ripple":"15.0.0-canary.0ce81e115.0","@material/tokens":"15.0.0-canary.0ce81e115.0","@material/elevation":"15.0.0-canary.0ce81e115.0","@material/typography":"15.0.0-canary.0ce81e115.0","@material/feature-targeting":"15.0.0-canary.0ce81e115.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0ce81e115.0_1664561973412_0.04169831626797049","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/banner","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3cc30f6ad.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e5e64001dc94c1fca02ddec15e238f3bd8dce6cc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":31,"integrity":"sha512-0nad1v6gKIqMsBTpjfPG6HRcvW8fvdUjNdGYqP6clOSNrAhwIthmUpt6PJVJvqLunWiL/qTevI2MyX8AswRVDg==","signatures":[{"sig":"MEUCIQDVUtAjM6PIvu7/pMnYFWSqxUbr7M8DM3irKnNxitDYlAIgYJZ6n5lNL//R63jtyI/GSQJU5OWmmGph8NTs5yjDnvY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGtxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHOg//WL3FtvyAyPZ0U66WV8/Um1rVg+JwOjEJ4a3e7T5KJW0AqeVw\r\nIeHn/q3MgvSxcxRG1RwldIkzj200D1YjqCYhJ9wmhzVX4lAxxd/Ok9vs/DTk\r\neC+unckI13w2m0Wh1bTTVPEAwqcGhsnGigOSWUVZomR/NNRyHxUCN54ssFVq\r\npOTqLrXhR66RtEGpI78H9VbXCVGLsh98LvUWNeaO1I1jtUjpNjngT59bR1oh\r\naaSSBZBc3sllS2SQbaXO1lW6CE1n4j12Dhk88L8ML5nk6rQBrDIdsFvrlz62\r\ng+fDRMUBtRtt0wtks1Tq7DEBDw0xUURcu16QgSFH3ZkZq8C5uwstM25vcZru\r\n8yvbj74J1oIvyWdqBMJGce589XtZbHA2//1Ts8Qqc7yxNWsGOurErEC1dBwv\r\npS5wi17bW3GNk+jU3AaLCrhu5SEcG+iBFGjYRU8knTo2PSrC0oMjOuNgk0o5\r\nmYhYyfwZhtCctYEqsQAWF/KH24bAvJH2omN7HEV0U6z3h+yNDKjmdtr0v56A\r\nTyMds6tq8aMn7jkdRGTfGbJYMAHjKHzYSPGuckOb/DtCmVA1Te60hWF0JN+n\r\nEHSmFpXWaTKi4WBBDe/6mXAnchTu1skMJWHxYfmTUe3oTXIX30k6yJxirfnh\r\nLpo8hvumuboZURrNttSHa4tQRTp58Ps444Q=\r\n=mQqZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"78d02265193749df2eae507da620e7571c09da12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/rtl":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/shape":"15.0.0-canary.3cc30f6ad.0","@material/theme":"15.0.0-canary.3cc30f6ad.0","@material/button":"15.0.0-canary.3cc30f6ad.0","@material/ripple":"15.0.0-canary.3cc30f6ad.0","@material/tokens":"15.0.0-canary.3cc30f6ad.0","@material/elevation":"15.0.0-canary.3cc30f6ad.0","@material/typography":"15.0.0-canary.3cc30f6ad.0","@material/feature-targeting":"15.0.0-canary.3cc30f6ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3cc30f6ad.0_1664904049410_0.1307967843524649","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/banner","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d9cf98e60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e14e7123340bea372e70baaf47628d4d6eb362a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d9cf98e60.0.tgz","fileCount":31,"integrity":"sha512-y+f7cuzMPELu6PLZc0hhqZlO1GWl45TgG0d3k8kAnqGryPlpYYT/Ncz8cjpvI98qDEOxQlgLPCNGCpmdrbQPmw==","signatures":[{"sig":"MEUCIQDbdkAfkRXpSrNT6fYB6PohZzqkZAFMSQvJ3DqXzP34sAIgfLVIjlnZzVbheCaa7XZUy7Yamzl3GjPB4CLz3D57xto=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6Ww/+KW++miNU9995vmPWJp0qhbHhIalX9jwqll+cdLza5lKLSzd7\r\njZ8R84PNq/kbAI2xAofP96DUvnv1unkjY+RWfghpGH1qB/KJW0zBA+NbUun0\r\nKv7KR6MkrsX1tmg1K0se6NhOkwTOCOqJDc9zTXPwKazC+kJ+QgVjCCcSZcX/\r\nxur5uvZiyV4HZu1sKbBZhalGTkHhUgLSqBJ2RLXNN+74thRK04j3m5PKivjz\r\nruJ91FHhsZrydC/AkYj9BNgHwLmkECBMS5qSKz8zSuP6SWNIUbtPABjkPgu8\r\nPfuG591YRokXhVTMnedouaO7u1OGOs0olJBzwimBB2IXElMhRNbg1Nrlkv6/\r\nkx/RUaLww94m5Bxjx0VJXNzVn+u+TICr1WwHFzcKDuemwxYXXURk8L4Nspxj\r\nMXVxhkk6ECCs8i7RvQDA3Ap5HMfk7Z74XUe2wEKjEsYh8CB/+i4/eDhjXizA\r\nddsvpqoRMQg9QDhQ+rcLp2Fdpyh8WAaZlElSupeO8XwPQ6VxOLveJzoUIqzr\r\nYAWcyGPy+N6Lglvwt1UXbMJfJT3oBDVvku8ND/26IoQYhdPe2rYiKdw9XDfH\r\nkWbP8hl6lLhzMz/9TK7Som8+3Ygqy2Vis0TWJ8x05vvtiNRiQWWwgYdpkxUx\r\npcy/uLeYT/Yalj7aJhUKTApiUp8sEwn3etg=\r\n=Yh6G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"554e3182e6804b0bbc262ea0e730d556747b7382","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/rtl":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/shape":"15.0.0-canary.d9cf98e60.0","@material/theme":"15.0.0-canary.d9cf98e60.0","@material/button":"15.0.0-canary.d9cf98e60.0","@material/ripple":"15.0.0-canary.d9cf98e60.0","@material/tokens":"15.0.0-canary.d9cf98e60.0","@material/elevation":"15.0.0-canary.d9cf98e60.0","@material/typography":"15.0.0-canary.d9cf98e60.0","@material/feature-targeting":"15.0.0-canary.d9cf98e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d9cf98e60.0_1664910296780_0.934184995927307","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/banner","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d71935c8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2a89456ddb0938c8ab4f6e76b8122259472a2034","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d71935c8b.0.tgz","fileCount":31,"integrity":"sha512-S9C6Atzgwo8rky31LntBEqwcUUHdp1heh5Gxitp+iwHZn6EcUc2Bs926+lShvcxUTyfZvbyYsMDlFm9JKY1O+w==","signatures":[{"sig":"MEUCIQDENMVYFAXQ0wX9/OpFjL9rikF+pBebsccIzgk+/cTFQgIgSwQC/11Vv6o4q8pOd+qMunPMtVnhLghIsuiwJPVwzg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":460036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo7EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMUBAAh6burRWf83uj8rxliQ1HBuNWqoeG4zBTbu6YBLfKt3OTED/z\r\nrGjmCQBL8CxnUo3XhDb8Kz8rXqguC12YUKt99TodE0YHDeAZUlo9tIOHwvEp\r\nMflrpkBBUtpsikxrhoHIelVcZAwqrTnNiBzkoe1wDCSGwXJbyLUAA7OEX4ZZ\r\n/HtZ+yXWkS0XGL/4L2jJ28opw5Wtk+e0TdlYw0XnUAyHzTy3lJTpf8IcHQTs\r\n0wY/DAK8jU0488jNBuNsU6m82gqsiJxISXUWhRWwlRTSWuK3+ddo8+bfuA8m\r\n4UlqsDYwpwzZY+SFkEkrBr8+HOTZJvgTj8xaW3wbGJydpaV/k6JJMmP9kBH4\r\nA97ND1tbD1fbwN+QeWmBXiRH3lUwoJIiUJc/JyA0VsbSBIjOhHM+ISSQmijN\r\nQ7U2iJlQRqRwMtbE6ywawWAwh3Q5EUmlotPOhqjNjKU9JhuDGsWBNkNsw11o\r\nxyF6l4VhbOUwGmUIw5OTzPDiIrvrCf9sxDcd/4TZy4VxaOvAr1srHKSsOm5f\r\n+dkXhRCWbfv6p/Ll3KImNuPC0CWrAOFMGe1sFg6jWAGu5m+xd7VLF6UbTypO\r\no/tazUgLMw03M7zDmPre46OwnY+/GLiLGihtyvW/MUn268NNNC3/0mqiiLzc\r\nuJAeC5HFftOPk/7oTcPiza9yPG0fAvlyea8=\r\n=eJro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0e9f697d8ab3c0b93969f61d22a2b06760934fa3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/rtl":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/shape":"15.0.0-canary.d71935c8b.0","@material/theme":"15.0.0-canary.d71935c8b.0","@material/button":"15.0.0-canary.d71935c8b.0","@material/ripple":"15.0.0-canary.d71935c8b.0","@material/tokens":"15.0.0-canary.d71935c8b.0","@material/elevation":"15.0.0-canary.d71935c8b.0","@material/typography":"15.0.0-canary.d71935c8b.0","@material/feature-targeting":"15.0.0-canary.d71935c8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d71935c8b.0_1665044164255_0.24783177919094013","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/banner","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.49c56a25d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4027b1e66b0edad9090a094c51082a75faca9823","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.49c56a25d.0.tgz","fileCount":31,"integrity":"sha512-2hrKI6p36TuKDQVF0PN+lo9Gr1M3+XDA+vXXgaDPzmngcBjiSHPJvZP398MxamDRw5GPdGpi53VQ9JV4yWQenA==","signatures":[{"sig":"MEUCIGhdMaxSmV3mK1AxGZb+1VMGgjHe7ZSgIHW9RGjuAkgZAiEAwJzkg7c485Vs//nB+Gk8Rn6pgONJ7S25Y5zvXhnSYic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2HxAAkcHixVi33zwb6tM0Yy+vSwJ+wLQlztwV4/hLVDrGyOOW4wPf\r\nPpYx93fTUAvQXHcvAEEc8bxifmmKI7XBiq4pKjG2WJ6TGdUg7qYQhXhOh9+f\r\n01FYsmCG/DUnKrj4pyKDKJPDDpzoYzfYJ6UlU9lRRcOpEdnEHtGafdC4Y9if\r\nUlHPVhoMyABoXFRebsipYM7N2xHtMPdxOVwObLkAexC8IfVe09wMt88EWhjy\r\n4Qc9UyttiNfCPSgIg8ty9YSkYxojhqtgaWl8OMpr6IsfFX0q0BATyVE/PGQv\r\n0wyLOiv9KCEqOxVJhKIBTGpQiRF6ggoMpeHHcKyu9cf8JicTFe+D5UB1Svuq\r\nkw5ags3S4ebQvVjIBec+YXksmat9g8zwItTuQeFiYuSEtbjVASkGzb3CtKUF\r\nB4+HPPQNgyilNfxCF/c6Cs92WWbB/5gqEJBMoefqOzEYfRTgIqPI0goDrQFz\r\nO1LXeacrYUvpTrpPvbcAc6ZO7x8arE8CRSOaeNvrmFCeADK52KIhivhB2bfl\r\nEuJ9DFptQMDyjze5Aumn5HMUQXYLiKkVeZMaVXCAQfaN6DjgOgi2xIllswm7\r\nBRCJFKdkzlcKaQxSp5UmSDptIEubIjTF956/Y+ZHcoOqv6guup94N7ofC7mm\r\nIMhIA74gZtmrxmCkqtFiuypJJe/JTl0GIKo=\r\n=FQRc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"46425b4f1ee71ec9e841d7ffacdce7cdc35e7b69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/rtl":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/shape":"15.0.0-canary.49c56a25d.0","@material/theme":"15.0.0-canary.49c56a25d.0","@material/button":"15.0.0-canary.49c56a25d.0","@material/ripple":"15.0.0-canary.49c56a25d.0","@material/tokens":"15.0.0-canary.49c56a25d.0","@material/elevation":"15.0.0-canary.49c56a25d.0","@material/typography":"15.0.0-canary.49c56a25d.0","@material/feature-targeting":"15.0.0-canary.49c56a25d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.49c56a25d.0_1665082324716_0.4639094569226456","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/banner","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.07acddef3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c297825cf8b1bdc97d1eb31fe6e988b3e1c23542","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.07acddef3.0.tgz","fileCount":31,"integrity":"sha512-dUlxYWkBwtEoyOt5Shqa15Yo4mML5Hjwolypl6gD2A2x4UcX/1FsA4P7w2GWYCpfVHQok1EPI727lUeO563t9A==","signatures":[{"sig":"MEUCIEYbxb3m9qb+/0UfKvTVaF8gFTvQ9E2WyTXi8usH6mGJAiEAlec6iG0ExH6V79l6EAadFFdZNtWyjVm+N+sXuNSQHyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJxjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYNw//d5GiNsS9+ABjI5z3MiIYmqMj1wImHZ3vFw5b/HseoMkrblNW\r\nhtLca1zhOxK0fMbsaNplGHaGBW6zNUrEJhg/npJ0Q/llkX1yuk1ic82Zja23\r\nTjRzALhuUicCvQ2MbYz0nPOofvymzzdU0sNQpTa3GXT6XliG/cTkjxNhe7Wh\r\n1mYmCAbFVNwE2mUUu6oV7y5jGi6AxbooCu1TmTq2/jNBNZ28xkc7FLQOm5rN\r\nctLzqeog0E7eJIGBfYQ/HqblFuhi+8zbiFVWodMKsBZxFCxM6814RA6NLnyE\r\nZ4w7peY3z7s/y/D6oK8NSoEBKcweqCRyRK6bT5VNsM4x+NXKsRPsyoaFLgJj\r\nG6PACvDHVBTOx86Y7jO5bqlHtHETOUel34Va2un9bm9ftKijLPw2HFnZMUKy\r\nga257ZZ+qB3djr3bmH1+nyD1cEweElYcMgr9IdmPd/hyLmvgWuzPfqEe44VQ\r\nowEp2ypmPeN2v8Am9bgskiYSZUIdz7BqN/c6XpE7I1AMmUne6bw/HRTcgz28\r\nyz+XnQ36cGMdL6lnxynwJmgUABxgBou5s0gr9Qd1aDJQIqfQF03f9cPGHHA2\r\nsbOhrejqLm+9UR9A9ZBs+mnF9dovcwQtkCAQBJpg3la4e9/On3TwiMujFLra\r\nXfwDTYdzuTH0+AO8LmBk3lH86PtT1trBWSY=\r\n=FQxs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f61a6c26b4bd60354b690448809f9dfb7ea11564","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/rtl":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/shape":"15.0.0-canary.07acddef3.0","@material/theme":"15.0.0-canary.07acddef3.0","@material/button":"15.0.0-canary.07acddef3.0","@material/ripple":"15.0.0-canary.07acddef3.0","@material/tokens":"15.0.0-canary.07acddef3.0","@material/elevation":"15.0.0-canary.07acddef3.0","@material/typography":"15.0.0-canary.07acddef3.0","@material/feature-targeting":"15.0.0-canary.07acddef3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.07acddef3.0_1665178722679_0.9749872786863918","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/banner","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1c74eb2c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"39552bdd853bbddf8ab1ba6be3b767d4d7965913","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":31,"integrity":"sha512-lW69+YGA9fzr3DhuK6tstIaGngtOeEWccVN2r+J6o0JV4PylTp198jlgSZrTFyh5EoW+ot7xOQ08NO/dPC3EtA==","signatures":[{"sig":"MEUCIQC1eziO5ymps9kjbyGTplNnbbXv4W0DkC4XrXmaDZP3ywIgRg7EEedaU2Acohu6iuJC41kTf7h48T/YE0q/2y2AsxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKCcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoR9A/9GkoYJdr0QoJWbeOpafHkd8RCYjo/pXxL66fQDFs38LNPIG7P\r\nMn9nFncw7c4ge9TzLvt+NmMpUUyNNdqfwIqvT5x3W7e+sjEkaAB4ebr/7wUv\r\nyxM9EdnwwDGeDEvOckyEc0wgNMF1uQFsxF6vmlBMBVQLcVMjFfuzsZKXVPai\r\nmd5xptlwrAmHVd4oia6dJe5iMIrTwjyYzPbqPDzwUJ46pPbbHvb7cd59SO3a\r\ntrqRjuBiLm5JzDfuHwCOWz6sC27RqqCICtme1AxBIHkGScrzNxaKs3y2PlJX\r\nHGaMbFfdwFOGUegfGO9d5z2xeej6JyyenrWdEN3fNHCeeC+oFw3xKuzx11ma\r\nKVabgeWvMVPPTf+h10XkrtJXhYeWWWhSLdC91SKmxuxQr0+OdoicL9CblmN4\r\nlEF00q1fLNE0dULsZ41e8iO+djDLMZNWZ7n356cswq9gmnuVpezdd4rYfd9r\r\nb6Ot0VH9XI81M0rgX51HyVL1ZLBvyzEzw2vwEUfsfDMjAZupU5K+OttxjpCW\r\n7YyxuNCfIL/0MldxIpuWkExRdZRkcCEvvueGJtJmyM/2c3Q2AdkCkH1B1FzA\r\naRWIs8NTzL0phrrUwSd9qOSZ4m5BhMBAOhYBys6FlTcZMSci0nuoa4M/lAwP\r\nCMptvyx2MLHDQp7QHojtArL0iXjmY85DPrk=\r\n=HGL8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fa2e48f4e71714ca4a637a500ddf18f562031ba2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/rtl":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/shape":"15.0.0-canary.1c74eb2c0.0","@material/theme":"15.0.0-canary.1c74eb2c0.0","@material/button":"15.0.0-canary.1c74eb2c0.0","@material/ripple":"15.0.0-canary.1c74eb2c0.0","@material/tokens":"15.0.0-canary.1c74eb2c0.0","@material/elevation":"15.0.0-canary.1c74eb2c0.0","@material/typography":"15.0.0-canary.1c74eb2c0.0","@material/feature-targeting":"15.0.0-canary.1c74eb2c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1c74eb2c0.0_1665179804101_0.804696726912445","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/banner","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.dadfb713e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"382c5fc3fa965c37e5e9ca6ae39832bde9131255","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.dadfb713e.0.tgz","fileCount":31,"integrity":"sha512-CbquPTwQQotEGJdHyf8NzfJTnV07puET4SB4jfAIQgfVCSOm9KMI4pBkibSx/t5XN0IGt8wCUVOtKfSrcAghYg==","signatures":[{"sig":"MEQCIHqltWAt8StMyFixRD4lXKmPeraIM2ho8c3vLzRY01NLAiBDzmxs3eRJC4/6s/TpJKuPKSEKcYzk6jfXiGWQdfhcmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQVtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrJA//VoyZvwsVVCXJyZg+6bFlyl1roKTTHYujsqGRoVIGrW7aFDHP\r\nbNCWmU94PfR/VpWn+2yVhTb0+AIFHWrUbrCGkb0LsUAs1iOlBzCC5z48KMuz\r\n+6jFA5MbaKYYnbSMf9i2h+009EgWXvG9YEhiHS8EwdHLttoviTVn0eXisl9i\r\nAuYhHezXnqfkXx0EihY/JXM0PnFqZS24TaD3aSzlN8Ukn991vywfxrYH0J3P\r\nNEOb2c7bFJhwZRJFCmdcXKJ6iqaOq7weIB3YpmGQqCBno321F97xkaZ0qyRS\r\noCl3cd3KlNaSQ9aiK9Gyc/U8eReA9h4KHI2LqbKrn8BOp7IybbA9SF3FbNYi\r\nYzQaEHJU1BkCCl9+sfdYLukHK3dp544NLLYBLBNmph2VeP2r+fnzjB5+6ryp\r\nNyOHHc9nJTR0qc3YOq2vfNMN8JJ6EYsmDeFPBILE7AuL7jxX/W+KOtb39wEf\r\nC5f056bSmnxDhLlAd60qnjR6mOIj4RXpYs1qrjo/eD03C8dNv8edv7Snz9BJ\r\ncAaDWTiAlRj1lCXvIrc8eJTDr2PeQMLghxXZ9ZinAfd6INwkPxEy/NqShalk\r\n6UhsnS82DfZs7j8nCy98BdtiW6eB/o4Kw8R/ZNCcxJtgsUn/naS/hyQghPnn\r\nwaV353KszwTrlf2rKtvALwQFxFH1HKPJfJ4=\r\n=SmtE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dc577772f45028a4c4dca1d7c8ca8dfcf636e763","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/rtl":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/shape":"15.0.0-canary.dadfb713e.0","@material/theme":"15.0.0-canary.dadfb713e.0","@material/button":"15.0.0-canary.dadfb713e.0","@material/ripple":"15.0.0-canary.dadfb713e.0","@material/tokens":"15.0.0-canary.dadfb713e.0","@material/elevation":"15.0.0-canary.dadfb713e.0","@material/typography":"15.0.0-canary.dadfb713e.0","@material/feature-targeting":"15.0.0-canary.dadfb713e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.dadfb713e.0_1665205613246_0.22409966620238464","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/banner","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.395f1ce61.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ca4d54c6de5bac7f2e9cb3456d480ae9e69dc119","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.395f1ce61.0.tgz","fileCount":31,"integrity":"sha512-sw/61s8RAq1lKOnuLyAxy6ENGO2gdZhnkyAsxGN7sRvhvzZCm/CxPvcB0tR8hhrdAx9eYVvQXIVZ8onQiEI8qw==","signatures":[{"sig":"MEYCIQC4+lY2Au5OUZRuCM+CFGbPIAhGDH9WxkCqywolGoelywIhAMWmZNE/P//SjUycroqqzyR8liiZrnJjroQWp5I/x1JD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444286,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQXlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoxOQ//XUFQRjyPckflWDQNP6COJjdYWN3JRo3QESAi9yBw9CwcA5AC\r\nx40GMZ3HoUVdt6quRHAlvxBA93cJtiH/P3H57YcaUlAxRkL433C1MBGW31yg\r\ncrTchFob6JdNY4DcOizLjtdNOU+k8xi9b84Dv+8p4Oco6vXiaRXjVbxRJude\r\njqh+okIl5D+InxgpVlMN4jNOWhCwtmxCx46cozJEn9bEpKSF5fdRXR5c1zKS\r\ngtGXWLi9RwxkLhQ6u+ywqpNSaDtmNr6FABJ9UDvnEfI2Gx8yp17+RB8t9hTv\r\nUm0h1fXQjrGkC9YPOKmz0hje4W7VyNE6juQvygOenTRqFWGmVBszSDf6uomH\r\nhZ5Lpak16fOTwMPft7tm5Nrb6I0a3bBAVE7Trzthjhc8aBnoTsI0M+b86mHl\r\nXQDR4qlp13DbyRuCRyWKNntcCaRkbxAKSy7KPgenKeJUFJa9unEX+gsxBhtj\r\nPzzDK9Z0Mbz6PVjV6kCKyErOBNe7UgmSULvjF6P1ONRhzksB53FGJltgzKDQ\r\n0KNQ5NebrNzHW37sF5wopOPAzeqRxxu8IgN2lgUqK0c/hN4V4cELm8BbpTWr\r\nxogTTI4gOBIvHw9aUzlwY4k296KCsqK8TiNuZ+dOYJ8fbvgy7EwPE71yJcCV\r\nfelDVDJG8UsBi4q/szab8+l7fBFPB3t6EGU=\r\n=wim1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"15a2d954f8c5260da0e9b6f65b6f49df69764a95","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/rtl":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/shape":"15.0.0-canary.395f1ce61.0","@material/theme":"15.0.0-canary.395f1ce61.0","@material/button":"15.0.0-canary.395f1ce61.0","@material/ripple":"15.0.0-canary.395f1ce61.0","@material/tokens":"15.0.0-canary.395f1ce61.0","@material/elevation":"15.0.0-canary.395f1ce61.0","@material/typography":"15.0.0-canary.395f1ce61.0","@material/feature-targeting":"15.0.0-canary.395f1ce61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.395f1ce61.0_1665205732951_0.21708742858547314","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/banner","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e741b5c82.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f86795ef67494d24dc6da896ed61563a969130fc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e741b5c82.0.tgz","fileCount":31,"integrity":"sha512-SeA8RXJ2GaWLtKSO+S+DH5gVLWhCDhKIfoh9WgmYHIJ3kzgzR1pAd01PQtb8Cz6z6kL1nZwCihdYzCEN0IMNvg==","signatures":[{"sig":"MEUCIQDol2C7ZowWek+O/UVvqDnz4YHPszIF+1TncJKPWS0UfwIgAMHFCbWWN1npvJgCixHGkE4rgmaTCGN+WbS98DKc2vM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFjGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlXw/+Nltkaj3E07MJ4/VkLnEXSR+5MiUmJje430SnKSnPnXoIYeQy\r\nSNJlIMXB6R7bR0NLVsLq8U5tyrsGdTg4NiihkbC4L+K9VbGs1cuOgIXHlZkk\r\npdLD86NqweYPK5u++igXsek6yknlRL6apCzpmHb6cc9H5rb8TOHFEQQINchv\r\nTrUnYq1/myoioGxGIN0IAB9hvpwELHMVTaWjdJtM8Xdqt+YmD3Kb8UCSg4Jj\r\n0TY7SU8Z6ZIQLlOvbfo371bj4JpnI4bTCwy5NlIYnuv9P9q0M2mP+J8XZC54\r\nhRbKH4NqHd3X7NiEF1oS+u/BsKgglu5h1YMvHRkoU0H2q0DvflSpgD5OCBLr\r\nNNjXJddJXCv5PwcZPq5+NPwgjOlBYk6hQHkzkAZkIJC9ngXXXYnhlp/6V8hf\r\nVn2N0UoNijB9KarUiQe0JR1gFBwCSOsbVAw9J2/WfBsy95gmFbc3AT5qwgzq\r\n2olBeJf8FRTnZs+R6aiQnxM5oknQ5bq5m/DakxG0N3+E/Udygfg4eBdKI1nb\r\nHbuczmH+UUgMIFLBCOfg1HdnbUPGzC9mGUg9XVJeN6hiL0su3DNSoNBwqn5G\r\nqy14PIRhHKgPTCENuLGFS6PN21RC4cLQrDPpbyzZRAIt9mDK2X0A2gx6zgNM\r\nhGgLXySn6ZWSTguxJK97NfQY4qJKAURHBz4=\r\n=1gWT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"489583dc41bf06c909feb0a87f9679b40fe6c03a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/rtl":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/shape":"15.0.0-canary.e741b5c82.0","@material/theme":"15.0.0-canary.e741b5c82.0","@material/button":"15.0.0-canary.e741b5c82.0","@material/ripple":"15.0.0-canary.e741b5c82.0","@material/tokens":"15.0.0-canary.e741b5c82.0","@material/elevation":"15.0.0-canary.e741b5c82.0","@material/typography":"15.0.0-canary.e741b5c82.0","@material/feature-targeting":"15.0.0-canary.e741b5c82.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e741b5c82.0_1665423558518_0.7008388807657133","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/banner","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.582f3cc1c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cc2bf2ab33c4195a389ca9d70419ee7af978b60e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.582f3cc1c.0.tgz","fileCount":31,"integrity":"sha512-/5kcooQOaaPGKkM+00917t69Y2Pq7ylbFyf53TmXCeLAypXdvY3kJRA13fmO1PKBzr7xqa4jfTqpQNYTNc9vVA==","signatures":[{"sig":"MEQCICYS8etV0ffhjuqHjcpuTj0uOffBlL/aG2Bn788wjIpTAiBk9Z7e/EhCI3URmf5F3QHnIh3Dadz1toyzbdv4LbGpEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPYEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocrA/+LJ2psJiMtSpnKImfiPhq0nHVWetUqgoyrKvYsVtbh/MnrxtC\r\n97QCYdA4jpmdZPbo6TwaaIQx7gJ68Bu9hNmjjThQFwu8bvZkz6JOt0Vs+E4J\r\n64NgYCsXZftppyPLXYsvwSsW8mt9Xwfc7S8gxg7XhL2LwizYrBkRVGcPYQIm\r\n/ibh0adWuSDpzpER7frTA+LYCjIYE7DmFflSgHutgrz9x4WflfRjpIMSZBYH\r\nBhYlp2lq0Y//6wngyK9M0tHw4LaSxK1BFKWeUaN2LW83C3tHeIRpbNFVkmBw\r\n5tHbY3ji34jKHxBxIg5QKN675CpokaIbU8YtTocB/VU97rbGuuyvLFz/9y7L\r\nfXIaVsB2IBZWXHmk+2hQ259RTKJrVkyQE/Ut32heWdMBJ8Qx/BG9fF8erxQ0\r\nHUigW2Z8HogWOFJZGc4U8bSsImaBQTrOaZl2rOKABcQTLUKbkipRjImV4xTB\r\n7OvHGsuCYq5vclMoEvrAHvthqMcjgHCwJKEigBoyQxetU9dRdaw12RGqZxYS\r\njyJA6Zs6ul1rStFeu9qMZfKLIyIMyMyvTniJ/M4sTlhmcmWdzYpnUFmZ0eRz\r\nCss0orI9HZN4Rf3BSPgpNI8LwEHeTiRY10gGjBgw6Maa0hgPXhvh9vmcBY4W\r\nTOxDGjrfAhBftMonBbRqCjN2MwYL5wzhw1s=\r\n=YRp0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9910dd1f5b3fa962bd02fe552774781896efa7ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/rtl":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/shape":"15.0.0-canary.582f3cc1c.0","@material/theme":"15.0.0-canary.582f3cc1c.0","@material/button":"15.0.0-canary.582f3cc1c.0","@material/ripple":"15.0.0-canary.582f3cc1c.0","@material/tokens":"15.0.0-canary.582f3cc1c.0","@material/elevation":"15.0.0-canary.582f3cc1c.0","@material/typography":"15.0.0-canary.582f3cc1c.0","@material/feature-targeting":"15.0.0-canary.582f3cc1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.582f3cc1c.0_1665463812717_0.8921552616263446","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/banner","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b1a6e3e88.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"363fcf96d1316870a3023851fb355802e0c52c0b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":31,"integrity":"sha512-jpnDv+7c7nBa2DSkclZhRUQ8ol9yU22XfZmIOcF/gL4FzIY3ExkubS3/CwY1qCBx3Ddeg2ygODDz7VtYFPKlwA==","signatures":[{"sig":"MEYCIQDQRgweGrS2ZEnjYSiVS5RsG6AZZkPPcVrMzkNdyWzUNgIhAMpvA5EnWX9hoAoGAwM5mqAP4pUPdpcW1EQvgP8BmY5z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRq0QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHOA//ZRvqZZZ5FfO3RYllKemgN4kQwRYEs8H+S/QHyVLTRjiHYjIt\r\n6XZptjNmc2J8ywgPRt7S7PSUpyMNAd/9AxfNlFXUpH2TkreLBJ076Tg63y6x\r\nY0NUMIXmoHtMJQDWntRWj0xEPwyJSBasKSGAsXWzDx4PcGKBHlmTYY0leS+0\r\nBAET0UvOzQ/xtdbqo4Di1uTd6WMtG0vDJAZIQPOitxIXw8D4pytyUP+ClhS2\r\n7b2HjKaQoVGbA6ft5u1fve2yvbe+7Sc4oIirCxFCRSJ7DSz9EHDZmu+LzoET\r\nN3nCicimgOarJheG2arCxRmG4q8UJWtD0IOljxXKaBW+VmEk6sI0B2VxRE5C\r\nzSqUIusYYsHs35b+t62NSLwsrLtunTZpQxzHmsAaO/+SGaU+sqYVGF2PkW6p\r\nDF8C+O6Z0d+RIAILTpdTgOnkvas2/T/Inidhn15W0ZfrsjF/lzERnwDL55Ix\r\nna2aO9Kl8QhRGybEMuzuE3hRgTUWbwFNuIbcL/Sz9p4BBYzIzzDW76Q5akS+\r\ncSRB9jI1eSjJ9YnRG4yJ5rQeyAZGf31o7fyLWH+kgfAPJvCFmbTVptf1trk6\r\nV5LJ6pckyGQ3uzXsmGS0xezGxWCgGdbIcXnt7bK8p1iC23ezTwoMIxBCzka0\r\nQOIUh+M62u5YWt/rX5DFAhP0/UGAqMwXm+8=\r\n=1TLn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fd6420b1b81c64578026927a4acf4ea73b7358e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/rtl":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/shape":"15.0.0-canary.b1a6e3e88.0","@material/theme":"15.0.0-canary.b1a6e3e88.0","@material/button":"15.0.0-canary.b1a6e3e88.0","@material/ripple":"15.0.0-canary.b1a6e3e88.0","@material/tokens":"15.0.0-canary.b1a6e3e88.0","@material/elevation":"15.0.0-canary.b1a6e3e88.0","@material/typography":"15.0.0-canary.b1a6e3e88.0","@material/feature-targeting":"15.0.0-canary.b1a6e3e88.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b1a6e3e88.0_1665576208591_0.6209407349128742","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/banner","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c9b1a31e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"927cb23bddc185afdb5ae651535a4bcdc42ade03","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":31,"integrity":"sha512-4bXp0vgamLzCz8fAy4M76w6vU7K+SXEM+CGGzXEgHbfaxrwu7cOsLMJuOsepTzfBeTtbUS7yojZ3alzf9Xifjg==","signatures":[{"sig":"MEYCIQD6Jj1Qm5yaM7UWENewDFSfBJU4vWT+/UVysmpDGiNaAAIhAJaCqfMRrInVaJiTalb7tVArP9ZNTE0RhWCIxutXcjnB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvJ9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSXhAAiMHoV5eCGE3/Np7K4qpURtKBJ6OzdQsGXI2Hk3PEBbj8x7e/\r\nY/JL6yJ5uIJxQX/sLGS24ofqCM8tb5WPDa0cBCvQjHOwK91rfT7vjXjrUSec\r\nzXjhj10yQ2nEcYtsks/yi2W1bJxKlNsJpHroDRvRPG4Q1NxWll9q3w2zFl1c\r\nt/GW9nd43uvSXxxbix17mYT/gPOr+dT+I5GoePacv9WpW49o8u9GRSEWUXRY\r\nGCjp9isHkOisSDuXK4vlkxZOPYFJ0hogcj8Cg1LmoyJsrXT+Bk0LYe37tUhA\r\nI8bmZqWEMdz6f+W96+tUkaxuwDXrOnfus2BMCSvpwCug8rW2Pa52J55I0F8K\r\nHJUQsCO1WzCVJqquE9an7dGZBa1ha3U518upW8pQi20vFuadpiS8iFxhbbZd\r\nkUj6AejHVgv3AKGXubAPsJlOV6mmqfbkAxWuHf3gcJMDbIhvc0KUfx/H3oKb\r\ni+xmpGcMjOn4bI8tVzaGX2qmF7GPby2EG/wTALCVS4BE2vYK1HWzGAbyPIdf\r\nUuzCVwdjkeuhg/PFku+Ytf0CYEy1ZaCnR0vph+/ufJPJd6YSb60dAjxVNWAm\r\ne+cJqGXm1nzVcP8N3Jue/GBjeMy7H534Pqf5/1LaNG6CmcZg9p2Meb1tDUoY\r\nw7gFpmmvHiTLEimua5bgr6d+moEOOti9ggI=\r\n=e3DA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f7a6b71c85fbf0d1a9db952402e002f8421baf4b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/rtl":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/shape":"15.0.0-canary.c9b1a31e4.0","@material/theme":"15.0.0-canary.c9b1a31e4.0","@material/button":"15.0.0-canary.c9b1a31e4.0","@material/ripple":"15.0.0-canary.c9b1a31e4.0","@material/tokens":"15.0.0-canary.c9b1a31e4.0","@material/elevation":"15.0.0-canary.c9b1a31e4.0","@material/typography":"15.0.0-canary.c9b1a31e4.0","@material/feature-targeting":"15.0.0-canary.c9b1a31e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c9b1a31e4.0_1665593980916_0.5626954835816989","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/banner","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.13e9b0d1f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"62a7275b48a5dd20d99573d1106a33f970335e5c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":31,"integrity":"sha512-f1qHqHYU+TT9+YOUQG2ioIOpKeyY6TVwIlYfMYOxWj8uj1VSOX75sB7mbVYnQGGzDP3V6HEnynZzBrZ+KqLpsw==","signatures":[{"sig":"MEQCIB5lRRwv92IjPhsL7X3hFy+4WhMKkq7HDY0X7n+QtQ4CAiBSEwJt5VLFBKP5tXzw4p6zOXbpC1+hj/LxqrNwHCahbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxPsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp5uBAAga/LW45NzMMnX3WSzGykKHlx2GAfgeDiHZMWlfj1LsjU8O59\r\nWyQT4U0AOqAjApAeFcdT5FXaQsH4RCPWdYBszypkhYxkvA+uqA2JUPFMzWbp\r\nY7FrPAYqMVR4QzIMDji+lM6q30Jzdxf5iioNS8f0fs7Er4gDbTnokhtEw0L4\r\nOSK6kNXmcRFm1UuYx7Z2lwu0oheOgooN1xmQWxO3qTEJFbRMRKHUnx5BwVwA\r\nMqhccQzS/Wl4SwvPa5a5r4PWXzWh/ZVYCNIe3H2tVaTw9WLWTxI0YFOFOv2i\r\nMYnpn5oMQO+bdhF2eNY1TdVxH5uCK5BUoCYb1c2mAhn7Yk2ZGgJH4UiSqkxS\r\nvQbQjCs4mLYmayWzdkIMlrKT63lCXjH9C8Q/bk3s1A9FM8IYHtUydZw9QoHb\r\nnf1SWVS7/HuocV72hRBqg8LVp5DEi142G4M6jfKlf8ICYw/Qt2TB99nx2+FA\r\nwHm8qdKPcBPJX/ldmz1IkOAf8Xwy+feM+mRd2KhoXzO59t6CkVn5B4PuxsPI\r\nKC0wqYnm/ErrLBpywnPF5OIvNOKqTKT3iDvhJi8t6oyK8d1cPEfk9hVslpVV\r\n4wYi5YZ1RmKfuthUzm4sFOGNN4Gpj0XUMrPZO+TWPlquc8w8TPKmAm1y6+ED\r\naFhurREDOcu0V04AdVA5juGvTRZe2p4NWfQ=\r\n=N1Dl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4d9f6e4f27b68587a15ebef6f003f73cdad60bff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/rtl":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/shape":"15.0.0-canary.13e9b0d1f.0","@material/theme":"15.0.0-canary.13e9b0d1f.0","@material/button":"15.0.0-canary.13e9b0d1f.0","@material/ripple":"15.0.0-canary.13e9b0d1f.0","@material/tokens":"15.0.0-canary.13e9b0d1f.0","@material/elevation":"15.0.0-canary.13e9b0d1f.0","@material/typography":"15.0.0-canary.13e9b0d1f.0","@material/feature-targeting":"15.0.0-canary.13e9b0d1f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.13e9b0d1f.0_1665602540613_0.394239479816175","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/banner","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1dc797e7f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac5a61b372d7a3ad0b247ca15e10dab541c2869a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1dc797e7f.0.tgz","fileCount":31,"integrity":"sha512-sFJ37a8c5rFflpqFQpG516WCwLcY22gXYnu9Q2ORm4qjOG4q4nydueSfgJUSb1vLmt4t67tamUpmPJ198JiHLw==","signatures":[{"sig":"MEQCIBzaXfUoP08Ekroqu8ePqowttRQFpUJH0OUM4OIMiBAbAiA17szUcWPJKovrZgblxQ0GSZAP8DlMnMbWNovBBZM5LA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS8XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4qg//YR+LvB/CI81cZSeSj8VmJjitTCgO24xTuDPBouHMr2l4WEBE\r\n+g7p4psDMQE+n1b6otbe5h8e6IEK/CG5ar1vqDklHfFqtmljJz4XZ6Lj8OT3\r\noHk3DlFUladRDJp0YgoeWZO+fyllUUrN7nFekG8I7DQ1HAYg+DYeHVD01XOm\r\n3K7SpLVqetZmZLG8bhCl3nBrUTDixdr4zEvmxJqhQlxiiraE6k9dxay855Kb\r\nV+7IjOnwoJSoxfoQMqa2xuok08kNrvuQEnqQlxLMit2tdiUa5xoFJpz3z4dG\r\nHBwxBDJgTgf3flgIUKtIVdtYbvPF2ddrHKDAmc8sxbBU2DpNLXhn4yNxdZGN\r\nL2Lcegvd+cTMuQ5JWTTKQ1H9TN08CuKSiCe3937D2udXp+mZNKN++QkMCl/d\r\nzvkSmt3PSQRkCCH6u0mJFZoYrg5mtzgooZjyC2rLx7R1hstdL5VfjU1lMOAt\r\nsA4ZEV0pS+7A2s9SNdh0bq9gtXMcIXjPr0oUemPd5EdJcbg+aUxeD3ZraLGV\r\ndd4A+0abIQeOfCd7DGRNR/enPSWV9dsZuZ4N/kcKLtuMda0UndJKCCb2f5no\r\nqHr3uapHQNYNmB8tP6iUg5DOgSexjxDVm1W1ec9sQRwI2cjI8KDdwMqi9nPB\r\nAtpvLAaU9X6iG8vMpU/uoJcA3xTZUpE+1uw=\r\n=xuoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"22eb0904d0b7a84996854bc57cc417286deb08b1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/rtl":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/shape":"15.0.0-canary.1dc797e7f.0","@material/theme":"15.0.0-canary.1dc797e7f.0","@material/button":"15.0.0-canary.1dc797e7f.0","@material/ripple":"15.0.0-canary.1dc797e7f.0","@material/tokens":"15.0.0-canary.1dc797e7f.0","@material/elevation":"15.0.0-canary.1dc797e7f.0","@material/typography":"15.0.0-canary.1dc797e7f.0","@material/feature-targeting":"15.0.0-canary.1dc797e7f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1dc797e7f.0_1665740567166_0.028114849798774655","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/banner","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ed4009397.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67971d1f3c9adb36cadc6693a1572e1016c6dd5d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ed4009397.0.tgz","fileCount":31,"integrity":"sha512-pFucvYCH2z6V3eInxB8laxrFqVn1cDury+2ysQYuTrRfyAm/98adou8FzwD7cOReIVlr1pvvZ6sNq8qwagG7zA==","signatures":[{"sig":"MEYCIQD6E0DWDXZwl0HsLgcBYReBq4LDW2tyFO4iM894hhnjZwIhAJWBYu0CpoQvGU1oN1mHJLohEmXV4yHW8UJXxhZazf+q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZPDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjPg/9FIMRffzpfGG7veAa9bklr/o1ePQV9RnT9evi00t5Fr0moz2N\r\nN961CvjPb+7l/gNj2qZy4jIb5tI0ST51n4sSPkwUpYA4xpIEDhO4UYFWsRb3\r\nrveNgKWzIqjDkV9OEod7ac3GE48o7QLdKasRAgaBMNSD4H163D+vIjHVttzl\r\nVaznUPPCRKOjliuiCEN62ahTxoJ6Hz629ytlshg2WuQ50QHvG889QGmM2FoB\r\nGoJE7Gb2IayB+FjqqLVKWZHHtFLPP2MJFspNtYh7JeJy73iAgpKpaF6vBLkK\r\nbqx4tavKi8eYWR3wi73LXWpIfxP4sFuULXHEVRxHbE9Qzt/gCUu7/bR0XZYF\r\nPGcv2qhpwIEp83BsSkRLZVnsBwOX3qehVEoPs+n3eKHTE7N3e1eWu1p5/IJi\r\nz3KHGi2pZjScaMxksi2dC2EoYAo/IGcYJGRuquXqRZEhI/wftt5PqFAKh17o\r\nnvBUeoRZkR1i6DBQq7pY6y4oybnEZSOlN6RpkyKhnbyBntIEgN32JbOIWjvD\r\nNiGaN9RVfdKr9rgArOfr8dK6myBvDs+OTk50It8Td8yBhJMs8/VMzKdBFzqQ\r\nURJPMoUrzyjXf4b+pvSeDpN0R915vJeb/A6Gpj2F2sv8hWQ3ATIuTR24BAI4\r\nAIx3OnkhyyHz3zguqGmSCGqq10ahSSx9s7s=\r\n=Au4I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a749634198bd160446873ac2c5cf3d4345b1620f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/rtl":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/shape":"15.0.0-canary.ed4009397.0","@material/theme":"15.0.0-canary.ed4009397.0","@material/button":"15.0.0-canary.ed4009397.0","@material/ripple":"15.0.0-canary.ed4009397.0","@material/tokens":"15.0.0-canary.ed4009397.0","@material/elevation":"15.0.0-canary.ed4009397.0","@material/typography":"15.0.0-canary.ed4009397.0","@material/feature-targeting":"15.0.0-canary.ed4009397.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ed4009397.0_1665766338760_0.06930261567696228","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/banner","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.95ef196bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"17465ffbbb110b37e5727025f6dc36eab45d4368","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.95ef196bc.0.tgz","fileCount":31,"integrity":"sha512-IoYRQ5kyvKYLqI8CZyUK7eQbLjMnxgYKbz877pvU/QcoBNr4WaA+NXt9U2ZbJQy8WqCi8MIVS4dNeZVAeMugsA==","signatures":[{"sig":"MEUCIQDVgCBLBEi38HfdZFoDtqMm7X8kTVuZDLvXHJ2WjodRjAIgBJ1cv7ZXA78+NKUKXkpm1njcJzUksLLfuniZs1Rb7eA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe12ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDAw//agh781mxvO3JcoisOqf6ZLs4NgfF82NoHGYzJalXlrU2plxE\r\n1PXU+D5x9YGPHAffTuNFoQPHYUdJqyFnTJBtrV1mtB5fRDEgc4Nt2ghuCGtM\r\nAykuWBHaPMyaEHPR3CHDbvd5v+IPWN+qkNxOK/cDyKVThSYyQe+SRg2RSEmA\r\na6w8c+3nDNQjT+LivFXC1QeEt5xxNnOiHANdPzf000rX+n63OuwMWNYwsPo4\r\ncF1p2vidHvW5ouGUcTng5BR765OvQK6RbeEXTFRUuemtTF5QLCXCJWYknTTV\r\nnhz0KR5SaXYBJGIKjFyLLUSUrbcbhjqakJnFu6xZoniV8BggAL6LYSqSfO6N\r\noQqLenfUM+9dxYan8A/JEX4C+ydoRiEYMJWF+vCR9NUpFM5i/XDL37tUSumJ\r\nxlbW5dqwCs5rCHNGTjJWTD16QXbYcVXJ1f4MlVtkIgx1WXb0vEsCF1dRR0O7\r\npdIUFSEyQsOA1FdzgwHJpeUzL4x8Qm103nIilrhYxa5J4Spa3rfMxAAnvg5N\r\ne8Al28Z31zgEnmaNrRZgczDJHkoeLTtBNofHjGMUHb4OhXL2k2QqUkP9EG6B\r\nA+A2ijzU1w24wRo5dmWr9E4uOJW4T368tXFAq+M04QBYQje6mLPlIWwGw50E\r\n7XpFRQuNgCcfQ+RwLQwkRmAi6zNPNzqY3Dk=\r\n=gZFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c133997c8c45e50d9ebfe12fabab75ec90d244e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/rtl":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/shape":"15.0.0-canary.95ef196bc.0","@material/theme":"15.0.0-canary.95ef196bc.0","@material/button":"15.0.0-canary.95ef196bc.0","@material/ripple":"15.0.0-canary.95ef196bc.0","@material/tokens":"15.0.0-canary.95ef196bc.0","@material/elevation":"15.0.0-canary.95ef196bc.0","@material/typography":"15.0.0-canary.95ef196bc.0","@material/feature-targeting":"15.0.0-canary.95ef196bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.95ef196bc.0_1665789301604_0.9969795961906527","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/banner","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.13eea1b2d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7d6a2da4c89c1f2720060cf98fa8bd9ffbe5178e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.13eea1b2d.0.tgz","fileCount":31,"integrity":"sha512-Sga2sLUGP0kdjaSlORfNkA7+L4QKHCyKeQCnYimJuY7h+81iu8Cf7fXcAq8dWp9+U4nOEB8CnZk5ku7QRslAgw==","signatures":[{"sig":"MEUCIQD78kZmijLog80mICyoDrZ56qjtRHFcgP3LxNPDxIzKYgIgO8IvTFMhztUsxAHi27/cA5f/PC+suI911j62wAxmWcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNGFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMXA//YRso4Ap8+5vkL6XJ5sHHzkWy7zw9XUF4Q4UwFd5jyFst19nh\r\nH7IEL6n4gl+ztntVSRF4L6YqXmKimHSKbnjH35yrMIv794Arnwys+87PIql6\r\njip/qD7G/54nJePR2pnZtqVT78M97fbro4OoNuHZ58kYs5Cm7xbi0mexWoou\r\nZluLWRg8w9l9wS7Zj8pLIxvcXtdCv4ealmK4eCgOsnH47/F0FRvgPGQdqwdL\r\n1FXsoboqqSLHq1Dws9POKdQ6uUdEhptl9q9s7PYRd5a8+ApEmyfoi/sBBTcp\r\nCIEcMs+PBcxRMdxHYuNd+wb0R5xphaQ7nLcpQiyKAs5Bg6AVJETC6oJstBf/\r\nS6hDr1UuSdM7W+R5jzNb2bIeqhwW4+sHjfeQTFfo+miqCkk/03GaazY7Wd+o\r\nSMwEQcW0pfUBFQzD/ioeUQ6HSKtT0cINaiFU4caFYRQzzTMd+fuoR4FQ6PBb\r\nTNS9jQkTxoUVHgVtUbD2lz3akRF+mZuxHysMOY+zJeoFrJsh8rnqWhNlL8xp\r\nfizvhesj1x+sqWxm8OYpvWyFfmZWj+QAaLn7lqo6ZYy3FOKKlt+bVCWuHfYp\r\nPivyzZCR8moD2Xg4/HDJudmnrrxVpMh1AeMu0+ZmWO1XSImUTNOeEvhYj4EU\r\nD9QPeqjtdekOaV6f3X6V5dLJjM1Rfqe7Mvk=\r\n=5lJV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e9a13860e495e7f113966b4c71b9c7931a32807c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/rtl":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/shape":"15.0.0-canary.13eea1b2d.0","@material/theme":"15.0.0-canary.13eea1b2d.0","@material/button":"15.0.0-canary.13eea1b2d.0","@material/ripple":"15.0.0-canary.13eea1b2d.0","@material/tokens":"15.0.0-canary.13eea1b2d.0","@material/elevation":"15.0.0-canary.13eea1b2d.0","@material/typography":"15.0.0-canary.13eea1b2d.0","@material/feature-targeting":"15.0.0-canary.13eea1b2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.13eea1b2d.0_1665978757628_0.6321089753503428","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/banner","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ef9b2babb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db45002e11c50993f18a9b10fc9b5ba3ad4e1042","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ef9b2babb.0.tgz","fileCount":31,"integrity":"sha512-CS9Q/7Y01vDHdPCFXvmcmgzhYheufH2JzChpWgqNq9XBAweHlVhVx8SQ9UfBFi2OfCeA2Xk/OO9AE80VU7WAPA==","signatures":[{"sig":"MEUCIQDdMdA9NY307y0m0+JSNw3GneS0kbafp7AJY+xVWDqpfQIgblasZNyzXgdMCarFD439LulUDMZ2bSsK4tFKM5F7LuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR4SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqTw/8DnnT9z93Frv3neOJSsfCVYTRK3FV0qH346kZOEuYW00/zBqJ\r\n1FsuO8CAENVGmY1Oh4C+HRHoViDSKQIFA2C4X8/gEuicUxclmVAotipfWANW\r\nwHQTgO9hNuekODqT8uabSzBEPrqOPQd6IWyfTuRDc8N94vef4JzTgzoUmmV8\r\n6uEjzTw8MqwuC2/cgbMf7hqw9rBnXIAHWqALuWWWMsvBFqw3to1Zy4dKMs/z\r\nOV4lvM/7M9ZCClNXhe31D1jinZxjqKvSbqGkUq3EBl/vF++ADC3/p9mk+NMk\r\nTizALu55BwDqm1LM7wRztMqBHTMYKzkfLONbrVH2u8FBApWlPF2l2NJp8lX5\r\nL46cXqgrgmcOeEwI18+k+VPiRpbP8vcXTGsUo5mC3L4mgdRQrtHQ97CcnC5Q\r\n+qCy/rjMHuJqInhjYvvrSb4pwG9pAc840jBqwBSkPgJTNzLs3KycOM2pNP/V\r\nYEy+MNHgZc+nP/1GETdRpgOc2IvLXUcj8dtLbwQ04nfKlA65nzLo/L7wOxj0\r\nF7Ub4ecdhe60K7iz/mkYNyDLex6cBhnW/FsJWQLyi80Z2geRxq9YqUBaUes2\r\nAaBItEjRYso9qgbLiRa3zajL02IZkWHGQsVtzdrVTn93oZWAXAyWkuAoXujy\r\n2Wg4FehaVZHVEaePojFGokFwBVSPoQwesRc=\r\n=WEmz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2e04dcc89ca80bfb50d7ee1e4172ff9713c149ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/rtl":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/shape":"15.0.0-canary.ef9b2babb.0","@material/theme":"15.0.0-canary.ef9b2babb.0","@material/button":"15.0.0-canary.ef9b2babb.0","@material/ripple":"15.0.0-canary.ef9b2babb.0","@material/tokens":"15.0.0-canary.ef9b2babb.0","@material/elevation":"15.0.0-canary.ef9b2babb.0","@material/typography":"15.0.0-canary.ef9b2babb.0","@material/feature-targeting":"15.0.0-canary.ef9b2babb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ef9b2babb.0_1665998353803_0.7130553017167958","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/banner","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cec7fb987.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"99647b8dee0792f6fffce9f0ec2de742b5a90844","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cec7fb987.0.tgz","fileCount":31,"integrity":"sha512-6I3wM/K8ixGzjuGPg3x0EWImgE+9zPup056FQKsP/gkFHcvYomigd7UMs5dgUmYETa1Y3NmT8T4FEWAe7HFNcA==","signatures":[{"sig":"MEYCIQDKzH77kMBci7m9j+DFlROpvLcRp2quEHtUNIbmyFcXJQIhALFGgPq7ydmdPHte1wvLnw7JnyprBDuqlnvXQwb9Z9at","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTUUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq1Q/+PAvAwYCRoEja76FZ9E7pL8S27ThoY6Fjisetzo/hhWXJRbmg\r\ns/+Lqwos96ZLFfcsWW/3oMiQtUuH9XAePSu8GjiWXHCY6BJoJQ3X8/DoluWB\r\nIQgL18Pzj1KSvAn4BLKSHbmvenvvYrlzlugBDqGJSIkR1VeBsJdBPIFIxMzM\r\nDDihpJ/lFp9FAshM9e+Eooxm0iVNw0EKM8pugCgGj3BKcu7QjLa2NwuV6UeL\r\nOOhrfO2K0taTV2b8bcrV0wHDuX7s6efe+i20YGhEAUML97I16A5r0Z2yaJLh\r\nFxzuWIeFwJjFdwXQxowMYfdXtZgTzR/j2Z88pmV545uHqbMjxc+TtVQkwGUK\r\nNtQMtNofx3kohg26EAKYU+dGKBCb8dYMBQQRQfCeR/hYZ3MZye7wEwU/C512\r\nkA7njhAcStHw+B/YA6OvL5YwOKuRvxKt7goElOS8y5kRkcOT2EHPfs3zxrQb\r\njHhH3TUhy1EB+c98LINM5qAmkSuNdBpRdAijk+pKwfx+xJiy1QoRmf0dM/1m\r\nMUNgIQ+dvFtJwdMx+jsH4SKHLlzo5xtqeeWCnYgVsU1ueyGaEvSFYaUOMdxK\r\nl7Jt0eN+HDiGOWjS7kFOuJRHf+GfWn1tEtr5lNqWz5l1+UAWsnHnS2Kz8IR4\r\ntTJvTq+g+LKwyKcrs9hYVRnd5g785vV15oQ=\r\n=Eka3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5af4beeec511ff0266173424b4b179e209402a5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/rtl":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/shape":"15.0.0-canary.cec7fb987.0","@material/theme":"15.0.0-canary.cec7fb987.0","@material/button":"15.0.0-canary.cec7fb987.0","@material/ripple":"15.0.0-canary.cec7fb987.0","@material/tokens":"15.0.0-canary.cec7fb987.0","@material/elevation":"15.0.0-canary.cec7fb987.0","@material/typography":"15.0.0-canary.cec7fb987.0","@material/feature-targeting":"15.0.0-canary.cec7fb987.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cec7fb987.0_1666004243690_0.8358901210499656","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/banner","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4fff58b08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c984132b56587ebc6638de0d8ebdc91eebb60bdd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4fff58b08.0.tgz","fileCount":31,"integrity":"sha512-1OltbiUFupiB3/d89RHzvPxV+7n+lH0PgnmYDONsPV7GkF2wvuRblEDaG/svdCTgMR+Q1oq1wtpseg/5+wK1Xw==","signatures":[{"sig":"MEQCIHV5l46yWdEGYijR3Xx332MDikDi9QDmNbkPa4bAvRiUAiAuO28Visvh5KXTi4FSbYEd1LRUT9NQ3XR/1cwy2BG/BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXOAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2dhAAnHbLP+6WSSX2omXYrn/MxkbCctMiVNqTcOYo/5Uc2OpocC1C\r\nIr3QtnXiG8uCkJyrEb6CVDE9bJDfZRNoXguS4no5+i65yFy3fz0DSHtw8fyi\r\nl64ZnslaZZ8mtWAdeXXbJHylwGpVQ9J3ixVe/A0Sa902syrqV72G0L6KpZhZ\r\nlKq7pCO+y1XJpL+Bsls4z0GzEvHI70f3IOxzJWYJPalObAAPA5DdtoUaRKFT\r\nkB65eBk0nz6IS7po1teQzm6IMdRLX7A5tjV9xCWdHcaNLtprXe3WQWo0IWUo\r\nuvjNEbQ08eBn/t5hWVXTkzIYE/+Tp1r3m8+4UKnn+wcOGbaGRq8+DF0wisiQ\r\naInWTdc9XXbba9rfcfUgvSuV9tPWDOKgbU4ObZ7E8rXQOjV8Ndj81rB/MBPo\r\nanDOvrvv9iX2RhaC9hyBmDss0oGLFzm0FgnolbV2rmjHk/Px9eRKP/sV0r60\r\nV90BPdgxz5b2mSn/NOFsadMeUP1vxby53gqA6DEiXgyGYcU2skjvg+ToAKDX\r\nsN7HMtjIKIPJZM3LRlgZnhEk1tk5I51KypfQWCnJfO1mqA2nayF9zoUYBFsa\r\ndSUTrpmpOcg858ilFygx+WXYzVUNQAmfQNh9vPFvti0OVpQgBOgsznJx5dDP\r\ne3J5K/wnyb/6oEutlQYeglwx725w7CJsfkk=\r\n=hkYR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b44726c7f5a5db16ef660807b5247cd71a447c80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/rtl":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/shape":"15.0.0-canary.4fff58b08.0","@material/theme":"15.0.0-canary.4fff58b08.0","@material/button":"15.0.0-canary.4fff58b08.0","@material/ripple":"15.0.0-canary.4fff58b08.0","@material/tokens":"15.0.0-canary.4fff58b08.0","@material/elevation":"15.0.0-canary.4fff58b08.0","@material/typography":"15.0.0-canary.4fff58b08.0","@material/feature-targeting":"15.0.0-canary.4fff58b08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4fff58b08.0_1666020223912_0.8580800528110011","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/banner","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.587d8f871.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f0c45127462d208767ffb026251c37a630c163e6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.587d8f871.0.tgz","fileCount":31,"integrity":"sha512-I2cISRmPAwar2MjYr3RR2HsSm7SnnWAKO6yzam98UsI1W/G2eOJQPWsi/HwXqwiCqXDNXIKU/5ASECOiszFnDw==","signatures":[{"sig":"MEUCIAe6QwYBJjF+ImYQb85Uo4pX1/QlAvmiFBvQdNRYYX1FAiEAsdAmmdyY4alWr74L9GwMWxaidfyMObj/BbjLbJeXgXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXuQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+CRAAhOzTPBqamz86raFMcKWYqJLFNgWCTfml2g2sbPMGCQtQr2WZ\r\nzVOVChUeChpZZOPEnpZpH3/cQ1lRh7t4VSjvmX1Gy9jlbI1tcRmCd+q7oITm\r\nyklGnVues0dmo6hXkr/gVI5X4DnywfNB/2zdMgw4bSdvxMaQ5THNEBOsJAvm\r\n5EW0NQgI/nZJMEFn+1aqUFHdU7HzPArWv+/pR/d/NnzFNVZNf/hzVfqrvGUM\r\n3guHLhMQ0KjsMIqQFphTsEf91GRwdVPYkHd5eDMt31lQAA3szmS1lXl2Zmza\r\nfjbNluzmzZEJ+8TKMi1A+JIaU8MP0azyrKqOOYIxh3NfZAt+XGlvJZEW1SNt\r\noUKrYJQfrVQhP7p6SIwkOEZWNCdpV02t6btYzmVIqQ4u+NSbVSVCqFJ8WMUI\r\ndVx8We9h6fHT2NVhX9OawDjDo7Lz33SY6WdT2VIZ0PtFOs2PJSavl+OPYe3k\r\nsfpTMfpRfUtE72JQFhX7CbspIvV3j+89iaNf9k/1gjztObaEbB0fYkF4oyo7\r\nEaQ35KkihGp/LgETLXXst40Qmtyv+IbULc6JBG0FRm57BlOGYh+fCrxTORAo\r\nJAHoZcKALD+igR5Vr/gekNdR9seydHI2DqhOG+Jwfvt4+ijYERoxuyT9I4M7\r\nigXJTvDIM9Ozb8+upbnQn6Cw++wFA2dC180=\r\n=QzUF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2ec38be871dc355461961e4ac44d48ec44c42a1a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/rtl":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/shape":"15.0.0-canary.587d8f871.0","@material/theme":"15.0.0-canary.587d8f871.0","@material/button":"15.0.0-canary.587d8f871.0","@material/ripple":"15.0.0-canary.587d8f871.0","@material/tokens":"15.0.0-canary.587d8f871.0","@material/elevation":"15.0.0-canary.587d8f871.0","@material/typography":"15.0.0-canary.587d8f871.0","@material/feature-targeting":"15.0.0-canary.587d8f871.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.587d8f871.0_1666022288525_0.41093133154656236","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/banner","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.edf4b98d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"683164619654f1bade330dc5b55a9b0bd863cd80","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.edf4b98d0.0.tgz","fileCount":31,"integrity":"sha512-BC0jvaiTuDgmOyFPWFrpOAQtTORZQctW/eKmOkewYEl4GGmv8YvXNlq44SI7GC5pRH/zMyXRpVNgAuPZYttqpA==","signatures":[{"sig":"MEUCIQCgfumt1cqqoMNs2boeOEzcZZ/iJ2yv1BJPnudFkCr6dgIgP66wzPS9msL41kOUgIPHVzl8nRlicEX/B5jNsWT/3B0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYW7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWiw/9HwLRd9/v4Fr0+BtSKpcPD5VQzn8kad/f1oiEyp006Y7zU9/V\r\nq/BUeBtqBfNTNMXLNTY1msAdogM/GvnKEbzT1ZNEx207YR5sTWDnzGrmPTLU\r\neydNeepVWehN1F/ZshDuOss+/B2kURK2Z9Uh7M/LfzLN6V512BKPGry0ucSY\r\nfzMZbx9pAbrSUrhANMCr4+u7fnlAaRJK1URyjBohUh8vEAbHENYi05j/4wgj\r\nxQhov+0zmgzBh5pDnyPEfb9LGzspx7dvmxfRKBc3RgY74yzCXRnuAgZAmm4m\r\nSr49slGB1eucHCU/9hrrCP1CmHjjO/tSEMaBvw1bllJdRC/59lzk9jNaoEZY\r\nEbwfbDZ5o0hFC2k9Q9INTdi0En5CGHW7xA5+K/Gup8rOfO/F+nVoyMAl2dLm\r\n3gxfb2kjozp1kpCTH2KBI+CQJhhnv7EdJzCbqXPvHKehv6Ucpl61+npSZr/0\r\neFo00Wj/ixvN+32OgJayzt1f7BdNm6QmGTAo9ooFUjsHKyWxYCDtvNU9XH4s\r\noS8/qsDOxkOPYgiOYYwl5fNnHwt8P985QA2KESPIp2NiWwWmLmn4BUNDrl7h\r\nkDon7/vySNTf2n+yaPBsO8h//UZkls6kqExzYoJi+8H9xNNN7nuzJGBlOLsv\r\nX3X6GZdHJBbcD0+AEbdJ0OYaSzdlXQtYLZU=\r\n=D5C1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ad4766965d2bd24e69b2e2e6940c960907c93c1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/rtl":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/shape":"15.0.0-canary.edf4b98d0.0","@material/theme":"15.0.0-canary.edf4b98d0.0","@material/button":"15.0.0-canary.edf4b98d0.0","@material/ripple":"15.0.0-canary.edf4b98d0.0","@material/tokens":"15.0.0-canary.edf4b98d0.0","@material/elevation":"15.0.0-canary.edf4b98d0.0","@material/typography":"15.0.0-canary.edf4b98d0.0","@material/feature-targeting":"15.0.0-canary.edf4b98d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.edf4b98d0.0_1666024891555_0.12730235804649692","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/banner","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.024ac5f16.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"068bc6c6f08400303343d3109cc2fe78e7ca8be2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.024ac5f16.0.tgz","fileCount":31,"integrity":"sha512-gEN7aDRWsHsOOx2TUvRWqoRFCSEnR9BlfIRLsa73fl2QSnXywkMx7MWqfIPvc6Qie3AjQ8fIKQ9X5vVc1FFc6A==","signatures":[{"sig":"MEUCIQDJVSkDc+BySNvDksKV6LhzjdZUuDmovXt6wJDUfC60HAIgNciPN20jLQgwQz+KI8X5snpZ5X7dHe9LPYQQDqFP6rY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdqNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpRA/+P2WxQ6l+sdsssKs3mMP3W8ha/0QMoAKaCK8M1xTxhotoc6aT\r\ns3NsJ1H9ElCuZJLx1EXLhNxJarmgT9ZEEAN4T2aq0JiEGjSVXODUskVNG39I\r\nQyzqRSEeS+xRrZlXTYBtwsAjofcUMtMiAcaf7X2VEdbRISJancWlp0kmyE05\r\n7C+q/UvwffVrNtn0b9c4UTQ5sPrJ9tuXj9qyrjVj4aHMUoaCPEvF1wE3sdNS\r\nFqPpqAqOrP6wC86mjSODSPIUhUmYjcsh/v3adEY5GDMFa7SGBCd6AqnnNrQE\r\ndM5Mo7orye/dTHXfdltK3fekv8AyPeEVMgo7lcaItIhl0rJAdkMdBBobSHms\r\nJySqqcrO1dPBxhGRPsaSXLDNUa7NyR6wnpANOJDoKwWLiT0BX39HBxkCGPrO\r\n/5ZkX3kqRSHLCuyl0M2HM2Z+fSqJ5lTcWLiBcMm1DzPlFuL0ruYGjOpIwLBg\r\nTcOJdVmjAfZXI3bqykBr6qO+JhnExvB8yKZrZwXQKZYbl6pbj3Gr7ZElKtQW\r\nh8x1X5bTO8b5WGHgbY0GFFxBzzfhbTOpM1DF2V2WA0JiYbqha9lI847J3xuS\r\nJIAnBcq3ThJjBbmpsyS1yRLAKQOgcRmRP1axKHyZ1kvqn5lfp3Hsk3WbDAS5\r\nbvgFAzNznCoNNin/mnqdroB9DfSYF4TSc0U=\r\n=1tS5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9ad8e77cff1167055c10b93b4082fd5b4e1d8643","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/rtl":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/shape":"15.0.0-canary.024ac5f16.0","@material/theme":"15.0.0-canary.024ac5f16.0","@material/button":"15.0.0-canary.024ac5f16.0","@material/ripple":"15.0.0-canary.024ac5f16.0","@material/tokens":"15.0.0-canary.024ac5f16.0","@material/elevation":"15.0.0-canary.024ac5f16.0","@material/typography":"15.0.0-canary.024ac5f16.0","@material/feature-targeting":"15.0.0-canary.024ac5f16.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.024ac5f16.0_1666046605328_0.8943309737405123","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/banner","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c8bdf6144.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2335cec17e5dc23b94c2e84e69dd0fb5f70e75ba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c8bdf6144.0.tgz","fileCount":31,"integrity":"sha512-OHmSQdh6YjCfxuHfz8RQ+v0wN+quok9ANEmVWIEf+rLTwQhKTTSHhyyHzpQhxRkMA5jY6raknoipXrbW/5+60g==","signatures":[{"sig":"MEYCIQDIFmGnL7Oclzk5sNMzRfNIzug9pLCKsf68GfxagLM6OgIhAIE/6P/3DFJJUiEm5ZEpo8TcxsZoqDtUVLsSSlksu3cK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu9cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmry1Q//QORBRwux3hWjuYiIHsfaLMTpjYcrWeXkE6dZuZ6EVABElya5\r\nyVwljPfpm1Zu77fm/sKzp0JePn6lJHBBcCgMedE1VDpokhNcr/V/XHhCiZWQ\r\nCNM1eH88VVeH9JPvGNwXdS7maS6KXqTRlEa6fjTzQTtAzitIOaA5ioRgo8Xq\r\nQbmf1DVn0hwaoq7yat5MXHnueQaHJH51K3Sue/xS+SNT1fJyzWdIQm00MRCc\r\nSwlWJDfUegydt+OB90CSqKdUqNZiENjxSeGCfhmZhmuwivykuWentfrAQ58A\r\nveRPFjduSdj1VmoQzECA/nb/eEupi93AZTchBrW8ypQvgDzNYGbj0GKrs3hO\r\nJ4v1lrx4/KCDPSBgajdD3xiV18Cu+xMcu3q88/CyTEq5paIAj9OJ5/bqfcyL\r\nK8uGP9xM+zq0xgIu6aCWu93+8tgtBTAJz569g5/yMFVz0P037/KQX48zxvJs\r\nwA49hQs9LLS2JU7X9CawOpAidChqkg2eM9WU8FKkLDHCbM39MpBcXggvJj6V\r\nEe+ugf4NMtduTYKWExnNEUV+phwo+eFmQKivFzPuFVp8vltMerxv8brL/qvo\r\nIeUECPZlyfd+fPJmd9KuydXQAiUpNVL4YUt85mKxGMnQDoUHhVL1i5F2MEZz\r\n3zthnaVa6d0osZSbJGNfCbaub2/J/7xYpWw=\r\n=5+5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"92f4fcf51598cb8f9b9e03a35332a980296c24e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/rtl":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/shape":"15.0.0-canary.c8bdf6144.0","@material/theme":"15.0.0-canary.c8bdf6144.0","@material/button":"15.0.0-canary.c8bdf6144.0","@material/ripple":"15.0.0-canary.c8bdf6144.0","@material/tokens":"15.0.0-canary.c8bdf6144.0","@material/elevation":"15.0.0-canary.c8bdf6144.0","@material/typography":"15.0.0-canary.c8bdf6144.0","@material/feature-targeting":"15.0.0-canary.c8bdf6144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c8bdf6144.0_1666117468435_0.10215791894558812","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/banner","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.bacda4885.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3cb3afcf3618d7aa07340d4a59caec8c0500c688","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.bacda4885.0.tgz","fileCount":31,"integrity":"sha512-RzGI84Qd6TG72xnToxL5+njTUbScsR2EFwCFURisZJUcEZQYn9HHeK2jKmZf1FBOnhOXwjevSoJMVqjZ99Bogw==","signatures":[{"sig":"MEQCIHb05fo0ohsXGhHghHt2V33XSzGo+Uvcy+aCsGMw6DfaAiASWdCvA0PXLrj8DTaj961bYPR3KspSx4WZjAldEb9kkA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvPoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj8A//d8O+9NS/Xo6DkJgpU6zbwgWq0ckT8/w4wgdJlON7Rh2Oyj4Q\r\ngQFdzjfnfR5lhtl1+wZZ/a2XtHDZzUA+WrovXBV7pix4ubKqZgWcPE2uWBvr\r\nJde7tY9HVS9Ix5d6xe0MvfPCLTG9QYK19SrwliQAdn4c/TKqJmaxLXGGtyrn\r\n4DvZ5Z0sixG/TbpZh+j3ATQ/yImErIJIFnZFdJrr5OaFPYtuYjRS56yyJp1c\r\nUiYxcNu47anTJx+KIdRRblryIr4h1ZvcM9vneeXZ/6Wl0JV6nE02IkYdGJjJ\r\nZ+js08+0lk7XCtkvH5yttC3kn5KpmX4cC7GX1qfscw4Ir53X7VfJjPfkAXuc\r\nCf6tkzHBOfdacWeJVK/lkGlOKGTdjoL3/kP9EAC7yuD3eerh0uUv9mc73Cea\r\nac0wrtKCfyAXnrkBPm2jvFwxFdzlMwJ6lF1KpCOIZBlyHz5TDxQgXYrVROGY\r\ni3CmFT+hu0O2iexOBlvjnfHWBp9De6nyHuYcAejAzMCBJ0ri4+h6rD2kRcFL\r\nfmRM2eTdfaKmdP0eV6rFvFLtHIiPGglGNiH8eqObwND/cE8OB+im1LrIA1QD\r\nZIhviCVerkuPn7pFkl9ggSCrnmha1Ylzq2C2zZEBoSiHAnXhVKeESsRzadPA\r\n+Yq+kmMmip74XMA3tUeDcbKrVwZO4n+qOlA=\r\n=4z6u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9e0a7dc5fb5e2d1554093d85949ffa6c2aaa33ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/rtl":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/shape":"15.0.0-canary.bacda4885.0","@material/theme":"15.0.0-canary.bacda4885.0","@material/button":"15.0.0-canary.bacda4885.0","@material/ripple":"15.0.0-canary.bacda4885.0","@material/tokens":"15.0.0-canary.bacda4885.0","@material/elevation":"15.0.0-canary.bacda4885.0","@material/typography":"15.0.0-canary.bacda4885.0","@material/feature-targeting":"15.0.0-canary.bacda4885.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.bacda4885.0_1666118632195_0.6585794225250365","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/banner","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.92b2556cf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eeef4ee44d6da77fad05d9b17412a173c677ed6b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.92b2556cf.0.tgz","fileCount":31,"integrity":"sha512-TeV2212k/nItvFJej1jxjp7IyHWatuO/UnnPeW79cTGhP2q2gWNTSiJXPIkycVlpafohMYkWI1UnYDmLrkZltQ==","signatures":[{"sig":"MEUCIQDoFldltTO85prOM9WRMZHwkoCf3YiJI9TzIXcJuLHSHgIgGOedN5+NWrofFlMGxAQHzHtimsqIR0A09lJ6hJ3QSyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT090ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4SQ/8C/Do8/QnNRqnR98C728c4YeJXOvyRIWuUOyW81p3g2bVNwyh\r\n+uJTyhva/zXk+U0J4sXeL8nUN2QY7lkZu8kcq7ngzA43hmOutwzJQ1LhjKt+\r\nXe1j9egQO2boad1pi9Y/lAP7FkjlpVzyzrhZf6/IUiI8aPtEitDrkQcLIVLN\r\nMIzFPbJh5hPsr+W0NhmuCeJ/SKKuk5Y/MjZ4qwlLp19zKGOG4VCwD6DBp5Dg\r\nePuxrNF2HCFyE86A+/c2zWIa6F1CoQgDuYt8q/2HBeSkOTVKbv6aVKuETISP\r\nQQwRSxGcxzVKpFQfBMs3ECepOWh06pXlkn8zpfhQMoAg7LMn4yYfMqRevJfl\r\n1IPaAar1hdkNQmNsN4tBC/dRBFv6lBWgRh95SIdrgYPDL3BM+JagTaj0Zu6y\r\ns05+DS79+PxerDoLKtbbixt3ajB0z7WEQJPyToukPclUewz1IPKyHaigd6+j\r\n6Tw93DW/tWeIXoPS5vBz5FOpv+BFztmSEAEKCbWi3gXFfQBExObEmlw5/cWP\r\ntVaAmucIj1vIXvIGb1i/wFh+jfvpeP3HgjEI9yg2zu9h5DUejjJwKEFwB4w4\r\nSZr3Qbn3NmMOGBqCAz8oup6JtbCK0NL7q5En5GM+74Xq/G+/ooITAe9oHeuK\r\nNVsXQG5Yqz9J+evxjAJwL9oF2EvwyCcNZjY=\r\n=ZuvZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7ac326ada7a9c6e84bacf5e01a6d22e675dcda8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/rtl":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/shape":"15.0.0-canary.92b2556cf.0","@material/theme":"15.0.0-canary.92b2556cf.0","@material/button":"15.0.0-canary.92b2556cf.0","@material/ripple":"15.0.0-canary.92b2556cf.0","@material/tokens":"15.0.0-canary.92b2556cf.0","@material/elevation":"15.0.0-canary.92b2556cf.0","@material/typography":"15.0.0-canary.92b2556cf.0","@material/feature-targeting":"15.0.0-canary.92b2556cf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.92b2556cf.0_1666142067914_0.6201164415709461","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/banner","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cc804509a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03e3b56d21d28024ae4915a68af657a0c99cb62a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cc804509a.0.tgz","fileCount":31,"integrity":"sha512-GluZIfAkSVPXJVZUhkjnWUYiucfohNZmMoigcW7X64hcGyYx1ZwUZPPypowTnf2taPJK2uIiCpyG6tKbi9JSEQ==","signatures":[{"sig":"MEUCIQDUdnFikvQ1cab/0Bb1wIJ/IY6UcUSvpznfMo5/rnkxvAIgcZOXeB9ZFlQPxufwl62AHnBB2eRxNG6v2DOWGggtszo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1BUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh9w//aJu1CHO6SI2vBenOHrTAOZGw8dAvmUoBtpAhC0ZYcXZsPRZu\r\nepDbXq8u5FlSha1jCCOgxlYySXdtYW3r+3gBiIDKmuK6YeFSQD8ftkhsGjh2\r\niPN1A2MqkOcMEPRIoMpL6+4a6HtpxPRp4DYm7s9Vwl3QkLKxv8/xYY3k/gB8\r\nDniBDGgGrlfBzlL3lH7la1H9nPbkNh9E/3JrJCvq+a8Rsym2yAaISnWCpvMu\r\n5kLjGzhxeVd/fJQ+vCIb9psATDVZ1/nMp1E8qSSk1u7UUeUXmJvo27C4dsEc\r\n07oapFQ7ZRj42JADNTkstkEeq8YHGMryqTr+97q4AkvHsUU3NOEP4Xxr9WEk\r\nECkdI1CaaEvSi5Ph/92bIlkW+tyySGh22Yrdy5/Pe1tDOj14jbQrGzcUFPUB\r\nMFLxC17+auw41/lqlnOeXGXx0wsK3m1Lbj6JK+GfQkEiDJlvV2QMe6pBh3v0\r\n5NQMdaBpuM0/UYFn0rWHLr+qx3ZJXVjI/wXrf1nUZForYnR47GddPwJQEo7p\r\nrEUDGFra6WPjlZyJ15FXfMzshER2XOeubmUBvt1tg++xT1GZ4MyBE1AFxv9c\r\n1oNVicNSaUEQX80Hx6bfecZw4Vkq0V3YyvbCgImzkEkJhsXeDva7uM8GfqPo\r\n/D/68vDK+92kl3N7s/uaJIgI9RbGAuhSkoM=\r\n=FS7P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e8cb944f6f2263dc4b4fec5d7ade2bdb5172b4eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/rtl":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/shape":"15.0.0-canary.cc804509a.0","@material/theme":"15.0.0-canary.cc804509a.0","@material/button":"15.0.0-canary.cc804509a.0","@material/ripple":"15.0.0-canary.cc804509a.0","@material/tokens":"15.0.0-canary.cc804509a.0","@material/elevation":"15.0.0-canary.cc804509a.0","@material/typography":"15.0.0-canary.cc804509a.0","@material/feature-targeting":"15.0.0-canary.cc804509a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cc804509a.0_1666142292096_0.9924060730958075","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/banner","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.982bedae9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e68727fdbf0910e770a07399c985925c876af84e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.982bedae9.0.tgz","fileCount":31,"integrity":"sha512-ISlJq2xciY/Pe0l7tLYQFaZMZuypv8uP29AdLHCylPfw87ffm/Zc3q+7m3rYtfBd5kLYk/nHRPlSeu2EsE8VRA==","signatures":[{"sig":"MEQCIFt06/91aqeitXdhUKxwb0qGrp4C1oBmqJeiv9oqznzAAiAaiiYkFAg51Uh5z03qGIbX7CR+KKsO2JXiGNP5DqZrUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444469,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1UGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoa+RAAn+3JFOC9cE9eEdqvsuwrg78ezTz3dfp1tLt5Xh2szo9yC4Kf\r\nZFzGNzrSADBZv8QzwQWSaWiSoEgDlQs4+FOqiARTuAULdkqencMcU78TTKBe\r\nUg7xu2spWkPxGv2ZWkrE0yRHgtASNrQYlbZ8+sKxQ0GEQDbYwAxdUEsQOrx5\r\nwny3PHYow8CoGHdDs3NLlLzLTmHN0SOkCsHvJ33cFAG7O5CPDpd/fb6eLQjO\r\nsNX+sCvIs/m7jGpsfDEPsPQfRqexIGYMYNgz9Vbs3D/bwnWap4knG8FVBpah\r\nUFt+9L05UhJENqVxtNH3zU0vZZzEM1IEVVZlRZ1Au14EW5L+8ioQUEJ1xe7w\r\n0Y3GxPNxtbcA+XKYHF1+Ohm7pbNx2OmimdbdOt8XoiIDHKYNS5hIr3AlAk8W\r\nYwhYJ+SouhjtgOr52NrkQWyRdCrdhDcwwkMJcW98YszpNT0SHUfwqGgP0rw+\r\nWYz46nGgqB3RhoC1EoSdC5wf1YkQrbfgMqUKUWWn/2WqXNc1wHXY06n48J1J\r\n7tlEWm4HYnQFmNqpl2Ng3rpUzuomYYKipu9243g6O411i2nw2G+1OJxw0WUL\r\nsPhuh44PI2umzb7Ngz5CL7q3jFhUdhqQhKO+R2DdhOloam/lvPEQt6uIZYey\r\nkgGnHMXr2zrEaZpvXJ2fTgNITdKpUfvfs8g=\r\n=1sZ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"247fc73217ef7d2438e876f1477d141e6970c9e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/rtl":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/shape":"15.0.0-canary.982bedae9.0","@material/theme":"15.0.0-canary.982bedae9.0","@material/button":"15.0.0-canary.982bedae9.0","@material/ripple":"15.0.0-canary.982bedae9.0","@material/tokens":"15.0.0-canary.982bedae9.0","@material/elevation":"15.0.0-canary.982bedae9.0","@material/typography":"15.0.0-canary.982bedae9.0","@material/feature-targeting":"15.0.0-canary.982bedae9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.982bedae9.0_1666143494190_0.4488814215696042","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/banner","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ee40081f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b10ade19e011382b18b9f745ac08c91789b28786","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ee40081f4.0.tgz","fileCount":31,"integrity":"sha512-QgzuIxT8pNDvGUhdRv3Z/yOGaZxVoIWsUxI3NvfKHqo0GkVEA/TCjqgN2n8PJyu9paGsuich7te2cvZGNJsgUg==","signatures":[{"sig":"MEUCIHwUr3do5EboCUAIokjBtOX2zC+BrvjG4FBaPSaBJDhRAiEApoT1A1i5gvdU7bdTrxlYYuh+atSlZ4A5etQWFae11dw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFpJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJIw/+NHBpd4d0td60HD3m+lWgHlQvlnSAKBv5Dlf1ZMMELNHIMH0I\r\n8MtBKxR1K32pWnF+byN+j/QWVb/bTjxXfH0D94vyCbaU2tD1dBwT4cd8vNLH\r\nwl59BhJeSgrY1G4A5rY8fFGvCv+3DPEqAJ+Jh3bPJwv3DlNDSpIHGyet4NsB\r\nG0yFevB1R7f3Qj2r4mA8PqsqswgDTRJeEclMANImu0hnSaG0uLP26cIZYn53\r\naioAeb1iL+Z52i9RNTl4gPVhwpxRQ17YTTAkk4nCT7UpXmcKrzu6GMOSHJcb\r\nQEFqDZ5w7bSn/3L3kyIYziWPCQWrI6fv/HbG7+9na+TI4G07OXQal9wqRQqJ\r\nuNEu6/NrOt6RX9TaEfmMSwS7sXgIIFg7bzoJ8EzxXjPjNux6Kf4pZjiEm1NX\r\nwjMQDmT35qAlOXyBo5o/OGKVXaNifTspWJADLwrjyfMg10E5mLL/UmTZkFc0\r\ni1c8Y7BNhFB4TJPhr8ueR/IxNHhySL8EYld8xjjQ3ZyEm7pQFY4KoXdfwIKk\r\nSntGCb6TYJj2goXewX1Om8jDxCFi4XakOlfZ3G7Ur7DcX4YE79rBknoNRKeD\r\nPLL5bLVdYEFpoYqbRn8Ii0t3+57yuWT+9kNrB9ULxpX96uT4MuKXyLRdlRz6\r\nYIkKEpiuiuD1e03ZA9XC+cw5QvluYBbni5Y=\r\n=JCbT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"04ad48e358b6eef4ec9ee359b0ab906b30425504","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/rtl":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/shape":"15.0.0-canary.ee40081f4.0","@material/theme":"15.0.0-canary.ee40081f4.0","@material/button":"15.0.0-canary.ee40081f4.0","@material/ripple":"15.0.0-canary.ee40081f4.0","@material/tokens":"15.0.0-canary.ee40081f4.0","@material/elevation":"15.0.0-canary.ee40081f4.0","@material/typography":"15.0.0-canary.ee40081f4.0","@material/feature-targeting":"15.0.0-canary.ee40081f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ee40081f4.0_1666210377564_0.8239270806569923","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/banner","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.98f1b54e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"705ea1fb651b0b5f8ffba23a84b81387b83f0287","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.98f1b54e2.0.tgz","fileCount":31,"integrity":"sha512-4vPgRUFz5WLRq+MWKnliJAHGhkCD8U3jr0p8Hrz/PhCLJVvSyopl6VH2tlq2AAUv7ZCNadc3dJ/7h790tof7AQ==","signatures":[{"sig":"MEUCIQDrXaGGqWBCHDq59f8v/oiBI8aNapYSswUYCE23+C0B4AIgZYfpmgBayyPlRXEe+hRQ8rci7FpZxJh3dp/4gB0PUOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdJsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5fQ//QBJljYnJX+po9u0XM+Q0rcJ6GgfSFLDHzBo5D3SP9GKBE4kE\r\nJ6mbCFn5iMRUmeadbHXgthisT2BtEtKRI89NF6d4y/oEA7MOtyDkgxvcIHmr\r\n/HBpzDqH/NlH4BGnPVZkuXHOo4QiaC5wOeRZt8lSBTbq/V/54zv+l7pEKb9z\r\nZuIrExQAV4sjg0KFZp43phbE0NH2Gi+9xTKYHb158Pcn55CSgjxIiKjO7M3p\r\nfJCkM5gJrbkb1IJ7CRtEigcffqjSoEh6L2upztGZHZN1PVIaS8l6LKTG+8Fe\r\n7bBnoY0Jj/uxZwmbDROFwuOhx7O814hYsIlfZdze3fff7es/4RMcsht93kpt\r\nADE6DVZFRUvrB+0k55LurO8PykbN0tDpv/bouOGRHWcNEEgJZQgLkLRZISLG\r\nRBU9XqOKbe9N/4s19N1F5w24/N/b8IHWCQ11mew6rNrgxGZV16g3x2hM6sFe\r\n2QMbnmMLDemGkrBqcrPUJWXcv6XQcafOClUkz5Vei3ZH1zW1BH4ILfVZ6qzF\r\nsrZxckDmKMWpSR5Ic1FpXMFMq//4O2BcuqnEkMNJbl0d3aKJUVvwR5KWMEWH\r\nhQb9Fc0SjASsvlPRWPruvsa+7xu7LJ0VZmh0raDbJ/3SeCsNpTAc2u+oXQfZ\r\n3KCyEVxIY/V439pbVchjHWKWRoiGVN45aX8=\r\n=M5ap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"aaf0a191532b3357cda509746499ff62e3aaa47a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/rtl":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/shape":"15.0.0-canary.98f1b54e2.0","@material/theme":"15.0.0-canary.98f1b54e2.0","@material/button":"15.0.0-canary.98f1b54e2.0","@material/ripple":"15.0.0-canary.98f1b54e2.0","@material/tokens":"15.0.0-canary.98f1b54e2.0","@material/elevation":"15.0.0-canary.98f1b54e2.0","@material/typography":"15.0.0-canary.98f1b54e2.0","@material/feature-targeting":"15.0.0-canary.98f1b54e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.98f1b54e2.0_1666306667916_0.5625697912453524","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/banner","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e74b7ba7e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3e84340af4d8ef53f0ab0446593445dc3d1bdfd6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":31,"integrity":"sha512-HI6AStqm/IpMvONilm9Rv77YGK6c/S1Q2P+PlWRxLIl6YU+9EnC0AYvK+2vEE+ntgtDCgdhaHN7ChpVz0TDQVQ==","signatures":[{"sig":"MEYCIQDqlZkSYVJwMjAgXQQXOXv/kQZ7QnPxZFWWDYdUKOwxvAIhAPzuAr3Nx2uoGDqckjhjZHxNG9LPOzQAccHEZ5Qr8iNi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtGrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5Jw//ZB+Dws6TAFXwSwBZdTh+yZqjjqBiuzFM7ooEJq4Ajjqe+CXK\r\nLKURgeFPoUC+THetQ5p6C7+QE2l/x0EPpJ80qOFwApSFkLjMdWo7vDubzc4w\r\nGjrfwdPxJBmj7qHa8P41ifcmHLjwxR/8qOZ01IP+roL8zCPcWuo4he506V++\r\nUaFsn9YJliI0ZT9yMPsGH1JaiMguzC+88uRIhRdPS2WYATtidCI6rOCpdBbk\r\nuIO8YYH+n18ceFB8Oz++oFPoMAI2DNIhA+golA4JaNgV8N2Koh155Yt4hbvy\r\n8Wp/eFCY075OtNJdxwpPBbrluYl/TtWq0R11NLoUuYM+77HC6dtTOD7RtRbC\r\nzOvmSzNcjdqI5KlCBSLg4gU9X3VB9yEhBXvF7OvJW9Yk05vR643fXrhFNGaZ\r\ngmOiAKmCOsPRSegDErtYzrbm4fOeL97hB2SGBcbya0of+Io+MwrWB7d+EX4h\r\nkSJblQIIAd02NnyEtBn2oz0kgk496X24TkRNj6gDsAkJIoFIR2PGSsSBtxWo\r\nBbC7nFAaBoiav8zBbSjgQAQKEECwfw2LJWG5PbjhygcQNElMI5kQASmbPwgT\r\n+0CbUmDrK8SSAk0OzZrXKZyrn2JvDF38HHTbAq8Qqwq6fwBcpdQefEk6mzO5\r\nZ/2bV1H6aqQtqZ5ofinTbg8si2CPnjTrzIY=\r\n=Ab3m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e30e36776ed9bc98d53938cfb5e48bf5d2cc67c4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/rtl":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/shape":"15.0.0-canary.e74b7ba7e.0","@material/theme":"15.0.0-canary.e74b7ba7e.0","@material/button":"15.0.0-canary.e74b7ba7e.0","@material/ripple":"15.0.0-canary.e74b7ba7e.0","@material/tokens":"15.0.0-canary.e74b7ba7e.0","@material/elevation":"15.0.0-canary.e74b7ba7e.0","@material/typography":"15.0.0-canary.e74b7ba7e.0","@material/feature-targeting":"15.0.0-canary.e74b7ba7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e74b7ba7e.0_1666372011043_0.45874168776905","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/banner","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ab55c07d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"feef360785fe10f00b956ee15bf889c39261b6df","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ab55c07d2.0.tgz","fileCount":31,"integrity":"sha512-386O6impntFW9x0Z846qLCqzODTDs2qfjT8FkLuxy2h3qsnlu8jZCHJTA+iLtOggKnMaqr73VDjzdnv1ChU4GQ==","signatures":[{"sig":"MEYCIQCQ2Fmap7XrEmc+Dod7m4IuWR+SE0QKjAOdcvVGmfp+3wIhAMShv/4fULa0ZhcQZarfNW+LxJcM3va0membkntmUnIa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDRcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZ6Q//ep/S23jgI5nncYlQDSYKm9jx/0AExPWfm/HMW13ElIhNIGJf\r\nmCAPZJQfBkC/jDjJZQzOXb9uy4I0AEOsmEz4N/is+Dfj+cek/Cs8TCGMRQhn\r\njX/i/58PCq3M4QG4BEwEXLwbBRWmr5T4GWDuYgDRKouFZhfn5IsjlzX6PgoG\r\nBmjZKi/4HWFf5Ungqzgyx6xC8p5deYr5l+8emkkCBoaudoGGDdQ+tvvlrsGL\r\nxvOTv/vjsV+CVoWmSb5WlbIQbbTcTfnaV8b4ZbTrtc4xjFaHaQqBtpRwVu8r\r\netfj+VrHbN1MDbjMPqQpoyoOCGIT993NO/BJpzfToTVqFf79V6pmHTXZu8KE\r\nzjpVSZ0j36CZucAml6pHd6vIugm/qePV6NbJggwXvUE9RDmPU2LU8R9jpS13\r\ntpk5embGEaQxBDx4Hb/4lHES1llugRu+UyBIVxOrQfQj7NnMNHCASATELHid\r\n+nndreENWZvn0xwhUjBaeuFD804W0SCCO0ssqSzK33ou9iDD1GT3fWsnz36s\r\n2CGJEwvJMWnDiMOhEc7W+KSVRKYnEjPqES46BXvf6d3wt5bdau+KJfwoUgsy\r\nn9vXYeyMjeDvlHrZeqe3bZyGUtD5lXa7jCqU1a+W8L79HKui5Rzp9AU0eBKU\r\nB9TwsMsuKDiimip8tYZUOHQr3rRen9N5w2w=\r\n=myf8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7fb32c724b7903a8060cb457aca1f150a15590dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/rtl":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/shape":"15.0.0-canary.ab55c07d2.0","@material/theme":"15.0.0-canary.ab55c07d2.0","@material/button":"15.0.0-canary.ab55c07d2.0","@material/ripple":"15.0.0-canary.ab55c07d2.0","@material/tokens":"15.0.0-canary.ab55c07d2.0","@material/elevation":"15.0.0-canary.ab55c07d2.0","@material/typography":"15.0.0-canary.ab55c07d2.0","@material/feature-targeting":"15.0.0-canary.ab55c07d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ab55c07d2.0_1666462812554_0.5569880608330229","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/banner","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.fc539db34.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40b48b9d405a2d9d67dd7604dd522c65c4c93ec3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.fc539db34.0.tgz","fileCount":31,"integrity":"sha512-rQj3bi2OF+P6SDWspuYi0F8/zygatcPkYKPxcktKjI4kY6728sZTiVlsNy+JZBdqsiPzMqnfdpkfVxn0c0MnVw==","signatures":[{"sig":"MEYCIQCMxRUUzQDEGnVRdgtPlhGQxSYeXkEmiFAK/xe0rY9rKgIhAPpBHC3prJcqeaRYmAwIETazz6gkaYKpSLFU9ojnE04F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuC9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmraug//a+TGSVdrf8o0QhPF92m1w3kHMR72uOatlTVoanWQwONFJu1A\r\n/Odt/4X8J0YsPmUHvq4njR4sLdGjrsltRVmjbm9IvCO5JLIdkV9IxqsvLObO\r\n4hEjh6VlpCkS4m9OPSLzGyRLAqrvqA6D7DZJXFSdVXVNQszCOgVr8ugEgeK4\r\nC13vRTfITQo7QC+sZNnZVCp/10kQ2AlCMTZH/soGIy8AbOigCLhxHCDT2kmr\r\nQoDZ6qp260uQ9rugGoedrg/TcPP5nlAvDp/63Ti/SNu6n6cN4k7IbEVZWrz3\r\nB7cCdDTpJwyUh4V88ZVL/Jvzyd9EIwZHVr5Q3E9xPDq6izybtjluinvUuAIM\r\n1l3wkg9LliNMBSS4Xr9nUeN33yvpn3YT6xwckXlMRcyIIg9usYQPx4Idx1Lh\r\nLCXdwzsJXv4H5C3+SxHUrXedbgGwxeNYbDkjWGho8NlPyZLT/sePdQN6ORkn\r\nijIIMK/jptN31vAOrg48fLrd7ta+p6LmPuxwskAKNtjmgBoYC379MDak/IO6\r\nNb/ndXSNz3HJZpZmMCjiCUK3BuaKjIov5mo02U3mwsV93B6EKPysPVQ75oh+\r\nLzCRv++N2cOxSGjxljdO7PVnsOXaryAPgWQcl6THfWRnEL6mi5sh7ktDsEfQ\r\nlgCOeeWOOorQbmGtbHy3xeBoepdry8q5dps=\r\n=GDNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"18c679c73aa42d66117f8f1a88ab7cbde6f2a201","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/rtl":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/shape":"15.0.0-canary.fc539db34.0","@material/theme":"15.0.0-canary.fc539db34.0","@material/button":"15.0.0-canary.fc539db34.0","@material/ripple":"15.0.0-canary.fc539db34.0","@material/tokens":"15.0.0-canary.fc539db34.0","@material/elevation":"15.0.0-canary.fc539db34.0","@material/typography":"15.0.0-canary.fc539db34.0","@material/feature-targeting":"15.0.0-canary.fc539db34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.fc539db34.0_1666638013200_0.2596148656733841","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/banner","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e340b04c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e2b64c124f161b66d692e1793f96e61b363aa0f9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e340b04c5.0.tgz","fileCount":31,"integrity":"sha512-J1khxv+R0dgj8z/EPWFBLk8apNAp5lYv9jIqZHlqMsM81xO3864c1T/A3pZwAG9QBX1Prw03l0yhYgpgUspGag==","signatures":[{"sig":"MEUCIQDNH2py9iw8aHptwARJQiJtZij13AhwYcfQr0nNkH2+wwIgKW89paL0+XiseP1QkQQNGwrW3DA/ld/FXe1ZD+IxiZw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHU+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6sg/9F3M5T1jJU07Hh1lblOfyHiGB/hQftnVhbHLSGlUVinpLYHhW\r\nf9Z8Vy9RwQn4EkvjtoMNIMMw3UNef7oA+hX7qDpH9PkSX5Brbp2pVCoE8mMA\r\n1zPyp/fQQ5pAhdjQ3KcYWyR/TOqvbObiSPrpSGmQ1g/3SxQky0NlUcELVHsi\r\nWC4EzA2/F9xissVxfBSPmheZstT75kSnTftYH5TvZcWOFNpxOvXowPgq2EH8\r\nkuKfSXFXO/L6+ejq5wk7fKDVvM4e6umj909iJ7YWa41iP3EmBFfRUoUR7jjJ\r\nAGVpkAjJPtIeFOntWu0a73xvvfte73Jzm8wXpW6ghF7Nf9a99QIgOe4sTRAX\r\nGGQY/SoOTafWmMGO2JjtN58yk/Y2VBR/q467OEuLYlKjNALUrqQF237rN1K7\r\nfKs/TIgVf/1Y8BMq2m/xUC7WQbncsctstZWp+SDHkuEivrFTjB/6uAA1gwSD\r\nufLLMcv7WhL5yEJDHSK1+7HT/QO48e36CDaPiLSV8ZxVpdoVB4MmsaPNZZ0V\r\nU5C3UVhjrhJx3zoOu2hsxjYzj9N0rXKTOffvXekc6eoY/5Dit6MtCtzBKyJ3\r\nFqZUb1PipRkfaU82D7H01R6gl71stYRN4BHNEwONUy15/vRU7V00L0o7UvEk\r\nVEiSHBqCBfp53/OzwI6AOCYthL+17F/EqS8=\r\n=AnFs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f3e39db57f42dc19c08bf6e97cd6918a3ce32dcc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/rtl":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/shape":"15.0.0-canary.e340b04c5.0","@material/theme":"15.0.0-canary.e340b04c5.0","@material/button":"15.0.0-canary.e340b04c5.0","@material/ripple":"15.0.0-canary.e340b04c5.0","@material/tokens":"15.0.0-canary.e340b04c5.0","@material/elevation":"15.0.0-canary.e340b04c5.0","@material/typography":"15.0.0-canary.e340b04c5.0","@material/feature-targeting":"15.0.0-canary.e340b04c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e340b04c5.0_1666741566602_0.7296364235774142","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/banner","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2c1a8f8fd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"03ab12f6e1ecd2f332dc438c4c8f6ca7bfa7632e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":31,"integrity":"sha512-hiYsK+LUrxo7NrYLY48Bkgo2TcxMRz6VgFsHfonsC6GeOeCI9Z/hlBXESs0oadtbzYA5WA9KUv0cub67RRycsA==","signatures":[{"sig":"MEYCIQCBeha6zgZkAca+044T2v4VVqhIT3EF24EU+sTggwupqgIhAJ1jZa2OfYAFBBMhy5NhYFZe9WPvakEEThYd9IpEMrzT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW7/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJhw/9H78qJBDji/EIOimlAxxNaQ+IRy3gkFSz8kiMvfcx321zVDJd\r\n7xM++1bDNq1Uzakkd6DJC5dU/w+hD+jgDichBP3XSFvZ3/X6UfTWU+v7uFPU\r\n3RLOCbdT7IloD+SDF3jE6IglFRAUOf67G1xNuF1fTG0Ct/KKMscpgsSXboAb\r\nb9uUW0Y6BAFQ7mjXNvhhspBhi/cL1Yeogf/iN5uaTEbcbnKr7Hh6kuQB7D48\r\nvYXuxRkhzowXzsJU1zp8uJf9jzBnQvHXrWOP7wgyYDU25RutPt3JP4c3uka1\r\nDd+O4s6lOtkZgpQlz39F05LCET+Bevvd7PRjjKz6J++ZloMAtsC0KXH9EsNz\r\nsxme1USv3O8o1Q/zsVAhT7UVPtB91GuLt5w7XSC+2p5au4t2G7sF3UiaKYFg\r\nDCQjKqF/LcciBkj/KgPjH/24O/AWyh7N+6M+bodpTcryj/BUqqLG2zoWtBO9\r\nzPop+GP3X+Zeyzwyfw//j1KQcbNLa9uKyZS/xMuh9725jH8UjIkKGSBbst4e\r\n30J8y7s+47wokkw0WFdBlk6LvE7SYL+7oaJsH3ZD5qgMl5Nv5FdUGOvCMvvR\r\nzhatgwlUN4YbYJT80H2s42N5BWZOnckucKDNh+I8eV8HjsMXKzHtkrmWCOpk\r\n6O++QkK0nSyTDQzZgzF3eKBarblueRelN4Y=\r\n=NRcW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dbee023b5e37423b8695520d95f2d00d884bfd5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/rtl":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/shape":"15.0.0-canary.2c1a8f8fd.0","@material/theme":"15.0.0-canary.2c1a8f8fd.0","@material/button":"15.0.0-canary.2c1a8f8fd.0","@material/ripple":"15.0.0-canary.2c1a8f8fd.0","@material/tokens":"15.0.0-canary.2c1a8f8fd.0","@material/elevation":"15.0.0-canary.2c1a8f8fd.0","@material/typography":"15.0.0-canary.2c1a8f8fd.0","@material/feature-targeting":"15.0.0-canary.2c1a8f8fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2c1a8f8fd.0_1666805502854_0.6185024176255236","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/banner","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ecfee946f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9cc992716b73f4518995cbad090357524f0b1f44","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ecfee946f.0.tgz","fileCount":31,"integrity":"sha512-aFHC/9hHiAOw2b/1jsndV+qDlNqpGrLGGTNvxow5WQ9XbG2nVinvz/L4ZPF7+gPvRrSWiXVHOTQoaudF4eZm+w==","signatures":[{"sig":"MEYCIQCGA0UZoviGlBZdBbafOzlW3IdBHNVbACpL0cq+9DtaogIhALqM0sQIXqmiq4tZX8LfeZucaCregxqSDA/EKizqXR7f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZWbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMvA//d3Sf3at1Ls+JgAgRnrNlzzDbQxE2maU54r9F7IegzYz0hD+m\r\njhDpgQMVeJxTtD4D5729Lq0Wst8l4c5crRLQFOZZFG/uaeQ9ucNpk3lD3BOE\r\n9EYDnZzFbFDO7C4dWLPE9O/CJKjQ4gzsAZNowTJZ1YryXZGue8hUbu3H5eEB\r\nqW/Ik6+AWDSYzZ2/4HPB5Sui+fUm0JAXWBgkGuhr+nSPfykxjTDFc+rKG2Kk\r\niWYx4trRLwBaUbNfM3Jsihh9km1vjNhpbE41NnFDuydpa8rilLVrympFfz4k\r\n7k/BST67QDMvKsEGRhZQjsEQ29RIvBvV22jCisd2nXQVqlrML4NtUeBWxCtq\r\nWaITxzboOVlQZGFWn/aBQW0MhlvT7T79KpjrfrsYV3O3TLYlxmdaQWJfmZ/R\r\nR4TaIdjUeL49r463NX/JY1QiNvVL6lRjcoHUsh5RZ6cmY0pajKFdZ00qWGpY\r\nDEnDxGwJffGhOlCydy/YQsJ1cCYgEz5Xl+zj9d9Nx0t6xRCgW75favPlrmh6\r\ng7lKchanFtm3m6VkiAgJ2QkAAO6CfZ3VO4y0S7ESSMOE5N5tbLmaKT7Zy/YM\r\n1eTO0bGLQdC0rW6BKHem65Tc43zI8HbZylUBsyRuwYIvtMMmis9RSgY5f40x\r\nfm2fZkxUDEip0bzBFN6AGuhjhDgOhkxcBe8=\r\n=hiTK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dbe05d725a401275de1e88f9d5bd6cd2079a0047","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/rtl":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/shape":"15.0.0-canary.ecfee946f.0","@material/theme":"15.0.0-canary.ecfee946f.0","@material/button":"15.0.0-canary.ecfee946f.0","@material/ripple":"15.0.0-canary.ecfee946f.0","@material/tokens":"15.0.0-canary.ecfee946f.0","@material/elevation":"15.0.0-canary.ecfee946f.0","@material/typography":"15.0.0-canary.ecfee946f.0","@material/feature-targeting":"15.0.0-canary.ecfee946f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ecfee946f.0_1666815387622_0.6873260960524683","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/banner","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.73ca9dbb0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8f7711933c1b747de1bcd2cd0edfd369c7492ae","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":31,"integrity":"sha512-B1BmmYZbT+TV0PnozvygOTA4TPD1hsOv5wYn5mxCSRicJ6XWfWLuyAS2fbEYVqJy919pK2zscUVzgRF2ZVlfGA==","signatures":[{"sig":"MEUCIEIEShWUGZ/PxDuQ5tta1pfa6YtVAqv73PbgM/jYi4+MAiEA9OzEYSNVCiStnjbjxER2nypFnBGQx6lhI3VociXtrrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAbtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpnHw//WKVfL/oP4ifelXdgzlVGQlyngpdGrDeKLu4LR5CMk0i6lGhO\r\ncUHKyYcaS1glASeQjbfx+teyuqKfeuA8Wk3bLhgskp5wj35YHBsJ1UTVbmrI\r\naIkStGBj4L1rDvAaDuMZrA4c4yA/SpndxcvbduPhCtqo6ifl81xHKQ3WI1C+\r\n8EuxqvL42IB0cl3rg7fQCuCBIu7xxTuy1wR4pceEViQTEpH5t3+mamqAAnvZ\r\nbOj57Bbr6eI5N2rJJkEAinXsJ2n6YT/XFFwgQ8QdRXkA16ZWsArcmd4b6fcM\r\nK3IxDekB0CyVlV71B25LONg9KSEARLSTbkJlTYq1YJWCWkkLmGB4DmdF+sYE\r\n1qZVc34T/DtloZdDGkJkmZcxsjBe2olDd/gxDF8vpRdmqFApIY0Z9YqHgV6Q\r\nEjQFcdSD1SH+k96DT3RBKHj3XuTDtjBqK1LIKdniZG5ycs76ica42cLi91bL\r\noUsJZXJJ1C/jQ21d38tAqdH/MN1m3u2yW1Vzq2IPWjlMXZ1fJlAUaUeGb73+\r\nHtIWGhQ0+l0wezON+dTaEBZWmC3U7QIi+CjFN0kuuhrHRqPq38s0EiNYoK1r\r\nOT5x2LIjqfeRh3sa4VNPN47ZVNSGcYlQ8FTvLtHFXm0EVutDqINYTLBUeC9S\r\njtcXd+OKWprwkzvWpKHZFTA5eay6jQ9y3Wo=\r\n=UuBN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3b1ecde6148e6e8d98c4b0c8a4dd2ba56e95586a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/rtl":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/shape":"15.0.0-canary.73ca9dbb0.0","@material/theme":"15.0.0-canary.73ca9dbb0.0","@material/button":"15.0.0-canary.73ca9dbb0.0","@material/ripple":"15.0.0-canary.73ca9dbb0.0","@material/tokens":"15.0.0-canary.73ca9dbb0.0","@material/elevation":"15.0.0-canary.73ca9dbb0.0","@material/typography":"15.0.0-canary.73ca9dbb0.0","@material/feature-targeting":"15.0.0-canary.73ca9dbb0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.73ca9dbb0.0_1667237613327_0.4337806247143676","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/banner","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.357f2e5f1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ba207b390db5aacf68190faf0d979a64508e7b0c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.357f2e5f1.0.tgz","fileCount":31,"integrity":"sha512-ZSupz+XT0/uBWAKq+CzJOCaYmi2NnbSJlLSjQ/2PsC8WoRVGNwH0XByn0yrr8wxUrYKNCAH1F8CSWDP4QcxuDg==","signatures":[{"sig":"MEQCIGg0c3yiKS+aL31asFbAJiAwIAklbWFqaSIfWx2MhXjvAiBlmLnqBqWVkQpfCCKTyiCa1G/8JV2+3g69PDZXvrQaxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBj8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqywBAAhSKKforkvuMxdOMkzpZwkQtnEGAFf1zA2rYXe4ozi55Equmz\r\nx+PQxvmDIM74SLnylMow29JNQxlNfTHjau3p1jlGF4w8A+z0DBAFq6fPoIK0\r\nkddDalCiiGwRAf4jHrs8CmgKE/4SEZD+XnkbAKJHzM/FfYxDDkNBEjgV96M8\r\n0iLvg9evaVjiyc/NcqdrrDXEyQC3PvQ+fwKKsgh0wUXuTA1jFI7/t1G18XY4\r\ntoGyYcBlxdb0h1o2/M1HJdnz8rbFkY4fUbfLG5ejUXaP34xyMpMKs3X2iSEz\r\nqhDxSkVTQpbkhZdkZXjFTDQY2LfU3Qz+LFZuq9VLRv4HfBjsRAxJIDXFxCbq\r\ndGhR6RF4U9Ol/uM7/4AKltpnnPNljI8O/q5qCwU+qVDgSktRfLk5TJNIRlmX\r\nr0Q4RINZee6uUsoJK2+OuNSsTSAT1eoCcWglvMfkZ7Wd4TW6LjurYUyEbWs+\r\n/JtyQb05GUQ3PS2cgu34McB056ezIJo+ASOYfzmlkRUpgM+BABIpZ7VODwEy\r\nteUjc+xejjF4Hs/hyuOBHe1oOxm7uNRi+lj1ODT4nWCmvLWCau9IraQ3HgFn\r\n6WNaYC7G3Pb87td95Gc7BtLWvIf8E9pHkJ9MWnixcaC1DFo+SOAuCPSmYmyq\r\n42K8Nknf9cddamLT+MlisuTvnavUITfxYZw=\r\n=c1n4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7f8af87642d395b497ff80efe06544dd459b947f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/rtl":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/shape":"15.0.0-canary.357f2e5f1.0","@material/theme":"15.0.0-canary.357f2e5f1.0","@material/button":"15.0.0-canary.357f2e5f1.0","@material/ripple":"15.0.0-canary.357f2e5f1.0","@material/tokens":"15.0.0-canary.357f2e5f1.0","@material/elevation":"15.0.0-canary.357f2e5f1.0","@material/typography":"15.0.0-canary.357f2e5f1.0","@material/feature-targeting":"15.0.0-canary.357f2e5f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.357f2e5f1.0_1667242236484_0.6609231769437671","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/banner","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.eb103d4b5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a22cbc6c978373398969da99b7864f05775d59a2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.eb103d4b5.0.tgz","fileCount":31,"integrity":"sha512-o8ysc9tntY0mFEa+NWw1sztmjsRPFyOifp4quBlxXHxBXlz9uOAdwyHPtk+YPzA9KKqDoOfmltw8y0qCj/eTiQ==","signatures":[{"sig":"MEUCIQC7NFrxWdg1Dx8Y47Nc5CJhcAolVzaQGukf73DlTRcLhgIgU0OVo8m5JhbxBooOxrvX/GG8Ak5wHOuLLbVsYbvpueY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCirACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZLQ/8CUHCyxWsGcfwIqeKe2TDhVr4Be4EqIh9iEyW8ekAmeDMNawQ\r\nLex8yCYcdWbZxjlzv5siQLbSg4E4gU/nOLEsMA4ynSrT5y7RGdAyvuLjWe4S\r\n6v3g9shB67wt8B6T+D41HbtcoxAWFJ16GlCkAsB+VC4WVVgg93bmq4vQCt5S\r\n41AFmcjmpaU3+xQiE4rwSwH4AD7GtSEBP7IAyeDnKLOmwhe2rZ+RthzA6sR9\r\nkHJMyNsw3Y2JOLq+/1bXREtetaX7BCpaD2dd/az2/Yk2c20fUB03J9a4eOVE\r\n3OnEV+9Wh0gwht/hRDBznuu76zWkigieSgshMidbXTxZdx/j7iTVpvh50HVV\r\nCtHPKjlJwvVeIqzsxHPFS2Lcn6Ry+DgdPqitclQHVJXaXI+XkUHrxOVpCRwh\r\nMn4cLCCWwxbQBrCQeMPo5i4PQQfb44Db3LAv5MG9Ae1at/QoCSj69M5zUAlD\r\nf51B+6+A3N2xiaGYf9PGHNIoOqtayGlzdLhLbJDqgWHfUniVC5AJPh2hcdbL\r\n7K9TGhjiQc22DN2sW/Dfb1xZ0z5G4tMKLdjVX90VTy9a8N3rcv6UtfAImyW/\r\nwe0cx+DzQwZiw+JZUFQFsEZmiS0f8Rv1fqi2qMGuJacbtnMdXxRED53CwzLN\r\n5Bdb5dJzap+dkRyAaMTkSvQd6PS03PHaKaM=\r\n=IShF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6fd82c2abdb8567ca00c6847142375ca8ac18b90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/rtl":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/shape":"15.0.0-canary.eb103d4b5.0","@material/theme":"15.0.0-canary.eb103d4b5.0","@material/button":"15.0.0-canary.eb103d4b5.0","@material/ripple":"15.0.0-canary.eb103d4b5.0","@material/tokens":"15.0.0-canary.eb103d4b5.0","@material/elevation":"15.0.0-canary.eb103d4b5.0","@material/typography":"15.0.0-canary.eb103d4b5.0","@material/feature-targeting":"15.0.0-canary.eb103d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.eb103d4b5.0_1667246251574_0.947518385696116","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/banner","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.af5f01223.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7580fa73b4c2d6ac21e7243f8d3417371657f8b4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.af5f01223.0.tgz","fileCount":31,"integrity":"sha512-1GO8uJ/pksXmvn0m0Sm/L9p4tS/dXPpGxFcssN+rYLYifNAFy5VLi429vOvdrJCcFdu6AmauUGTZkfhpbyLgdQ==","signatures":[{"sig":"MEUCIGcbhbRPCv3aQzj0Nse7LUOiiREc0MguMVfkYqvh8I+tAiEAkBbNPwHoEv2n0FQlWTvD5Y0kUV/deW3+bQNA1ISZx2w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWeEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhchAAmNAeWBcRpWSoKrRkgm8YZYYJe2yR8ewXTW0YcfSiPrRNu1t3\r\nPOoTQyBTRQojr51ndx0fKGH6YphcaKQz6aUemQZOrfbe2dysiGlgIvG+yYKo\r\nsinAPjXWFC3cSZ7+U3ZeTLcorSMRtnL0DN8wgefUaR97luJMaifdmO9fZhkC\r\n7w64jXTFEZ2H9OF9rUEXWcyzoCnNeBWwv7fy/d1/jyL33RocPtkK0OBPevfO\r\nJ0/bbeQ5z8/ztHF5+wFO3s/RB5+qFFm2SiVO61S/4LEGkFqcSVCZBS/geWPJ\r\nssyq9L6PxGei4JCZLsTf8nWrkr8pftn7qZSFYAXexZ4hlqm/tcxBI5e2IbsC\r\nXn37PbIDlGFfuxsSiGOHt5SZiUArYXH/S01eRgO6VLulUHuCcJ8K5dS2Plxu\r\nj7tWy7C2eFLpST9T650i2MrRSfmp9bgCgErhqVUs17FL6QsL4ukFsDOhlVDO\r\nVvwdcaG4+pPX6HN5U20O1TIIDdWPUjUrZKrL2+4ds1GB9AJqRG1Y9g/S2akQ\r\n7AurzQemh4M1m0zGLtcM02XV9dDqpHQCD1QEyUnkcL7sO2/0Qo6vM1ekTmYF\r\n+F2jx941HbB0DR3ypngHf/vVQK2ZupT/KKz+lDyPZDd5pPfcbDAST1eJansD\r\nyw9RkXbCB0PfnOxajBrKtnVwA0XfAO3l7Bo=\r\n=I8jN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cc7d8ea77d18e30bad947332164ac02701e1ed9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/rtl":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/shape":"15.0.0-canary.af5f01223.0","@material/theme":"15.0.0-canary.af5f01223.0","@material/button":"15.0.0-canary.af5f01223.0","@material/ripple":"15.0.0-canary.af5f01223.0","@material/tokens":"15.0.0-canary.af5f01223.0","@material/elevation":"15.0.0-canary.af5f01223.0","@material/typography":"15.0.0-canary.af5f01223.0","@material/feature-targeting":"15.0.0-canary.af5f01223.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.af5f01223.0_1667327875997_0.6406920430703091","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/banner","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.58733ef41.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ae1f3eb2817f534b50a38201f7c9733c25682b9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.58733ef41.0.tgz","fileCount":31,"integrity":"sha512-N1jEL9yp+EDzzuXD8xZ+zlqEZ63ocgDbDE4bLSlAxhZf1omC3whw3r7S7pZeyM83yrf3BgF2b94NTdD5aFOZGQ==","signatures":[{"sig":"MEUCIQCInrv6OlWxtCvDvMl/U9+SLtWPt00yjtnpudy0DTnN6wIgVrPsqIZRt6VZKVRq2LpDGSvl+ZSHnNR/Z1QVsKye3+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrLmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2ZxAAnL7tsAGIy2yDg/46RDHZlX0h5UEXrzQo52yDKzKquBgTXJeD\r\nEjkozteZ0ZyzKkY7y7w7TmiYoEaljvbCxfInfSLLDvP79sBd9rPYU+jfOe5b\r\njWIblBApgXP9QRxasHSR4PCHL26JmHPZHBfGkGmq0TJQrOZGVUAhu6LDAsih\r\nF4CouE8ZNX9QJhD8ugRTPdMPW2gxiZJv1Xakq2MUA/7HAiZggWsYa+ETW4oO\r\n1OkjsAb4yuikbuPK63TLEb/YHZsSa3E9UNnSw53eW1rQeAdQWT0rU4rnm4kl\r\ng/1tWwpxAWrbxuNY0c35mHdDmugcce7W2JYGTpswpz2hOQ25xHLrkqp9u3me\r\nnP9USohAMl/S7PqY7u2yoMFJjZJSfTLPYYPRn2nQ1CLX2u14GxEbddaCZ/by\r\n8/30RP/X3ioZ1+a7YRghMU2UNC9fN3u09kHpNhagtHLL8kgk8nMiLKb8mJGh\r\n58p5sQWDhr42h34V7jQOwkmkLYrcqk4r7mHdqs0FtQ/Z1MV9QRQxDfMffsW9\r\n7dBzY9T/KRhhz5kRwWTyXW/gLXv4dpATSd9I+ItZMIPB91n6N/M2cd3z3S5h\r\nqicphPBeewJD5NCiFxJagqi59t+ghf99IeCpPi78pnegxuoWgFg3ih9OoJtc\r\nptBfCn/06aBBO6hFjZ4QKQkhx2Ex3f/VT7U=\r\n=2nTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7754bbdf66b8fd61976d3dbbe04b991d9dbc0caa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/rtl":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/shape":"15.0.0-canary.58733ef41.0","@material/theme":"15.0.0-canary.58733ef41.0","@material/button":"15.0.0-canary.58733ef41.0","@material/ripple":"15.0.0-canary.58733ef41.0","@material/tokens":"15.0.0-canary.58733ef41.0","@material/elevation":"15.0.0-canary.58733ef41.0","@material/typography":"15.0.0-canary.58733ef41.0","@material/feature-targeting":"15.0.0-canary.58733ef41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.58733ef41.0_1667412709985_0.5804234107601836","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/banner","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.909b48215.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8adc354df401bcb8559aabb67e2e6725d1806b8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.909b48215.0.tgz","fileCount":31,"integrity":"sha512-hpwBs+a8TOXAFDk6vs2WOQJ/OrH706jIJehS6rabrOYbmu5hhk7pdjyRYf4VOu2foGcgHbytfU0ItJyLBjvaaA==","signatures":[{"sig":"MEUCIA8dw4Nt3uK5T69dip5e6edwO9x0u3EHMR5Z/h3FBE+jAiEA4SYsawXzgcom/2u6quTgmaDur+HWmMY7WB7oJv8aKEY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz7dACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr5LhAAlbCo8cl6fayqnSfpvrjsuZhAUcn8NfMcV/VTOSP7YYR7bszm\r\nLPhl8VlVRl8FqsWOFgnvRx1GFi5+aZ+ZSHNMgQaKtCsl1b4/HfldXEh9KxJu\r\nkCWWryGjPgkshd8Kn7NQVaG9n7fnXhjL/ojownc6Fjej3GOAoDusvpeLy2iy\r\nbTe8Jqe6h/f2/4RQahDNv0Fks8taOEsDCK0EPgc4ds8c0qsp2FApLWEcWBh6\r\n3KiOfQdt/VMBaTZqwIiUPkonWjBZe8Zz14ApXVMU7BJtarJVbwcz1B1MlmIV\r\nu4CUyEmidlhpsrhn4gZ16tcHz2BNOPU2ejZR4yd3WCyfP6L/TrPdhqTek1H6\r\noUy30iytIeenYi0Ri0hNC7Bdfz/0fcTHbDTZMWe8iW5RHYWfpSN4j++4X2LF\r\nX/wD1+GHXN07pgeYNIn7gIWvuAu+rZSiyVc1zpSUjmt0/RAvyX9f2MbCnz/b\r\nqf/gPK8wRQyPlx0Ld/VPfbGDWeakTklYPukOSVibYWgErB6Hx98yUyGlXnWT\r\n1IFp58yjaDJXxbSaZSKoURo+alF6pQK93eKnrrRxc3jb1p+Hx/Hexru61+eT\r\nD+bxYD6hb3LRZw12xXTbEivyGahsTkUNqIZvK0uNghYfhHi/sqXbnj90LpX1\r\nXisnfwR9lvjuY4U26/8b0lqh1oV9yj1G0z0=\r\n=SDTh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"68d372ae12d017bf28fa2ad3c86cad4f70609116","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/rtl":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/shape":"15.0.0-canary.909b48215.0","@material/theme":"15.0.0-canary.909b48215.0","@material/button":"15.0.0-canary.909b48215.0","@material/ripple":"15.0.0-canary.909b48215.0","@material/tokens":"15.0.0-canary.909b48215.0","@material/elevation":"15.0.0-canary.909b48215.0","@material/typography":"15.0.0-canary.909b48215.0","@material/feature-targeting":"15.0.0-canary.909b48215.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.909b48215.0_1667448541395_0.41402153292402444","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/banner","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7f17127d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"02a6c7c8958866991ef038e86a625a2501acf10e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7f17127d5.0.tgz","fileCount":31,"integrity":"sha512-SHfA4nx84YmCiiZBm7kw86ynZHpd60W4jhPvNJZ3spzPr5a0frRsxk5RLGOVQFSFRku08OgHYdH80MmWxtiHlw==","signatures":[{"sig":"MEUCIQDeY/nZuRt1TuyDraMEw48KQDOVJRjn79Lf03vcKHLszwIgMg/5ryYiq3gu8oM+SjVquvrKpjRj9sqdyrG/FoH/Wig=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAZhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroGQ/+L6Axs63zoLJz9fbAUGfbkLNDX+1rdoP/p30/xzA9RIDyxtSx\r\nYztLbThoZXQGArR7+Rp40I8eWQSj1YSUW1fqbanmaIOGFr1NY0cjYtL9q66S\r\nM4MaQj7qm9x2t7vM2c+hvURdPYjnDBmiR6CcEK34vpeGHtAOoyLXUgiB/3Jd\r\nzaEo6oagN4ORYvFuiA4D8KW+m71c3V/BVVLIFK0tbdyZEocU9njL2b0Y9wni\r\njYGHQQIz+kpFZYrOC0+5//HURcZtILd8/ZeI7XqJY8Bg71K0DjiBCEuG/HR5\r\nOHd7xqP6Tl6J70ZyUuJx1+xHZcslTYUzEuz8tHv2RGuvNBLMd7/hy7+mOPvx\r\nsV6u/ZReEtsKOaoOeRRhkIxzX/wWULmnanjBUMovlQwyCjk6DVjk/r2ZXjT7\r\nQB+QWVSDzuGdEKIxkZijMZUwvzbm5R3N2QG0qBtlZM9IU59/DbjaAGztjmgS\r\nqUWwHoOL7XCAQpOt/6OGZAU6mnACj/UrJ6JiD1CNIWrOWR4aj6yWJJpTZBpe\r\nsnGdyVngp9pcmigO/XNWbbWNgcXzR/XFlPjJoNcrC5zckObn8HDBCWoixqQK\r\n7Fd2+Mf5uR10qybG4/6KKi+H1yqI3N27OsXumqDbbubTHQW9Zrf8b0B4Imf4\r\n1Uzw5UcPdmMK6hbK2IG+hHFLlSjWS7tgwRA=\r\n=MOKI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"26e22af93057c0fa00e7fa9eb104abdc96131eec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/rtl":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/shape":"15.0.0-canary.7f17127d5.0","@material/theme":"15.0.0-canary.7f17127d5.0","@material/button":"15.0.0-canary.7f17127d5.0","@material/ripple":"15.0.0-canary.7f17127d5.0","@material/tokens":"15.0.0-canary.7f17127d5.0","@material/elevation":"15.0.0-canary.7f17127d5.0","@material/typography":"15.0.0-canary.7f17127d5.0","@material/feature-targeting":"15.0.0-canary.7f17127d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7f17127d5.0_1667499617577_0.38747250539715505","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/banner","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.da95e2a05.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"964948a7611e0042a22aaa72b9167c5b0cb7eca8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.da95e2a05.0.tgz","fileCount":31,"integrity":"sha512-1CVhscb8f5/FwuqHes2z5C+57nT2hedKdJ9AwbaXRlKv7J2avIEzpZXGFh7p8ctgN50Onui9MuOhtzJQK73a5A==","signatures":[{"sig":"MEUCICG7LxgRoO+Pa2+ZBI8utSJeZFVYGC/zASenMUqVnpG/AiEA/5ifIuHPOGyGAawPmYxZ5PmEyG+En5QkE+9/LEA3b+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUUbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJtBAAoRgHbLGoSl4VCSqtyG1qz1QdL89GmAgxEgHbCUGU6btnPMa/\r\n7kMD7xiWpGrUNPv3BLcIuKG8aEP8z1C29e604TOpr8CAZJ1GlfZQ+xdHA8al\r\nagHw4BQdC4qDACJ4YEm3m6/2Y2w/vV0vLxIBNYJbslBX8iPkpjySt9AWgNAV\r\nP27zm4w8DdrXZabGAerWlkXyi19eu//3pwsWB9EYiyQO6kwxFOxWKqZwDtWX\r\nmzxCnWR0PqTvR5w/g0EbZNdJS11oBId7EA5fc5Q6WEC556mil9GDwDF/qh1Q\r\no4m3dmby7d7ut0XToH2uqixXs6NR7toMwoZpxiesJUyAkA3kfiskXG36EpgO\r\n1mkTiia+4tSU/TWyujvp4/8vWch3rHSRBj2dLB5cR8OzVsbLRvvE7t6qzD9k\r\nfjFQxxOuqaJdZkq6NQ9OW7pyzGepwwkgTTCita3Z89CUOHhkGT5vL29H7EbA\r\nnHutqg9s/HmwYM/h1WDVJGX1JyPzGPI7Ji/7j4BZqO76audi6rfJFbmPMNLB\r\nfYJgScTHEzcwu1pyeoDjaLdPxwyqqYW8Dkv0znkPVe8yxqN2Vhxu2E7d84lN\r\nAi2yo2Cx0QwJ3yKqGXcZtonWLzpmrwWnJUYxki4eLn3ryapV6yeYRwFqaeRC\r\na4RKFcrtxSDRAQxuV3idZk5/fwuskvGFEQA=\r\n=StVU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"eb47dc6e824d05fe1a33c55066101c99ce1fe241","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/rtl":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/shape":"15.0.0-canary.da95e2a05.0","@material/theme":"15.0.0-canary.da95e2a05.0","@material/button":"15.0.0-canary.da95e2a05.0","@material/ripple":"15.0.0-canary.da95e2a05.0","@material/tokens":"15.0.0-canary.da95e2a05.0","@material/elevation":"15.0.0-canary.da95e2a05.0","@material/typography":"15.0.0-canary.da95e2a05.0","@material/feature-targeting":"15.0.0-canary.da95e2a05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.da95e2a05.0_1667581211467_0.8315263139139999","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/banner","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4832e2750.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6759cc48a15146dc22d0f158c86d0b3667359e90","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4832e2750.0.tgz","fileCount":31,"integrity":"sha512-v9z8/anMiiEycT0bOnzTm/E30lLMVYqJPg1oxpYvZKqEZ/AjV0AJzMHYtsu9rnETu+RgGcgDgMkrp2bt4iLFbQ==","signatures":[{"sig":"MEYCIQDrWGGSEaYIev38r1qutn9vI+YV5CGxdSfCoyu39uhvIwIhAP79AoS9kracuJTICdX3pn8CeIdorDi/BQU4PO6TKqWn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZXzjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNXA/+O8rEXlZwFdGmSqeY4Ia5C68BOf0DBOHoA0G5JNaNZTboCUlr\r\n8omSfRy15mXuXhCpFUgEjq1zqAQ/y29o+wZL7GJwEzXHw1Dr2KT6Im/gG2mk\r\n3Tr08LA/H5L+Ovyg//wmXGWmVz2LRkQ9n3rnxAFFz8Wdm9YhUsgBip1KkSUt\r\nh4Z866Oi0zTZ/KLkdnUD1I339PPYGQhXTJ1MkbMo8XrW3bKNfbBScqXLXvhf\r\nB2jjT+8rb2mlewJEojI7OE7j3ZJGRFeDN4zALMy0sCEOHlFg3Y6fUOAJx3+J\r\ne83ZzDsW6JZzAu0hXHLK4tA0kTRJEv8MTsJ8pjA3kFvT07oqrwWjfzw0wiq8\r\nh8mnl/Ffjb+nilcUomkE67gjZn9Y+UV+SdJ7tYz2yBvaaa/wIs7qZQgGlCRU\r\n8LxlhSEd+e5va+AGiGN484fWTu8bbEqJUbnPDDyU6bJBvMFOR+8oi3b8oA4x\r\nWqKSj1Y+S2XYqPvE5s5ywj2W8ddtZyo00HbUw0k9iKMCQcTycD3J9axQsJSy\r\neVR3UgUZxBPOKyZsxDMO1r1u/hopCiDacCzatiYorBzXFTFrLVfJ+AkmCwZ7\r\nJRkNINXuu7wS3mK+WmhvYv7H+cLLukZaaXJAwUxnxizeCDai2aNmJrWXwTgo\r\nLUIGeqIRLX1P5XfxZZTwfAFknq7XAEoc+l8=\r\n=biuY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"258def578bdd5ff3b52dbbfbe6f06e14b2b74045","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/rtl":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/shape":"15.0.0-canary.4832e2750.0","@material/theme":"15.0.0-canary.4832e2750.0","@material/button":"15.0.0-canary.4832e2750.0","@material/ripple":"15.0.0-canary.4832e2750.0","@material/tokens":"15.0.0-canary.4832e2750.0","@material/elevation":"15.0.0-canary.4832e2750.0","@material/typography":"15.0.0-canary.4832e2750.0","@material/feature-targeting":"15.0.0-canary.4832e2750.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4832e2750.0_1667595490848_0.43305265849725627","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/banner","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.215506426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1020d204bea61f203c1a5b644a5cd8877c9c38f9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.215506426.0.tgz","fileCount":31,"integrity":"sha512-XcuMYfnWOGdQ8FU1zc0EmboQ2SrrTNrlqXMWhPvmcMnSuEPInH1iX25h7lTbzYQwTMptuUbhXh4CusLkcuhMlA==","signatures":[{"sig":"MEQCIFeFBCkT2tHNSJUAx+KdtxZP66o847lNedcj22ADt5KnAiB+xSAoWbnAM6BeUky1KqTeO88RLb1opyIk/ms21nqu1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbc6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWLA//VLxNzF6Zj8P4HPHK/CC1XILN9qzs0alCnlWeN4pe2Rr738uo\r\n7lDKR4zdNpWr54Nw8u+/SJufcOW6DX8MzlanrGrsttZPn/uvQc3kW3rNTLGj\r\nlTI5ygij+wfklRcqYDZYNwISzFPfFPpjQur6/+aFJDrH70Kddwos3S7qYUEP\r\nxmBgMizINTU33VMq4fUj94zO3cUkkEG7lbeEO4d/7WXzV5KII5D5ifmij2vC\r\nxQD5MPrLego/52Zi4JM+8pC+neJKgQeavIVQh15nYjJDOXrh593IXbr//Ad8\r\nh5/EXrji3sq6gStj6gXeCiDgWEtU1ZKXP6X5F2fwQXuVzdxU/KoH8xgkRqbI\r\nwa6XhY61vp0jA3LwEpsoy86ZkEyudrIFqpDs6/F91Qfw2cbt1HwoywaX4CF1\r\nuRciQFJWHl+nAPI9i0IBSTpqQzKOfqqF4nHtvg4rHE4f7lopeK5CSB0hD1KI\r\njj0KLD7XhVLLtpqxv1ae1CF6Pn14HDqIzwBPo8DZjyo4P2Wbvnt8vv6a9TbL\r\nn2+BWp3fsRXhlVCV0JULtsilm5R3zGuP3h5btYFqKl6KueSrZcY0yexmBmKH\r\nidNLel4gK0Ozym/TQ5NUGCByhQm4usvNNib7xyt1e0YnUUZNbchbH0aj1ij1\r\nHo+3TXdFxgWB54diGcZqFWl0FxK/k7FpcUo=\r\n=hR7K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c7da5104ce280eebfc1b0cab2279b8acb906babd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/rtl":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/shape":"15.0.0-canary.215506426.0","@material/theme":"15.0.0-canary.215506426.0","@material/button":"15.0.0-canary.215506426.0","@material/ripple":"15.0.0-canary.215506426.0","@material/tokens":"15.0.0-canary.215506426.0","@material/elevation":"15.0.0-canary.215506426.0","@material/typography":"15.0.0-canary.215506426.0","@material/feature-targeting":"15.0.0-canary.215506426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.215506426.0_1667610425967_0.8573168342583803","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/banner","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4cf917476.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea9202e8e34380ee556cf370108dc2aeecfc6b0d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4cf917476.0.tgz","fileCount":31,"integrity":"sha512-EMqsEO3M8THl0+/8k23Lkh+GTuuvgJwOKgWo6hMMlOAdaowsB6zR3NcRY617ooiSa6DNfFVab83EHDlaMQyRwA==","signatures":[{"sig":"MEUCIQDPvSUjP5Msx8/Z4pXMZO29FmgVfhz6e3r4VEHcMY1JeAIgZP7AjzkmszLI4DFk6G0TFKljgu/DrkrMdQNjKYvrZ6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqXWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7EQ//QLuaXSY/fslAn5g4K+dDLqcAR+AwbuPK47XXwJqyHJLLK/HX\r\npb9I1oDTaGf4oCLFuqAHkpQg2NVJdM1rO3dSMczEtKU82HDrT9pTKcNwbhRk\r\nOW95FhIekg6/RX9EbXErZTxHf2qfZpOCcIwVe3I3GvE9QybFqGBtLnxnHov/\r\n9+l3TgrDc0/djJIz1M/YpG+IFNuktN/iFVO7zBVcyp/e6V0HKltRSI/OhbPV\r\nS8LKScBMkeohH9TvJqA6RdD4l6UwZFBoiS71y77OFwdm5HI+n2GjRrAbTIzR\r\nibpIV7wQEbI16rB5swxGR7lh7lp/2IQcBsKvnFem5qXX7zay1q3JIDMO77r3\r\nWZ2plCyUb/+i/n6RerKFL8Xe/mA6/b4OmNSJniSyDqJy5HNsqOYXXXOw0xzV\r\n34Wzysyqpr97NIqST6jWb9mnJ6J/ylqnmVXV9xCALg+HeXYJyfQ9JA1mdflJ\r\nAet4yGKff01UbyLXStPkEawN+kBwklS3Nx882f6morznnB0ZsNI2078r3nQD\r\n2gDFIVGN28NC+yVCaN6aObsm4/l14aETVc/AOZKxwkGNu41Ae9d6iNd8vnqL\r\nkp9gROV3VGxL7Gc/zM1r8ShFVOQZwCYOqfLl9h8Gy5NFze138VCBnWwxe/H3\r\nj4prv1SjpABxINFHZ/W8/NrMEPNvcBnQyts=\r\n=pHCT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c7ef38a54cc085b34eea4d38f143f3b65dc649e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/rtl":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/shape":"15.0.0-canary.4cf917476.0","@material/theme":"15.0.0-canary.4cf917476.0","@material/button":"15.0.0-canary.4cf917476.0","@material/ripple":"15.0.0-canary.4cf917476.0","@material/tokens":"15.0.0-canary.4cf917476.0","@material/elevation":"15.0.0-canary.4cf917476.0","@material/typography":"15.0.0-canary.4cf917476.0","@material/feature-targeting":"15.0.0-canary.4cf917476.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4cf917476.0_1667671510472_0.5915850387156125","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/banner","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.eef14bd32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"302daa951468387719507eadabe1624bbfd0a8d8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.eef14bd32.0.tgz","fileCount":31,"integrity":"sha512-uQZvlSkIK9nCHi7IcdTHfVLZgTz1UdLDT9lXRjynXZVBxc7Je9rVzhQZGNbAn68/xvXluhTcoPvTM160E22SoA==","signatures":[{"sig":"MEUCIQDNccTnMPFQkN3H3bpKFWaGlBMKEf2S6D5LHZ5jezlK9AIgHThSWUqCbhHfVKaY77w6yudW5rroLkFRSnxAeg22Nl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+4SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0Zw//ZK9j1cCAmDFrt0vZ0lzOY6TbC+wyEldTkt5EVC6JnPbcprlg\r\n1m6bi0c/9ntsbl0izstNL9OYaT0xTzbFyaG9uIyKq0n2H04E0YEKjsJKu4RP\r\niKqYzPyLxUBElFTj7vX2erAAZjDn1MRJEDhJaIM63M8U4ZRURVWgDQwMwpVb\r\nw9f6z8vihalGY3Qq15tpMwXM1PbLYwRGbjzwB2Zbty3Aa5Nzd2sCoBcGN6eW\r\nAsg0agNU1jOPfjKxTZavhtSAA2ylYnAmQlkw4v9HoOnqRQ4bUW+EqzSAK8/2\r\n9UPt8LyGiqwQIMb+q7MCi4UvxLYqer8c+Hg4717unDdpmyKgJnVFmOp/NASi\r\ndV3Ca1+nz1H0xk+c/T0pIZhcyDd4oER+emkjn/eG3ph0uQ8XAHmggcnJCfq5\r\nTEGOE5ZPfgADZ7fOPDvbq/uF9tGwZsLSfRBXASIkfbLKXN7HN/6mtGAqXIuf\r\n0u6oOS2uCYUWGFjugg+EhuAVT7euqqIyNxqRnwXLjaA3yQ2MFujzHfZMMD1O\r\nwkzikl/gdgTJjdX9OJ1XA966Avd0TDCleXPMt3FDFhvDWQvIljcrFCWS9jB5\r\nnnIvPOQ/XgcWGHgk3tWx3qhgE/NkEZ/2KEoo9Db4lVf6hf7dSyGCyCeUqWDd\r\ngo5jsuRSJ4HdlhujMNnivzrUkd4ADY9vE8I=\r\n=kEag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"40acb6cbe1201f5ef758bfb96da3145ae3c4c1a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/rtl":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/shape":"15.0.0-canary.eef14bd32.0","@material/theme":"15.0.0-canary.eef14bd32.0","@material/button":"15.0.0-canary.eef14bd32.0","@material/ripple":"15.0.0-canary.eef14bd32.0","@material/tokens":"15.0.0-canary.eef14bd32.0","@material/elevation":"15.0.0-canary.eef14bd32.0","@material/typography":"15.0.0-canary.eef14bd32.0","@material/feature-targeting":"15.0.0-canary.eef14bd32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.eef14bd32.0_1667755538517_0.8919465032052172","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/banner","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6faa29fe9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bd7bedda3c57d8f21cd84d19d9d2237277364867","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6faa29fe9.0.tgz","fileCount":31,"integrity":"sha512-uD0vno9DIcIW+h9HrYaUUp3A8BoPEjIGWzENKZvO1xw9I+IRY3GMVsFPdcggh0GCsSvkBKwzWOoNXo/tdaFXCQ==","signatures":[{"sig":"MEUCIQCtSFTIXKQK+jpXwcTNwn8JG12zd/TLQS6NyB5bU+1xYAIgOfgTyYit9HctVOLPSu9ljkzHQ4s9oOvQqpD1PIt9FFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHgUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrncA//UeB2zlqfGo8vDEA2P1Jcc+D4MqJNaG4ZxQgQaIxYhrob7Ujb\r\nGgvafLSEDV+2vp7bEtJPg+98Ib3l2HhRsB0MWBZGwPUdi76qPZoFfWupLZuL\r\nXJV/AYyiqK8ualpC3bYvbc6rkxHxrOv1j6cYfOGutamHPPTyLvbCHZhRXh/U\r\nrHW0eozdbDbvtplAqjhXW5Tv6hh4PS59OvYlHAOx+pbkba8cEc6gx09fvT8f\r\niMHYHZK1y/TZ0UCTIWW131HXxG9WeViI0Tc3AG/2haqFm4V02Oi9KEWNLoo0\r\nukaJl+LbvMzF4nHYEfHSdkn1vzhrcGlcYVo5eov53ntgY0Nl0lJShZF5xVhh\r\ncIlkJAQdBQzM6dzFER/cJgg69kU+IPbBdMc7njtTMcTAEEc4AJul4BPfzROr\r\nAzZAja2LjVjT/wdZBnQTa4JxmL9zKfu4LCzEht+GlpqofDCLI5gF1rwjV974\r\nLIqz8wNpFp/tGHFsmUstd0h13mMpFgscmuac/GxHc3BRljXHQbpnzsDcJifK\r\nwcYTOIHlmblANVuLGrAXUXwnhHlMHFmMUr0tK8jpyOtrCXjzUgm9DK3MejOn\r\ncj61rUNoSQ4b+X5sZh7ozjduqUe1OniCP7TqtZVG/0HUS9N4AnIgp6eOaBUL\r\n225/cyXw4aC5L57TvdzVCU1ZgfHcSNUtwSg=\r\n=g9jV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1403858386443f73c0593105b5654b6ad8596a9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/rtl":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/shape":"15.0.0-canary.6faa29fe9.0","@material/theme":"15.0.0-canary.6faa29fe9.0","@material/button":"15.0.0-canary.6faa29fe9.0","@material/ripple":"15.0.0-canary.6faa29fe9.0","@material/tokens":"15.0.0-canary.6faa29fe9.0","@material/elevation":"15.0.0-canary.6faa29fe9.0","@material/typography":"15.0.0-canary.6faa29fe9.0","@material/feature-targeting":"15.0.0-canary.6faa29fe9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6faa29fe9.0_1667790867786_0.49356056905765766","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/banner","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.9af09b967.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86e37b604ac05bbdca2f866c9252325636af66e4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.9af09b967.0.tgz","fileCount":31,"integrity":"sha512-5zgp4mJBbuc1PSsfe9BfSBaWEcGwpZ5Ri0KrTr2kjn5FIkFUkD7wc/x3796+RshfLdX6MgIxXaIH0iNrITYwug==","signatures":[{"sig":"MEYCIQCHufxyu4NKbELCxVSUs0YVtyh4YqJEBO7QkQ/zkgBpBwIhAN0tStXNrARhigcjuKq7bpIrgmueKJtdfjOaiifLFbkQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU5rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRfw/+JxhaZUFsFnv+DT5mGBeeklJzC5rXINFBeOecQ4q3IiRPYX5E\r\nxxmUSogLd+AbEov4u+YZMsabASZ1I7Bthasg055xjiiB9xYRXN86inydN/CJ\r\n8NJ+apKIGMUDyC5NVez8Z06B0iyfZhWfTMcUY9lvxzWFWKwHdIssopRLEtI9\r\nNuTYFQIPJwvJP62boT9CbosK7ZKdiySz5jn0fEV9yT1oiUMqCvXcOxGJ8Mho\r\nE2dzyv6+2WL1wEkvqHesH19LnQ7hmvXKAyJH+yYXkky3Rb5ySTVmnIweTUFw\r\nZdU4B4TmTILQyI9Vvlv84cvpEKYjAP6x+0dOnX63Xujw0Bl1RiU5lkIYeBe8\r\nT/jayDeQSznCOr0Zx6C1T5g1IWJmYIfG8BluSwalrKtqx52PhHx0wqlNpaTd\r\nuJ9qxDlavd1yzvAI8SXhJZToQkrlbQJsb5r9+21yRKf914MIl7qexwikh2HN\r\nKNkz0DgkQKG37/B+fR+65NZwRhUX1iFBu5KWBmUt5wZofdrcZZqN14/4lDg4\r\n2aZMEY+1WhguMXg5dvUWfgtCG15vmNz3Fzdk1UgfQOhufjPmIaA/kX0G5vUS\r\n8i7oiXw6l02+hAUbnkebj3YHdSJEBCXP2oWHVM4WU29ncb39iDA6RD1UETVs\r\nPXES5N+PjXoYXbxR4lSTYUnKoL7+qDET780=\r\n=TNn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"745e702463a22f4c5de6e94b3527530a9bdcc9d9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/rtl":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/shape":"15.0.0-canary.9af09b967.0","@material/theme":"15.0.0-canary.9af09b967.0","@material/button":"15.0.0-canary.9af09b967.0","@material/ripple":"15.0.0-canary.9af09b967.0","@material/tokens":"15.0.0-canary.9af09b967.0","@material/elevation":"15.0.0-canary.9af09b967.0","@material/typography":"15.0.0-canary.9af09b967.0","@material/feature-targeting":"15.0.0-canary.9af09b967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.9af09b967.0_1667845739311_0.46745071316943987","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/banner","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0f54fbb93.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77810b4eee9aec714f4009b8a4a9681e1cc3f406","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0f54fbb93.0.tgz","fileCount":31,"integrity":"sha512-Je39ME9jn23d0G5avfSvgwpe65g6KVLm/LHxgsmOo+CXdvu8z6mvlPcB/cUuXjGjFZOaDdcGpkuVVM8lTMvhGA==","signatures":[{"sig":"MEUCIG3bUJV1qWrmhxKbpiyGqwIcabr+d3NH1ug88tzxOD7aAiEA+hDnCeOchvS/5g0bpWJb0oDevDCglWWPwkCh8t3A9Fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatDRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojZQ/+J+UrQKhaIIqoKCJ0/o4YhiBCYOxaFKnC+iizVX6s6Ue+U8sF\r\nNPaSkxImEDCcysa+wXujO38ymmdLhkxP/k1N3Z/9mBNwuVBhykIQFgyNxjEU\r\nFS1NG2A0J/9IK+hgceOPcLPpWb1SVJIQN3Eiwl5ulEEgYUuAbwgKYbPJFT3+\r\ntrQN+bgtIovXefQrs1NYQRXuqeWPkz/6S7ZZZ9dfJAxmWxbBlM7dZNS24vAT\r\nHVUjOSJXcfdX/ZdPkT/Afggezd2DhMAmMHAQ/6THO04rhculLdYUtsHHpxfx\r\nvy7OT0ebsVniI7CLwhykmz45DL29BXpql9jKQM/XTB5rhsdoZNvYLLhOt2R4\r\nrN1KcrL/JNH3nixWcEYF8EgCh606EBNsmBjdSlYburzs/fnQwjZQ/MfhrVWy\r\neYlDe8/ZVppzcaVOrxAiiloqUuILIHzr1On5q60U2VivT59elgHeUqdDtIOU\r\nJsNJAzo7a3aaTqWQMM0ldGFjK6FTqDlHZnisaiQY5WrAWhvf+vARFf+XruRZ\r\nWTOVcsMZlGyy6XX9/UbenUg1bpHSmTDQiBlEL2BYTxxr1gCUaXh2BbFtvq31\r\nXXAF6UsvuTSMyRyuz6cJus1gyIS5jNbunK88OLvuSvoWQ85leg+1mAJ+uI+V\r\npCruSomljcRYj20+Ds3HyzmorV5tGo/EKHQ=\r\n=6paB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5d2d1814fad8065dd869bd95c156c04ad45926f7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/rtl":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/shape":"15.0.0-canary.0f54fbb93.0","@material/theme":"15.0.0-canary.0f54fbb93.0","@material/button":"15.0.0-canary.0f54fbb93.0","@material/ripple":"15.0.0-canary.0f54fbb93.0","@material/tokens":"15.0.0-canary.0f54fbb93.0","@material/elevation":"15.0.0-canary.0f54fbb93.0","@material/typography":"15.0.0-canary.0f54fbb93.0","@material/feature-targeting":"15.0.0-canary.0f54fbb93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0f54fbb93.0_1667944657644_0.029517111723813105","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/banner","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a8d47f9fe.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b5aaac56109382a2338e492e7d9b9bd1367016a3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":31,"integrity":"sha512-eSpYZJ0g2Lz8xdPKiU4mzhyG8YQlmQKENCDsGtH842Jru8TeA6LhAQWYTUDUzoTCMdumWcKKhugq5eeEKVyYlQ==","signatures":[{"sig":"MEYCIQD7bX7kn5oJafMNHtHZHhMz+CU34reFaJ+Uhc678TqJZAIhAJ8edmz7QRDNtU09wmkBLj51hG7dviYpLQ2hxAKxas5j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayo6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5aBAAlKh4dVDAOyC9dmD+CtW4PtPMTrNmbLlNVrvGYbw8fSYr1gMc\r\nUCWWUm0zEP6qTRO61ZwqT2D0stYGNc6BWXU+5rdHvY4CULYO2NQxuv4XT4Ju\r\nV20/G4vmg249DVqcQeeA8ODI3YYEj/lnBpK4Cb59DSquPMSvKf7Xt07On/Z8\r\n8EvnaDSxm62+gLIO8Qt18dUamfJTfnUveSSgLyLFl1WADFCAW5wtelySE1V5\r\nSaokwhoR60zSlIDQWvNf4jgGUiNmITUAVMGr3tx+M78waT5GeDNNvaRxgOru\r\nZ7URfVYIh1CFx1WXOZKi85bJMydmNwbbH2FEAcVb2T9guU1ghTq8JkY8I5Ko\r\nQHrwOxzt7kh0tBHk6Z3iWBzxqsxZiIq1eZ2hrkCOmCeJcxxXmd6aBO3Yc4IK\r\nYkB9QRhG/H4hAlkwjY+ZkAybX85uEWsNZ9hsZDn54KEmGRBiuOUqc5JDZ9IN\r\nY5XWWcT1fiA8THoIH2n3IiD8JnYotuB5XNdV0z2X9m4/4pzQYp3Alay8EzH5\r\nGpvAaSsLj6JAJeMXfU6lo5+bm5TukGix96L62kuWfaeNbptcwnQD3uW7UfY/\r\nCilVwx16iIbj5txEaXtYusoe3a4WGCa6s/BrQkCFcGedN7BbQRr09OE2OK8X\r\n5wnueIJRpKB82cPHJsmRzS1msl+Jwn0gWyk=\r\n=JuF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"37662af94525622cb00ae2dd17f31f6a93b4eed8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/rtl":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/shape":"15.0.0-canary.a8d47f9fe.0","@material/theme":"15.0.0-canary.a8d47f9fe.0","@material/button":"15.0.0-canary.a8d47f9fe.0","@material/ripple":"15.0.0-canary.a8d47f9fe.0","@material/tokens":"15.0.0-canary.a8d47f9fe.0","@material/elevation":"15.0.0-canary.a8d47f9fe.0","@material/typography":"15.0.0-canary.a8d47f9fe.0","@material/feature-targeting":"15.0.0-canary.a8d47f9fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a8d47f9fe.0_1667967546209_0.3161138825566565","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/banner","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.66a1e75e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"05c6dda3836f1fc3a7b4cfbfb3755a15e8592750","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.66a1e75e6.0.tgz","fileCount":31,"integrity":"sha512-oBVFTp16P+3WnC0toT3kVYDCebNvqUPAuMCVhbQfk65vRKZ4t4ovduQrOTQvgta56sAvjOOb82OpZ41rBZGjsA==","signatures":[{"sig":"MEYCIQCfWpmYbluMj8abomPHO4Q81FKoJG3vYiyL1MGTin2rYAIhAPJRKUVP0WlWmsxNHwsKnziu2GrWV8tyKGP7i8AVJj/P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3SmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Zg//RyMOr0nzbu5XXHJI6o5Wes/rsnd4h3dC94Y68xfY4BUBtFeO\r\n56avCCcOxIy+OEjt91aM2lPsBrjaVd1/3TFw5Xxh2sii/DLp2NEUPbrA8kzF\r\nvGqxTT32Kz+jWRasXJBu2U2si8ksz+6DiAkJJlt7kwD2hZ1ZwiTeQnS9XxCx\r\nPkVNM4jgp45+UHDJ/GlZEVxTJtjUI1ZbuCtmYyzmySJdQg27Vjt2Rn+oxfd9\r\nLd72PtFsaon67V/83UzfyZrP1wgn/4cgfJnRgoxWUTFjmK96Z6QZp4LKD211\r\nGJVt0BwBkUmkHYLWE5KzD32KetEVlpeqg/zqimC5kBdvhf08HaaFJCnvYaZm\r\nI5jqYQJ2WqDhUsdUsyW+2CDIOqjYIWzJRYCUqILJDohoCVQScfg84eX4oEAI\r\nMiuulCGpyMWl730uUGVnlV+DfMwPtTStE2kVBTM5LPW3qhXl1MmYOQn9/OlQ\r\nVrCDRQLPwzWd4sULa7Rk2dpzOepxARDv8M5dxwiLf21FJvDOhNgAWWDGHOLA\r\nSa+ncEtQzSI7y+dSA4vJNOYqfGKrgTE9GwL8ti0M/3AcaRMIVK7dmbNLja2L\r\n3Ludt2A2rw2mX+XNM97bGxPQ82muqXtNG193AikcR4UY/ky0HIoWYBdb2exo\r\navXbhddK2HwW+VsykzwHrkHTCfSFnSQElHI=\r\n=x9qE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8ed0cca778858904bcff29669c6dca407f25ef98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/rtl":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/shape":"15.0.0-canary.66a1e75e6.0","@material/theme":"15.0.0-canary.66a1e75e6.0","@material/button":"15.0.0-canary.66a1e75e6.0","@material/ripple":"15.0.0-canary.66a1e75e6.0","@material/tokens":"15.0.0-canary.66a1e75e6.0","@material/elevation":"15.0.0-canary.66a1e75e6.0","@material/typography":"15.0.0-canary.66a1e75e6.0","@material/feature-targeting":"15.0.0-canary.66a1e75e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.66a1e75e6.0_1667986598011_0.15522394483369784","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/banner","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5e5c2afc0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8bfb82aa307b249265967d89613d31ea3df33d0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":31,"integrity":"sha512-zvTaIhZ1XpJw9K8DJWHKueyQWqLvBQT2ErpgQK/0UV/xZp0G3O0GyQHVWurMcQW8YGJfimvpCXrnl0Tc57WWbw==","signatures":[{"sig":"MEUCIEqeXkmAHxSJQFs62TGx0gYH9gvAgs5RqCGHlCH8hz/RAiEAje4xlpf62kjBVUqvHCpj2qlOt4ASnzp90H1MPVWTf8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5TtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqC6g//ZNjnEiiLLUeGJlYOBEyg5BY5Q/WAQLuHrwknB4IHcGXN6iaJ\r\nODTv/LCRjRGJWnuZOqBCbCw0GjArqFfRN9DDTZRY3Wnklhr1CXJjhORNLO+o\r\nlGPLAxZV4FFVI/PdY5wmOiRch78szOGLAw8zWpswixQ50vZv9wet7OA2Nrus\r\nS61ICXZK2FSzlOeqYFEtkEyw6LUSIO+kE8mHWFbZdHCyiIYY8jbq95H1eWX/\r\nwkO44nwgvafeYG/9S9HlgLyfiYts1nvo+2Ot0zPfglUILcPWqcJ7jkcdmiI8\r\n1uB8pc7GCYqllOm1YJBbiCNb0tixVUdFZsVVDkXjH0/4tEfF4fM5NaJYiQds\r\nRh9pgnuOMpjwfyicwFw/4/Ow657cvQZNawsHk5GAYuWeTiZQN3GyU9F7ef8B\r\nhyLkTyT+DneyUTHzSm3yFTXnORjICDiCOhzK7DTfN28YNLu5iKh8eYR2Ok5A\r\navbAzDK9HCsuvR2n2Dv1oZ9ITz+ClUgSPe+FAIofTWBzj76FMyJuaZShmcJq\r\ngF9yVudSL36WO5CYenF2zG3D5VNFjNabf+Nu6sqmv5CQlaN6jrknCVoaesHb\r\nfzrxRk7yOD9Ar081t6paz9kLjQimKxj23E7iFwzHGut12gk3icPn1H6JtbKk\r\nIgeipJL+7lPWijY/XNPyVBagLBCJu62k8aQ=\r\n=LXw4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f14204a01be3c79ff286a8287a0ab731c371492c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/rtl":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/shape":"15.0.0-canary.5e5c2afc0.0","@material/theme":"15.0.0-canary.5e5c2afc0.0","@material/button":"15.0.0-canary.5e5c2afc0.0","@material/ripple":"15.0.0-canary.5e5c2afc0.0","@material/tokens":"15.0.0-canary.5e5c2afc0.0","@material/elevation":"15.0.0-canary.5e5c2afc0.0","@material/typography":"15.0.0-canary.5e5c2afc0.0","@material/feature-targeting":"15.0.0-canary.5e5c2afc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5e5c2afc0.0_1667994861381_0.13545741841453807","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/banner","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3e3f43359.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54f0b393c0ec385a715b8724fd53790a6f20eecb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3e3f43359.0.tgz","fileCount":31,"integrity":"sha512-8M3PYA1CDdgM9KQ5+HLnf2eLDdJ4t/DuJP88tld7DYQH+vGgBZNyGOeQi4PVCWdAnfPhsXfRDxdMP0kzdk0vdw==","signatures":[{"sig":"MEUCIQDmcDJbfp1KZbcYX+PYUNuQn1cpghsAOCHnNA6YDcvvWAIgEVYf/2wI5jExjxq3dEZj9G0EwYFM0fpodwEb1F+yGhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAevACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+xQ/8CyZL/BRVIBI4vG5/QuZNZOnrsB7EP45ygv5CYwveqPwwuaVO\r\n6A/L54ISJlA7LwRTNORtNjuueloXJnWTWboJ9LrcenU1Gu4Km2HqXtn8GQz0\r\nhlTJJ/j4DjbvqlcB9GcnSA0afb/pB1kLZHFkVloHqrVDCi6kzYm2cYfLbSmT\r\n3eIK/1gmh/JnvuJ53dfPGIR9o92OFuGCdTYbUGbZ+dUtfyqsIaHdtplfKUjH\r\nI5f7oH+aXmSlu49zMpj0ypmBQ/mCgAtKyucCy+T3NCoGjhoZAY3sygJLM7kV\r\nHqjKlYEq95ref+8VpwXmBPpJNv1MF6De+xfg8RgKzGvbobNgiVK7K14G9HZa\r\nW1uBxGr/H++PhdRZzcvQYa/cS3YnweqfUGmKxqUko7jOafebePi9dn7XspSC\r\nGliXPCIzjhfKQ1AUNbQ0+5JrDEHVYPNkile7bgPQZWlZesqbH/ibPrNhvKxT\r\nwdF8sbNaOUvdowDO8b6wDJ9dCR01HJhB9vGLQRZPh7sbiISYk57SU43XD+o0\r\nKVC4FIxXB/drNTUqRopyzweq4EKOYwOmlxjJFqnTmf36dycfKJwVt+4EFe8y\r\nEcxPfT5XiOPHfpCnCJPAZbUd8/Viym+/0XE/7SAMax5Njo0ULXOfuLfB0Zg4\r\n3uvptmvFsVdXMG414xhY1dZQ1ok3MVZxEeA=\r\n=b1Vx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"722326ecc6026aea1f22d8b4e1c9901bc13141e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/rtl":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/shape":"15.0.0-canary.3e3f43359.0","@material/theme":"15.0.0-canary.3e3f43359.0","@material/button":"15.0.0-canary.3e3f43359.0","@material/ripple":"15.0.0-canary.3e3f43359.0","@material/tokens":"15.0.0-canary.3e3f43359.0","@material/elevation":"15.0.0-canary.3e3f43359.0","@material/typography":"15.0.0-canary.3e3f43359.0","@material/feature-targeting":"15.0.0-canary.3e3f43359.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3e3f43359.0_1668024238949_0.44179845939353357","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/banner","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3f667fac6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71a4bb844dabbfd92b9b1e4c1da013d9e29ea5ac","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3f667fac6.0.tgz","fileCount":31,"integrity":"sha512-fYgpf/XqmImY+AghpWuxrqem7sJ7xrvHTWKcMJs4IPUqqrh/FaVDgs3d+T7Jqw9kzO4Bi9V8hjut0oQsg0//Qg==","signatures":[{"sig":"MEUCIQCnCo+LheMntu2MCwtj1SUGuyjza10tjAy+BIcsi/qqgQIgVAfHn1Bigvf0ZTwrEShHrZ2VzF1z4EWGoGtWZWmyKGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444483,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCSSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrfdg//V4VzVTne5YmIKt8IiXhIAnuDHx0Ne6UYLHqmyd2NUhSoV8+0\r\nPQEbJBukkiSjzBI+SLEn8fsmbc9/2Kdz83yp0boHwshPlfubVh/10ZwQUSU/\r\nPyFfNflp1RUcgZWuM7sCg4mkPdzlFCwu4FnJRzcSxlVuWCv/CCmTUFSabz6s\r\ndHf682rf2Jx/TqKLDnlp0V0bzb5ZpMLgz0NVjV0FQJuJ7rswr9i6RpSu9gwt\r\nON6uxwRiuKciOUPa1GvlpoPkovC1k+uoSNV6cxXyED5AfcaC+64lb57Pb795\r\npQY65+VNPKGxwnRiB1fFXI0bhKBIAiLc1xpFwPqma0bo5Dy+FDi2FJgTH4k5\r\nBNDxOGWikq/vVHCka79omPI1C+5HxTkGEDcEBNjtN/9nOa91YAtQALt35akf\r\nTkZ9DsUq0fbY63isE5HmzcKCIpnZyxb59ARSXOGR1AjyEbb2IObMr/t9zSIP\r\nWbOraCqUp2xpKFNu6H++MlZHz/4FZEr7OJbbs4iX8oB15/CZPWFCPerNZm4G\r\nyVUiQw7NMyOH67c/5J620p3k1xiCX8seHKnFZNAXILhVQY0LI5HIFUyDLbwE\r\nLwizsGr8mMRdNpBTJaDIqta3vRl4C5b5jloNN18pO0G2/haJdfpKe0PfegLZ\r\nORRyhyeCpyghId6jUFrIWjIcpImbg7EjS0g=\r\n=4kUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0980467335d47e19b4ec72e32644ba0a08bc0c34","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/rtl":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/shape":"15.0.0-canary.3f667fac6.0","@material/theme":"15.0.0-canary.3f667fac6.0","@material/button":"15.0.0-canary.3f667fac6.0","@material/ripple":"15.0.0-canary.3f667fac6.0","@material/tokens":"15.0.0-canary.3f667fac6.0","@material/elevation":"15.0.0-canary.3f667fac6.0","@material/typography":"15.0.0-canary.3f667fac6.0","@material/feature-targeting":"15.0.0-canary.3f667fac6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3f667fac6.0_1668031634344_0.7653155042152111","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/banner","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.faa28c1c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bc4fb9580c6d48c218a755dd363227f903c2300a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.faa28c1c5.0.tgz","fileCount":31,"integrity":"sha512-kAHBLyWMu6Toj/8uQWCzcsy4caMSqDWBiIaqqK2K/XkXmf3nGUhybhxc5bVFUbcyOhBLpcpFDN10bu6e29pmOw==","signatures":[{"sig":"MEQCIF1BFsto0xt5g/oXiVFleUhcyO0CUkA/Ds7OVOTykG3gAiB39TBj7cnhsk/FhTEliA4kToBB9MI5eBqdjjIrDK2+6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnoqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbRhAAigmo/wRaF09RDAAOx5SZ7lauPM2wj7hNd336wEikyGNK/20Z\r\ntKRy/ajlXObYD8/8WagglhiO9h1SfOVEl0v96FJ2HzChOHqz+qmNUSNlTBVD\r\nEp1CeMe6Vg4zZjLp01JPhgSQpC+kqLe86bDmTxho+GD81cD1Q2U8//ez9Be0\r\n4rLPtBjHuw7yLQXS7aOMZNyBVGr7ULzpd65pJFY5eCx1T+TCdqsrfKASbgTQ\r\n7pc5QHvIEpUUlT0ooT7tt6qUg6UPwKisL4D1mTzvTHUg7aabXXtBYSImB37A\r\nSKq/8/ZRJMnZDxA+OflaSBKLTtdJlRi+RAKLliJCWzlXHPCh0MckmLp1SDJS\r\nx6jAQWRx+xKKNS8RiWSwAC8PfU3U2SpMtySGeLl+5qDGgIQ9o5cBvHb3Ecz5\r\nmtgkqJlOjNezo+2NK4wMjTpzLf8FB2FjXMU8NKpYxlbxVogvelg4GXZ1Vc8M\r\nmVypJZMcn1TMTQQuvREmZxjWIpsU0U3llXTnkphkvoZgbnahMJ1oGYdVP8/q\r\nWb4+x4OvbwJG1vG6Mn39cwZmjqKVmlsyEpBbUuvIbWI0s1cpGuyzI7euGk+G\r\nigz8qLxY5vt7O9RbpoqYe5FYDDnawl2xC+w8wZ6xQvjEwExF+1yYo1hx/zzz\r\nFjubeVwMZMNZJCAPtLe0KifKXw8joHSObZE=\r\n=nfZb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d36350ee1c0fb11d053acc0cd521939199fd696f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/rtl":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/shape":"15.0.0-canary.faa28c1c5.0","@material/theme":"15.0.0-canary.faa28c1c5.0","@material/button":"15.0.0-canary.faa28c1c5.0","@material/ripple":"15.0.0-canary.faa28c1c5.0","@material/tokens":"15.0.0-canary.faa28c1c5.0","@material/elevation":"15.0.0-canary.faa28c1c5.0","@material/typography":"15.0.0-canary.faa28c1c5.0","@material/feature-targeting":"15.0.0-canary.faa28c1c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.faa28c1c5.0_1668184617923_0.7443345038534708","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/banner","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a868c7866.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e96bfa7bc22efda114abe18d787f97db9d6bdfad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a868c7866.0.tgz","fileCount":31,"integrity":"sha512-A5PumA65CGLkBtLfp+MMrVgvPG91Zw+pZ/X2IhWMpH5tcRk2zUcWmsN2ox5UGNRB/qyjstil9Nr8znu15Kua6Q==","signatures":[{"sig":"MEUCIF9c9Cer+mxIYjMsjuHbv2tjRngkeTuV0j6Jf2gL4VPyAiEAlvpEBmmLT6ACqDymmHQDH1pI6SuRr7eUmG1QJxHLnTA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnpaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1Og/6A1u8K+T4ZKRbw4RXhp+JHqrAM7frs0ryoTr0kahFgHC5mrJY\r\nxwOCSvjudt/wGeDOW7ip++uvfyhdEodhrerWeAjHEof4aVIni+VbcBdtFEZv\r\ng2RRqZ+ZJIwUkF4jVpCwPvkCVFZrV99C552Qk7Pg4w8b4tA1NqEiwvlmXFcM\r\npT5HInSQgFKCILXb9flh7DKZwSpcJIu6FU7sfNQ8EU1H3OTaKrlf8j3zGerN\r\nAxzVFn1HPnUbsGdGjQ+Dc+zcYz86xpwKixd7pnXiGsGIAoPJbmfiQITbSiW1\r\nLTFT4HXJSznp8sADP0jSLzj3lwHKd6mU4Z6QU1llUzDUD2hZE4kS/G0C6Pm9\r\nSK+V7dTDqepvDYkb9Dl1F5wq0ytBqcMeQ1ERaKi6hjo8xlrLnaYGQU8LzWmq\r\n2uxEHpXqsvOPVxG3Uidqz+vy3Zo6h426Yc6WQDx47sa7dZLTbp+ta7vfuDRA\r\nfR75foH/GfUGyOmPsvxL47QSsoVq4ahbJJsHqSJC6eNDF2xYnkd7DnZ7MjY5\r\nfePlYIzgMnru+YrSe7+AsZNWwMXrqgXeHWjExRl13vRuoK++egOTdfYcRAKH\r\niihrHZCmkiEk8zBDMGn3fNXbreiZsQ6tQD/ivi0Kkkk55pfm5EeuZqDdpwEQ\r\nlNLnhC4yA1e4Fz51FR3x+9gfg5hnA9/3qVg=\r\n=4ClE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d35416d7d3365898437e980f43ade48e60904e85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/rtl":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/shape":"15.0.0-canary.a868c7866.0","@material/theme":"15.0.0-canary.a868c7866.0","@material/button":"15.0.0-canary.a868c7866.0","@material/ripple":"15.0.0-canary.a868c7866.0","@material/tokens":"15.0.0-canary.a868c7866.0","@material/elevation":"15.0.0-canary.a868c7866.0","@material/typography":"15.0.0-canary.a868c7866.0","@material/feature-targeting":"15.0.0-canary.a868c7866.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a868c7866.0_1668184666592_0.23076236933490546","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/banner","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.602fe8efa.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da41b3a461bd7158aa9de52fd2203f31694844b3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.602fe8efa.0.tgz","fileCount":31,"integrity":"sha512-6OL4DXM/LNVlvBXIt7vVdm3ykugWuMiE8a5PKvGk2gmaAChm003QVqk2dVhYcCRh9UCbvxcBoYGda+b1TfVsiQ==","signatures":[{"sig":"MEQCIHnBIlTFlUZrIFPyj8750jTyhM2+IG6sn+t4ND3e3YxEAiAO4fSmRBfH7GVTBfNv9sp+cqwwKgweyUwof8MJthYWxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboKYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokhBAAghPChcNP1vFlzhr0re9EiIsIE3MAIKl591Qb3bXuJQfeuupv\r\n9ttG8Q5O5AtbaVEP4WIVUNXirXvzUwvPI5jAhGPVBtHKSPOw0Wpt+PrZ94ZX\r\ndw/ALVjyBndlwLi/mN+Sr3FphZ2yc2dmqbWq0Xkw4IRfmVWYe3a+sRcWm2O+\r\nE9Eq/uF2ccC1RJwe6cMM4rEiJagurl0+ut3n1OS5VzFOeZyuEKRI25fz1Ngi\r\nkykWUQM5Jpjn56IAkzxbJdzvp3KzCFf6oeuhxIPNznyYVAe971NvFUtxgZE7\r\nvHcn5xFY4bfWH77dnwgkGR8cJVwZcNGJTbyMhAXZyq5wn5iqD/IRejQMgvli\r\n6FUJ0Wtd3uZu3pyV58L5SqWxCQHCGBmAHRpvqGoOSXcjcwa+t1MGg6QJR+Yl\r\nz7mY7qLlXqnfNxzJEahfQdXeL2DwbDyhu62HtRSi9H0ylyGZkNjGc4MbjmuK\r\nQxEQBbo4SkRg+ETlJc8EzLcodKK4LFycfsMOslCpIpQvTrgqnJM6+fq0pKae\r\nh+D74x4XZsJ8BdJ7LwFGDfMJwUYA+s+Qi+aTAvht6tzsQhf7NDZl+kO/ov5k\r\nep3sQN3sOCAscoU4CVPWjh2OsT/O7k3JkpP/c0sCbtsFUgcq0nd1jzQvTpgp\r\nhfjWI33brO3D8oC5x4QnUXx5L74YaMlwJi4=\r\n=vXET\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6bdfaf09ca41b2fd7e3db4797bc2f536f8fbbade","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/rtl":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/shape":"15.0.0-canary.602fe8efa.0","@material/theme":"15.0.0-canary.602fe8efa.0","@material/button":"15.0.0-canary.602fe8efa.0","@material/ripple":"15.0.0-canary.602fe8efa.0","@material/tokens":"15.0.0-canary.602fe8efa.0","@material/elevation":"15.0.0-canary.602fe8efa.0","@material/typography":"15.0.0-canary.602fe8efa.0","@material/feature-targeting":"15.0.0-canary.602fe8efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.602fe8efa.0_1668186776285_0.6461269277351078","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/banner","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.558c2be62.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ee311b5a921f73fffec9890d8646db1faf17158","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.558c2be62.0.tgz","fileCount":31,"integrity":"sha512-bRYDCt8NorChbTKycxznh/cyfLdNRozhoxs1f2ZTeuilslAy/2ik4NatZwQKST66ZAiti+NWdTFGqtQy7uUITA==","signatures":[{"sig":"MEUCIQCs+Jz+0EDk2o6zZl6vW6QOriaKAz6FRB+P2SkO+tx5DgIgE5uuv0I5l+ji7XWm0aWEcnD6uvO7wQ3ICUGInYNZ5+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtC8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq9Dg/+KpBIe5A905xhCPE/k7+BT9dHSZK1FUlBI9Mlimx9kESbnaut\r\nSeFoQlrXLB5+DGgtsX2M7TKSr8WWFxLCEIIRs8BaPYK1h6X9oc2nKcEqvUbN\r\nJnt/03z5WPYI4ZfxNfrimi/0JzpCCj8kzAg+G4/fn2jznv+5+QACdF25sLUp\r\nPWO0T8RMuPvyyvofrq0vWFs7RyQbSLI54f4oxLfsrJQoz9soM3QCuYAX63Qz\r\nfw6k0C/xl4b0Smk7BxzvNplxkSfxcA3eWiXpgDTagPRVXcgUnLIPFr5/nox5\r\nuU9oHkmEhBg8wrI97ka9YAfC2jX8A4m0AYu01zdOW1Q6B5ftzWp+Jf5ow14M\r\nq13MMhmkEIrqqDLRpIDYcfCZqWp5zpGVZJG8dU55Sx0UKx80uKTTsD2/IUkV\r\nIje2hm/QDec3c/Fb4L5ngMxsvVw/QOWfnjV78PeNrlEp6L5xVTAXe2U9QV5X\r\nMRbEVO/8UNEpDVGHMMBDVolGcpmSAUDDgtGOh/XwUY7CVHFdV0zIwDXNkiY+\r\nrw2BBQ8jH1Qfhsm0ehP36DgN7QTMjXbpYEwzFlt/yaJ+TV6zHvoIMpiUQQ66\r\n8txP6vqW3ON7eKhMPSQ02b8FP1fbaLmZCaZbG6x/vgLtTpf6KhxDuZplpwbF\r\n33pHylsEf1uRLmAV9J1B9yC+ksgej5YEHJk=\r\n=C/a7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"64666caf2aacf562ab6ab5b701e89f28a9bb5c74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/rtl":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/shape":"15.0.0-canary.558c2be62.0","@material/theme":"15.0.0-canary.558c2be62.0","@material/button":"15.0.0-canary.558c2be62.0","@material/ripple":"15.0.0-canary.558c2be62.0","@material/tokens":"15.0.0-canary.558c2be62.0","@material/elevation":"15.0.0-canary.558c2be62.0","@material/typography":"15.0.0-canary.558c2be62.0","@material/feature-targeting":"15.0.0-canary.558c2be62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.558c2be62.0_1668206779269_0.8524945551365228","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/banner","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b5c13a7a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"142c174f1a01dbdae41e5cc4538adb23918a8f73","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":31,"integrity":"sha512-+iKbNbaU8F4jb2TCwKkdwJWHzt4WUJFZ4j1WhY3I0CHQu8f+npsFsRSyEVegCklloYpesy8LrVmlrFdk5tvpTQ==","signatures":[{"sig":"MEYCIQCE7B3UBrAKexYsuSbNnWbZSl4ro878AKU+SX6zwZor/wIhANR5Z5E3mUBjdIkGxBgOqvVAgnG4pev0/8589jd5VYkt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":444471,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmXuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTBQ/8DAoa5RJGEt81WbVhilEsrzAR+/MrFN27kRQVaHx92xl1JHez\r\n2OaIKOspNLQ/MkvsJU1vYehRhGV+WmtCYLpQeB4pGB7vzWLVEylkxGBDOx14\r\n+DbyWwjS+kMUmQkA/iSKN8w6rkW53JkKUUC6+AIhoyCF+3E48/wHNxY9VelC\r\ngIzMNEpKjUyQtR2quvGisFrjZs21gaVk8oIrwiEfzNodI/gkt2gQk49IkTA5\r\n0fIdVqrOx4WtgoY1w3+p0NcJE7oH6yLyvCAVMuO22ErqHD+VQ8HEtz81+mpV\r\nkOJtTbQ+COil9/0Eb8Z9vlwymsiS6fGWku6TPyxZ17jTTLR/iefcpMgmi/LU\r\nTyMFpggArGZE2bGApUNZ3V6EIagZHs1CX5CGKwnThzVt7nYR/yvGbg6ZEkKv\r\ntRZ0Ggro3xm2xD9PxZsTyzkeZOaVQKLgDt0235Insv/6DMq0ifv5WtpwlrOl\r\nX+ZZsoCOJSKYjNZxfwPqFq8TpQZXxqsBtYXf6RTdWllpJdm5kEMoum3VD7NW\r\npNTgVCFFPjuPhecVtpnFgaQkIi3SvQFvCqDZhmqbeu9yvjLEoRbM5PgH2mg2\r\nX/xIOpWoYaDgMFysXOx0vL7qmeI1KorFePP+V3R76yPN73n+XuAPPYh/iVrp\r\n+0nxtCnpc4C4LAS11txxfX3wANuYXBjxzZI=\r\n=BFLr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d7e326425877e3ba53b64755680e3503090a01cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/rtl":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/shape":"15.0.0-canary.b5c13a7a8.0","@material/theme":"15.0.0-canary.b5c13a7a8.0","@material/button":"15.0.0-canary.b5c13a7a8.0","@material/ripple":"15.0.0-canary.b5c13a7a8.0","@material/tokens":"15.0.0-canary.b5c13a7a8.0","@material/elevation":"15.0.0-canary.b5c13a7a8.0","@material/typography":"15.0.0-canary.b5c13a7a8.0","@material/feature-targeting":"15.0.0-canary.b5c13a7a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b5c13a7a8.0_1668441581839_0.655308126150173","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/banner","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a6e1c0702.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ae2989ce0a25b2c012cfd30a4eb2b161f77f812f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a6e1c0702.0.tgz","fileCount":31,"integrity":"sha512-lRb70N5GgBrHOuZ97/+OJAEox5Sk9hXs6+eBB/8o+LFCo88o+f58/SUZnHfTHG0/IXfd7R2AIvpdgkLX8LZcIw==","signatures":[{"sig":"MEQCIAGo5ajidQ9zrJHEmEFScNeimEy9cLryFVW5dbXYBVx5AiANc31wcYl0xAWCnOro8iYlv80kyo7kZF13rwJcqyATXA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnqpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoe2A//Qq4WSv8WTn3QvPF/orVldvmrSLjsJTw48XDZ7FdL8y4dd436\r\ncOWn9dlN292G07KNJLnG913k8MXwEKEpe1V31At19HvPF1Pp5MMD27bTm9Tq\r\ngsmuqiLk4eAL2yuNIXACRsDe7yG4qCAvNnwtryNkKiu3PUKii1JLa0K2eRTV\r\nEK0fhWjUSyIODfz7mHXXh6UhTA1JeJZrfDkgTpxBS2ozhH2350bRi+JAY9g5\r\nEhq7SLvz1JBwnWpFzEeZYkfD1004wiROr2CXEa9TcR6EMHlvShuxcwpsQjnw\r\n3kmt4CtXQSFmVLnV2L04Kt+0PFgxIjB0o2xO2+d+sbDYRohf+760evrsp6aD\r\nXv9C2grKlA88QX/l5lhPhAvG4Y7TZLyPXcaPCfWb4UyiaUzsl8N5TlRKIBCy\r\ne0pQLK9AIEqbzTALT1qtud0A2pZ9pbbn0wLgfx1C3WCcQsnctIT9HReJfpu0\r\nYszXWenU9orkqn7MI3dQNugQpLKKyDN4BkznaVD11fyuB+9abiSoGm2iiUhy\r\najA20Uyhfll8ep5LehVdgzdXu6avnOq0OkxhHAWsVtHOWBI32UR7xDcv+zKh\r\nIH8Vk76iJQdxEipZTiVfuKXF8uhnCfVtkq1kR6e5TZZHf1eXO4ufX0+DgE2L\r\n0G/GRDs1eD1HmLZWOHzsvz5/d/FbxIQVtzo=\r\n=EZqQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3c1ee7333cad68ece747437d4bab1a737d6ea96f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/rtl":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/shape":"15.0.0-canary.a6e1c0702.0","@material/theme":"15.0.0-canary.a6e1c0702.0","@material/button":"15.0.0-canary.a6e1c0702.0","@material/ripple":"15.0.0-canary.a6e1c0702.0","@material/tokens":"15.0.0-canary.a6e1c0702.0","@material/elevation":"15.0.0-canary.a6e1c0702.0","@material/typography":"15.0.0-canary.a6e1c0702.0","@material/feature-targeting":"15.0.0-canary.a6e1c0702.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a6e1c0702.0_1668446889408_0.03103671045183476","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/banner","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b6f8a06de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d6ad4a3fe53290272d68fd3f655465e997379fa","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b6f8a06de.0.tgz","fileCount":31,"integrity":"sha512-Xg41X9rw7+9VtdRGoa1T0XNAdbeAuzn6W4wYahbhFtUEygcHxjhfck5yW9SrIdGOdOMCB8F6DXXPuPhcwI2btA==","signatures":[{"sig":"MEUCIQDv0iURNjBBvP3mGkAR/iEnQGkUazU2SwJy+x2m+Q/JkgIgTy8+YdjC8CBmE5JHvGkUUhigiz+i8nAOkcYsZFuF1U0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1v+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1sA/6A6xliWlBqRlVXpmcv1/slQ0g6YXKsrSmhlfVoZboYBOgdGrb\r\nChriU7z7ghthsMnfdijAbEVJ6dzEd4l8x7D6pKFlZhMEOrGwD1eJw50U5lRp\r\nGaFVXapLgsZjiKno4UK5G6N6X3BQpzz2xRt5co+nw9LbnU6PO7te1J7Ofw0a\r\nUuBwRue7RI5VZhQhzONG9nuEKrOBSZ6QxvX58x4xtL5s7mX9TSGuAkwE20Z3\r\nOART3vWeiPmOy3sgBIrks+fk9HmiMsWe3q5x9lfHPJ5euvXHNurXCIKIJXGN\r\nYH4Y/t+j01N2Jt562uyD3KrpjTO/nLjBtNQWkP5XMMZfM6+IGGlHn6YzSL4O\r\nGiKWQC1iwypotd6uFqOhRyg8ZFJyO6hWK0oKxNUkcVoWLed3XoSBzugg1gP1\r\nfkX+ReHUApkUwUbNhbnVmg/jGVU7n6q9EQxHUYwKHtJqbx5GDPoHoo495u2X\r\nGf0/bzkxnIYodTaCKQl3jUtyq3k3JQhFDqrZhEl/NG30MCuvdz3Uykc6RUtU\r\nvpp8gNv3mXTFIkcFlxYRmTev/TKj7kmIJjI9zOczHZZb0fAg08DLntcMpffb\r\n8k3UfSx/DntUhu3dNdov7pfRI26QvSyWCDnmaFqelYEXr+zBtwPq3gbPgm6c\r\nWbyCUBHBxntjkpvoSGIYMcroebBI/E1yezo=\r\n=3uPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"92681882b16f14e6a94df4b1ac983fa86e242640","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/rtl":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/shape":"15.0.0-canary.b6f8a06de.0","@material/theme":"15.0.0-canary.b6f8a06de.0","@material/button":"15.0.0-canary.b6f8a06de.0","@material/ripple":"15.0.0-canary.b6f8a06de.0","@material/tokens":"15.0.0-canary.b6f8a06de.0","@material/elevation":"15.0.0-canary.b6f8a06de.0","@material/typography":"15.0.0-canary.b6f8a06de.0","@material/feature-targeting":"15.0.0-canary.b6f8a06de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b6f8a06de.0_1668504574028_0.02469927042992026","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/banner","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0163f3ba5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6badbdac3da4da4632ede4e389a9645a455dbbab","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0163f3ba5.0.tgz","fileCount":31,"integrity":"sha512-mZpT93xQqiFzFc/B7jH2nH3PTImYjku2abhnaD3tYvtdvdH+5kvL4pz0X4PieZvgyJM+HQsQo2MNQHen5184PQ==","signatures":[{"sig":"MEUCIQCDM08ERh+gztO/qoa0xd4jeBkLRV2SN0DO2NW13VUtlAIgLyKOqYy1lGdY3CZallE+d04ASwalzF1/wHtN4KHo9WA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9RlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6TA//X4QrgZKzp1vJVoUOIMCuASKqfvp79J+aaLmqCXZIGdaZP+vP\r\nB72yEanFQc6yJBuXd5oTwPQjpcwqVAgc+Uag747LzQQTqb3pGGDTRuHKko9J\r\nTfxBL19XDFUezV4cvfsNEgXqajS6raC7EtWZDHBmjpqjO68vA+mpCzbFCS8A\r\nM4VFGPh5CM1nUaW+t2pqRNbGYltEmGBAvxyDKsINxeu3zJb0MgH86QnRKBKg\r\nuKB8MnlT4P3iym32cyev2HRARbmVXkTJ3bBoFVP0TfoEHk1S19X73kEM8Dor\r\n/NCRmfIwrycdsAjAjZjr0vNYN4vNXSgzB0DFLxd1Q48rurGL9qIKsfX0EO+Z\r\noVGTCM8VFqsWtfcur5jekFvJ8fb1g8Zs8NnDnn10AveCdeysCrmf2q4CHqYM\r\nMQIZUjJrkOu0O/djhqmOj6ItPKzdvprh5+2Cx6T67dCo0wOdHx62+A8eowGA\r\nHWgnIQ4TGsjDdznkjzGO4imL5Eie/+fnzT2Af0CUlRL8wvUAxAW0zBJdMBcj\r\ntECyTXod0/4jgYE8kV7oiNjmikaGtxrtsqDg6pJ9dL1CdGxQmcs69Sm/UT35\r\nH55DB/SNkjnkEVSTHo7SiARDMKBhdFOgfeItGXrv0h4mSG826Ad01d60kVTM\r\nmDAtMvyb9v0aEyItDGcmoWBH1U4rthIb0TU=\r\n=vU1K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4198cde77ba33a68c74eb5e814d92df422f464c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/rtl":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/shape":"15.0.0-canary.0163f3ba5.0","@material/theme":"15.0.0-canary.0163f3ba5.0","@material/button":"15.0.0-canary.0163f3ba5.0","@material/ripple":"15.0.0-canary.0163f3ba5.0","@material/tokens":"15.0.0-canary.0163f3ba5.0","@material/elevation":"15.0.0-canary.0163f3ba5.0","@material/typography":"15.0.0-canary.0163f3ba5.0","@material/feature-targeting":"15.0.0-canary.0163f3ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0163f3ba5.0_1668535397311_0.9799979309417393","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/banner","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.66c5cbb94.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0da23a14b13143e1eb0ec9fbf75bbb4b6c8c035f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.66c5cbb94.0.tgz","fileCount":31,"integrity":"sha512-RY5bMOvAOLmJJ9b1XBIXC6m9zE+vgP29N4m2lFoyE/oqv4dX8aYaN9L9Sd5hyBcu7XFMAJ9Jo5veZaEOZwYowQ==","signatures":[{"sig":"MEUCIB8ffNzRua5dhNCKeZtVv7a17wqEJzNtz5m4bqeRZP5vAiEAgvKtZYuWxfc41fhZygqcNl75BKctZMAC+CxXPBqTwEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+kKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwHg//Zki7GlOb2Qro+3VMI7QdiLy6zO8mC1oKdXuG/O4xsl62HwwU\r\nHlDIbFRYbPTzoODb0zhAuPxrAzJm1ugctFAxoh3IfVKoC23F7fCvvoNxnmmW\r\nYpnK5JAtn4BZG+cPMB7hlZ5soZBS6fnvkeG8GJylZa5yQSI+I/X63nwDJCAI\r\nCfYKknP+83qlvL4XqdjmWS6sYArlSYiVd6YxrMph4nAhLpHvfn4JaKIxfjX/\r\n4clEW6PNw9CGUs3RVuLoVOLPCZer4+LEB2lTs5/AI0E4Rod0rswp3vHyFcku\r\n45f7UFM3nc+R6duFMwz6kas/vgAgaw+HoPNUW5Gd4x0cKHLUDkeZWoZPeKdg\r\nljA32qjYMKTh18DtcOrQW/pSvE2/irbY+4P1DmQ8oRPwE5ghVeMMcaLlmWuC\r\nAkzAam9VPuriGzTE/GnW/oZFy8kkoVtdax2wnjPJVhco+a1R+5IsqWYEWm/2\r\n+xGvbtdm5Tel3Fe4BmRq12CevnCPcX033DsXKT7gxWBSdsCEUpjp6IUyHXhE\r\nWr7zqJk315V3qxFIMO4pRnJ7nrgMkAR1uAy2au7lN7C8lgDrLOstv7tw+41M\r\nGC+xtTatQiNtaY6ejC7+bLLHCJ6LFoubprByumYoT5gg2JGTo2HMo1+ULhJn\r\nUwnbN6iGPC0xnORFfBkB/Mz6cqGGG37DsB4=\r\n=+t26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5d01716a4e4556657b2c4ebb469b826660673327","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/rtl":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/shape":"15.0.0-canary.66c5cbb94.0","@material/theme":"15.0.0-canary.66c5cbb94.0","@material/button":"15.0.0-canary.66c5cbb94.0","@material/ripple":"15.0.0-canary.66c5cbb94.0","@material/tokens":"15.0.0-canary.66c5cbb94.0","@material/elevation":"15.0.0-canary.66c5cbb94.0","@material/typography":"15.0.0-canary.66c5cbb94.0","@material/feature-targeting":"15.0.0-canary.66c5cbb94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.66c5cbb94.0_1668540681699_0.19357690117575221","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/banner","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b01136063.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5fe2c93c8a2a1bea5c2467d4e5e8a3524b4104a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b01136063.0.tgz","fileCount":31,"integrity":"sha512-Jbs3+C8L0cmFqRm4NY7lIA/RmSU4eSzH/NHmNZxuVpgu5PFZtdkTrnUNlgsA62+j4ymtQNefYNQMCgIBMboWbA==","signatures":[{"sig":"MEYCIQCoFqfZ4WhV5iIbKca8dGukVQwpCgFCRPqAzE5UBd1pegIhAN8dihPmDV5pxTcJc8Yiypvxx53cGOkriE1tGIr3HQ23","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCv+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq28g//eo8gSUme5KbYdCf0MkRzdfDPhY0LfpR4S7TbE0NNFFWDKY9O\r\nvV69XX6Ivf1s8DC60LR6s9GvEhNAUuVYxZxJLyGHleAZjFS1vDzyOszLrgc/\r\nuVc39/hoBuatghssFiBt16tw79GCU+I8Bp5qXKFQukJi3+ygDTwl3oSQoZg1\r\nHXSl3MBHD99AgR+K4o8MukcbBhByfFO1eSXJgv58MRsXfOi6UV3hzC6uhMGT\r\n4DZquYowOJ2v5Q54IZNV8csooSwWOAlhRHW92yVqrkJH/VDOdxUiLzlzPlSA\r\nCZT8Yg5hpFTMwNFvVg36fRlSKxNo+ZotETebMe8S3q9FkRbTshrkEbhGwm+b\r\nKk5fw6sIqfyQIcgeQnzAHsl2oQosrwoyH22Ey16s/Jrr4dqwRMxatkR0nhB5\r\n5hf0EqJy1mHB+zieIfAhBicpXrSNLFfUgpPjNmAsDHyZRJmq7kAnROwBoboE\r\nRuMXtjNhNlREEUZNXskPsI1kbqAcvlrw2P/KrTgWAhe1PitPba4vsFr7JQ9Q\r\nf2CMtrJx/QHt6nA4m0S5IqbzikLXo2OuJxJI0mKmX9T4nmrQMVyBybbUdxn7\r\n3Gs1XvJQwBS/yTXWNrThkVtOQ/WgXxG0cqNrSwTMG6SuGbTr1mtFU+l3sOwy\r\nzDxsQe5rDWjiyBH6gwKnZzff8WHe6R9/wy0=\r\n=WBtv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"125921cea459cbed7dbe3e1c938761a0cc03a263","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/rtl":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/shape":"15.0.0-canary.b01136063.0","@material/theme":"15.0.0-canary.b01136063.0","@material/button":"15.0.0-canary.b01136063.0","@material/ripple":"15.0.0-canary.b01136063.0","@material/tokens":"15.0.0-canary.b01136063.0","@material/elevation":"15.0.0-canary.b01136063.0","@material/typography":"15.0.0-canary.b01136063.0","@material/feature-targeting":"15.0.0-canary.b01136063.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b01136063.0_1668557822508_0.7319999321334829","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/banner","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.01da0cabb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"be29225efc87e33f7589007b1f2cf2ed95ae2050","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.01da0cabb.0.tgz","fileCount":31,"integrity":"sha512-AHMMhfyt4hLKOfxj0XyuUjWl9Ny1OvX8iSV5PBIR02gv5SR2lqYtO6ttGUiqGtCBYA6I23XLQSyg9eqTVJGH9Q==","signatures":[{"sig":"MEYCIQCeyTXXZKXW38ytH1YzscfZ0AV3maDD/Zf9k9sUtpI2JgIhAIFSTB1Pu3sE24qwN/Qb9sWvokMWB3F8TjVkcK8siOcr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ6g/+JMpi/F/xoYgOZZAcnDVptBF10J+VQX2bjxFg/0UZ+x0wgJf0\r\nqOKF7GDg7UQHd80enmiZT+cjArO8P4CwC9GLWKPAK/aK6rGgeqMzZIFaCWDI\r\n8rrhL5si8BBLbW0cZQsXxkbNVrBe9bmjlSjPy0Zc4L96iOeJpo7gtgRkqna+\r\nteGaLHfAQr6npqF6gf/r680m1RJZtOLXMRB21rnSf4p/6KtOnQkREUPW50jo\r\nMLsCryY7b4x3U5WVv0bjL/J6a7q/cQ39If2kXWQhaOJR1fvQYtiDS4i8nKkM\r\n46SJrPSWcv+bfac9zIEh9LmGq5jWZW4IL84QO149+dDl2pSjm0PS5KY9uMc3\r\nxfb8ELd7Ms2GK7+g0WO/BQqwYlo8ch6mP6VITlkpSHUTEsXRF8/D5Rkrkk6C\r\n8VISl6dNp9G/gPCKc9s8MJ2EhzrYJASexFJxlzofkWk/9CfBxyHRFc/U2CKD\r\nn3dKD21AC2WrJm5fr6gqATJYpmKo6EGuUN8vgYfP3mlS4KzWU4EoEboGQ6pT\r\nOHximn2759qvp473zJM65l1FQ6Nep0KdMaQqad55hY5gSpNYmTDzFOXh9DPD\r\nQNmx7aSjPZi/m22zo0sM4eR+j4pZlsiNGm7gf8T6NF53akEQdLNeE36EqiZB\r\n6CvYIvuM60sMhF9CU2Cucd1R5ktRt2gcfpw=\r\n=l8q5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"63a5ccdac9b23a6c70c2bc776e20ab703cd1dbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/rtl":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/shape":"15.0.0-canary.01da0cabb.0","@material/theme":"15.0.0-canary.01da0cabb.0","@material/button":"15.0.0-canary.01da0cabb.0","@material/ripple":"15.0.0-canary.01da0cabb.0","@material/tokens":"15.0.0-canary.01da0cabb.0","@material/elevation":"15.0.0-canary.01da0cabb.0","@material/typography":"15.0.0-canary.01da0cabb.0","@material/feature-targeting":"15.0.0-canary.01da0cabb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.01da0cabb.0_1668590067328_0.09324283842599868","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/banner","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4ac393164.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"936d4f6ba328c21953b9d2b094ddbc47b7b4bb4c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4ac393164.0.tgz","fileCount":31,"integrity":"sha512-69aKQe7Bz8CvYVXgyicofUpV18ZxXk9yzXUDmsLCiSlsZRW+D3nUXHZDrTqDMa+B1dTjIbPJpuDGrcNda9fJvQ==","signatures":[{"sig":"MEYCIQDo5tIx5WlHh9B3bU673bPV68ilN7lkIR8IPTKnSyZASgIhAK1Xzq9NzKQi9iqQcIAoT9Sst3nW3YHB42cEVgBunXu4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQztACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxHA/+NSfZTMmXuKRpq6+E3mpu2nlCmmNWkMahImjQk7uVD4VKXY6B\r\nxmA8ahSUiEtXJs/NcrpZ361VJRy9PTPz54ycY6LcENOS8eCnnO9w5A4ZoaGI\r\ngGNxS6Gc+Cnj+sH0/kA/qecDwyXz5Mfc9xO2LdKWEwz/ZGdYr9xCjQbDRmk5\r\nNIC11fQTnlb4mc9o0SQNn/x5Wz11RIr1SLk3aPAMWHMIFHNssCZGFYzqr4mQ\r\n+c6IZuQOam+Kh0Nyv6kLy0ymw4FrsIZ1sPdGyhs9fEb0GjeXLLu20FKZpiok\r\nUFTGfd02ipYjANVZAUKGH02QTFrBHvrDzdWGrwHDddD/lBUJrPd9b4R2Q/tS\r\nJd1TGQsirvMEMAhOTzCeKRmaonGvaCsx75u1NciWrVC6zXVuT3PxjaX66mDg\r\nVFBreGLXti4XgaWBpce1Ge7RScD5VwUDMhwUzXhhk6DZbZSQ8p2HwbCTSvN1\r\nq/lXFWjiMHH/uPH1+SKraMWNvx4N+3Sc/dYUsZ6yq719zKtX8kkuXdZnWw35\r\nr7IPSNQXK4PKoAF83oyROP4Z9qDR0mm6cnneQSoJ/nNKaLq4XLG8HijpGiut\r\n0q8lVfpht9wSj2SZ4+xrWQ3NyJg1c9HvD1h7pC/Z4xCrZQMHn2JytN1lxc/5\r\nfTTPZ5wym6vVMuFqgDoCxYK4Z7ModBTgK9s=\r\n=zDMZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f14d3444d266ac4c6c92142c377275be3fbc5d0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/rtl":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/shape":"15.0.0-canary.4ac393164.0","@material/theme":"15.0.0-canary.4ac393164.0","@material/button":"15.0.0-canary.4ac393164.0","@material/ripple":"15.0.0-canary.4ac393164.0","@material/tokens":"15.0.0-canary.4ac393164.0","@material/elevation":"15.0.0-canary.4ac393164.0","@material/typography":"15.0.0-canary.4ac393164.0","@material/feature-targeting":"15.0.0-canary.4ac393164.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4ac393164.0_1668615405292_0.46054257866863435","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/banner","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6048fb563.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d46e2678925109d6966eaa3c65d0917f31f1b266","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6048fb563.0.tgz","fileCount":31,"integrity":"sha512-klh8zrRXa7XiE63Om4EQZjlZm9F5uiGBfjByOALQixr3CJB8++dofd4cfO8GQvvbAPUw7BYmM3NynuIt5yqa8A==","signatures":[{"sig":"MEYCIQC9H4fJF7Koe40PcEZX+/8nDKFYU0D3uAsEYstNyZwk8QIhAK1Z+HXR6lMhGyuc+b9WOqHmvjRGKPL6nbb6Ms/JfaQU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ1yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+rQ/+MlNbDrq20Qj4u6dxzO1NbIgQ9PLEmco9Eukv09hnvWPkQWcb\r\nKxNfu0LfSVVVch4vGRUN8RxUqXB/mB1SJ2ahSerR+CYfRZEl1cMEiRlfuexT\r\nvIuuhVpKko1kWW5qi9T1swNPELe6ROn5Ddhz+QF9fA1At+I2evc6IDXIDJKa\r\nIuHYT+XHq6hDCdzMEG58AKSRwS6Wd6uWe8SHuykQIbJmaZqe6U6Mi2CZ3Cib\r\njKmEJvjdYMWNKE7uEauH883jCO5lbKa/ZwodYhhbk34mkSBl3Nh4xeW8Mnxw\r\nPG55HybnjFdPRXB43Rxzzoxks3M79kLCiUpWs+onwHfUoYUqiKgtV2Rm/aqv\r\nVYyOPvEiKqt+MW5M1Ng001dhzd8oYkmMLeD1Jta5krFJ5xadbvurmy0itlvW\r\n04LL1Iav0W0NQdiyVF4dNOcFbC6t8iDt322Xlh48b4feaKSYLUEucnc1w3xu\r\nPLcN+nPByFnYrrT8HJUPICVhVKqv7mnjxeSI5nqOq2tDk1GwkZTulIOjJT/f\r\nUDNdmYTSHlvYVgaggNSEjIzhwd6LMvzeYFVFYLPVx5Gb1nnBdf7CNCnJfZbA\r\neQLGoMJTAsadNccf4K0Hi3TItc6Dnm9HNJQCSptrTF7rCGScpF9DiUPyEU75\r\nwLKaatr+1JZV6+sO2JdlTpNevaQlDjeE2wE=\r\n=kCmm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"590020431978794ff2128a91f19756dff9dbc37b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/rtl":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/shape":"15.0.0-canary.6048fb563.0","@material/theme":"15.0.0-canary.6048fb563.0","@material/button":"15.0.0-canary.6048fb563.0","@material/ripple":"15.0.0-canary.6048fb563.0","@material/tokens":"15.0.0-canary.6048fb563.0","@material/elevation":"15.0.0-canary.6048fb563.0","@material/typography":"15.0.0-canary.6048fb563.0","@material/feature-targeting":"15.0.0-canary.6048fb563.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6048fb563.0_1668615537865_0.4314757466985564","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/banner","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f7f56fff7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f29df279f8db1cad35066e24a7ed68ddfe7e957","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f7f56fff7.0.tgz","fileCount":31,"integrity":"sha512-0vRhuU2Zxz2L3JqtWUNzqpbfhelfwBhoU8NLkhgsoMdbegUuHADCKxONEBw+2gMSqrzUYiUa8FGjgOxqTjRi8Q==","signatures":[{"sig":"MEUCIB8MFREpVOGGkJsfw4A6tEjFMakeKm+tgMWnKeEA8VIBAiEAjlhru6DC4dOtr9HPXT16IHrLaFkdBGhTFcuWwBPyw1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUCVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGaQ/7BTeHLhx7zUe8QAaTufXT3H5vfeoK5pUuupY0E+/oJFUg2sxt\r\nL134dSeGHW2sw7YfErS6r1qVp3IpYsMKzASE7/k4BsOQmEBJHnjSbUhrMQWP\r\nVjmULhO+c0EALri2nRFflOLvRI6H/jVomQi60bsZECqjdEiR5b/v8TduUeMA\r\n92xQQcNOzKgyRHWK6fbd0tBMPKhEmpTHmSm1y64XoNwmPWw+zqIhRkSikmkR\r\nY2H7FSzHH8a9TwHrfZJVMC/BOYas7IUkqoV0vdmWbbOAkeDktV8grSGkOnV4\r\nHG5QTIeUEsgUe0fIbWh3Syp5Z5ZnDJmI+F2cPUSBodO6niHLBuMwhyE3N97T\r\n/H92/+uD1P9pu+88ygVEAMxzEa3BmYAF6xRQXvpExOte5LR1Sc8zWEWJ1UQ3\r\nCLnoLbP/A3CuE0t9gbUuNhFiWsQfH3TUvly3uN81qo8iOQKCrdLeDvzHakR1\r\nq5W2q1btMs8qdaNGbB+D8+kx7Jybj38L6wT+h9yWZy+L1C2AQkmLIin3EhRX\r\nPyi5Qp5Abnw3huYlATRssZzDHuN7NbLONsU/cn6x92kuJvgufw1KVTx/NnLj\r\nbFZJUUZ2QypuKVI/3gWIgikhI2A61LnhbOt0JESTLGzwYOHexrRl4dJVpFD9\r\nwNYV6i9wkMrBNPKO4NuwPD5DPqIjO7QLqtc=\r\n=b+hc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bc90613e754d04f738197ec3f3f4602e9b362d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/rtl":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/shape":"15.0.0-canary.f7f56fff7.0","@material/theme":"15.0.0-canary.f7f56fff7.0","@material/button":"15.0.0-canary.f7f56fff7.0","@material/ripple":"15.0.0-canary.f7f56fff7.0","@material/tokens":"15.0.0-canary.f7f56fff7.0","@material/elevation":"15.0.0-canary.f7f56fff7.0","@material/typography":"15.0.0-canary.f7f56fff7.0","@material/feature-targeting":"15.0.0-canary.f7f56fff7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f7f56fff7.0_1668628629562_0.7470230475354109","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/banner","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7c73f6134.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4fda44b5b9a5f6aefd02357b992b9d8b59323d1e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7c73f6134.0.tgz","fileCount":31,"integrity":"sha512-HLTHnLN/cZ9BAH7OWedIohj1wRCgrdgbrHtAnoq2E//OkC19WW7gP52tYyB5EuBF6tou5y4HrtsRG3MaSHXLpw==","signatures":[{"sig":"MEUCIFbBRkhcx6Dd1QCPiTFTyGPiFTqYBvfB2dEfTQeHxciCAiEAkDj5FUtfMMFQHI4bKlj9chNT9FZ9/1T+/9234/82igY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUGgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6nBAAnAZp4OiQPntocLFllHmfdh/r3/zWLDXwWaSkk+HqF2jpnH7D\r\nBtwcckoMKFc9C6lzC5iVzGs7g5Uy0eREhCvN0nBhxf+VRWReETuJCVnykigQ\r\nMaIPNzwupz3ytcriB+7WBEhPGy+e9FeDgoA2GVGVRP4X9vePElPiwCofwG+6\r\nu1eLg/MTZ0sLaO2NPAFy3YVbCC1OfCwRTQp00XVlS/Ld7OcN/DMVJsBxypdZ\r\nSj/KHSfMU+ESMkMHmUiuZs6ejQaDjAn36fG3CQ6nKdE47dd33jB/a/CDmSzj\r\nYRX5qFehbEXZTHyTE2IMaeTdIN127a3aIVlqoJb94Oxx11k/qOOhSnIU5xY1\r\n9KlWMuHtQq2i/pSb1BVa5fFY2YQyA/IA7zAXJ0PpqVgzN2I/Z/uE9WNJQQNl\r\n663T3zcNbm/wRTKck5XU/ESVxgVmeBAXlwunCkxy4WYCCuMzAePrY1Fe68os\r\n5+3O2N/Q4CCUW9Jsc7+8QShVxYhWIr86Jmd6vJZuU5nU8L8aHcDtQSxaQJJ4\r\nE5fkHmmGhfxUf6jKlCaneLvxH0lr6BdjJ+Txnm45zzThOeVHDL9p/xza/0ZI\r\nsZJYoSYxNnOmmDPhigFDVe6S+HGAWQ33RPOgekHlPTB0Bw44xsokfynevlYR\r\noNLh22NCUcbvDPxC/8mFCAn04y1FS3Gy774=\r\n=Qcns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"14f53e565ed77defe907254a486b9ecce4b45146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/rtl":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/shape":"15.0.0-canary.7c73f6134.0","@material/theme":"15.0.0-canary.7c73f6134.0","@material/button":"15.0.0-canary.7c73f6134.0","@material/ripple":"15.0.0-canary.7c73f6134.0","@material/tokens":"15.0.0-canary.7c73f6134.0","@material/elevation":"15.0.0-canary.7c73f6134.0","@material/typography":"15.0.0-canary.7c73f6134.0","@material/feature-targeting":"15.0.0-canary.7c73f6134.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7c73f6134.0_1668628896199_0.8641886862738233","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/banner","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f1e037150.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9097c65e670e33880bdc49c0432d749dcc243e2d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f1e037150.0.tgz","fileCount":31,"integrity":"sha512-m4x5+sWO6O4TZvm5rL2WEm6V16Fg0jnAFkisM6AJZNCZAJ9Px2CjXL+T4yS7BNCOI8Q6h+bZWIEEWVDwAyVJEQ==","signatures":[{"sig":"MEQCID0mupFzazY+zN7zAYIT8fA7RftbMs/f46k9q5bNIluvAiA8JMUIB+YoiPZRcFIUPoKd930tOaexwzwuwcCZ8ihcGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdULKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1URAAlqL+JHy+FALQWM/DWdK6nuukxeKf7eDAEViwpb8wiEfUsGXp\r\nMYf0esq317/SvJix1owuNRoJbYSh67lU1IaPuBkC2nuvAlj02FROd5IQv8Yf\r\nNpV9iEkTRE/Rd0NCV19XRV5zqgxjEx1EjRbY5gf9uL4EMmuRyQZih0OH5imF\r\nhI3THp4uvtdfXv3iVFHCBLoVGOQyoOZ7uKV7yvbxKyEwnc7jklJi0q9FRMtT\r\nlGqcg1QwH2KEC2lrQEw/2ZaRsLjtSVjrt1uiP88pdIGZpFbMFmXvuM5bDYVc\r\nWlC28kwy6h3JbRd6rL4rN/ZrVHjY7Kb9nuvPMD/cFgHjcWcPKTb9VIxU/Z4T\r\ncTESZxP67PQMBJrCe6wp4QYmH+nTNEzvwr1tXy0DJ0jjsncXuuEhq7u9WWjw\r\nPq4PFzoy6KkVuaWE4wLof92k0BzyI0pNlntH8imCvcXjo0zmi8eT8ccCkWiF\r\nE4hBv7Ge+j2PteO1NpOvyPfHsg4mBN4giQ58mdSsoT0VqljW1izZty8LslYa\r\nXeJHydSSFOt6cBDUE1+mZ6Ucoh7TTjcB3+OgYvFxG9G82CR/B/q6SL1aIJJr\r\nW8ODY8ZpGHvmwW+ZzCMJr9f48qVeDUa9z1A/Uen+fIb3qP1bcG+c5aZ/Wc54\r\nqTb8Cdjfc38UniCq3AhIR1oDVSar0qH5iBk=\r\n=FP5L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a639195febefa28bbed957ef46942b3da6a4cecb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/rtl":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/shape":"15.0.0-canary.f1e037150.0","@material/theme":"15.0.0-canary.f1e037150.0","@material/button":"15.0.0-canary.f1e037150.0","@material/ripple":"15.0.0-canary.f1e037150.0","@material/tokens":"15.0.0-canary.f1e037150.0","@material/elevation":"15.0.0-canary.f1e037150.0","@material/typography":"15.0.0-canary.f1e037150.0","@material/feature-targeting":"15.0.0-canary.f1e037150.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f1e037150.0_1668629194361_0.7223463396605929","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/banner","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.40b18d043.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c833e16b50486517dbf27608ea53f352fed02d2b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.40b18d043.0.tgz","fileCount":31,"integrity":"sha512-luxa6oIJniJdKf0L55CyE/paM/BYI5Apc9+xwVrDwVS5CYTyn+McJxDSYwUpCbWg7yThGVnzq193Has9sBxcoA==","signatures":[{"sig":"MEQCIHsCREIlzcWmfTX6YSg1h5HiXs0UitDIUhLk1KcLFowOAiAfmXKKFkX9rvE8PRctTLf9+M3xQa2KpW7aQruB86WJvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWtuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5HQ//b6417eFXGjN6RAblCpMKMZ5DsBIWewg6cS2J8izt61KkAPUx\r\nXqqWvOW1tGpn3ckgPdhf3//r9XxwrglRqv97Id4zMQvfhDYb2orDmzNCppo5\r\nkHBKbS143Ati1EWbRfxb4qCzXIgaSQgjZIS4/t9J7PzPtKxQel+gIbFI8Nj9\r\nicy9tq46CPHzGKNoipgNBhNQH3WapjusySFdQ4msCi2p9u6v8gNHPJgbFklk\r\nTfiTaqNjJJbfwO8aDwWIMeX5B87OzQc/NbuwJHhs0o7UfyfFQOz+JH93xZ2Y\r\nvKXYCk4tGiB5pnL+9XkubMC1aPfDj1LhrEpm/ekZwPdm/+RARIlR32NQOJd8\r\nje22A1gtw78wBuq0C12vDYPuz1I0g3w/74HYTUCHvyghDwl/DkUotXAvUB0U\r\ngky1QQTEJPNoStrLxtMYHBEN0pwrY7Lq9vTypW/x+e87dK8/lZWcL8lmj/Wg\r\nsq9enl04NC//+cL1G+nkaCFCsFPvPqeDdf+jM3VNYknyW2UglwgLmyXWtkAZ\r\n8QWBgaZ6xviXYvrOLxvUGc/MObbKdakoBdXlX+TLiRiT0Dw6je3soGz7nf7D\r\nCu9lR+K2e0Fa4DYLR/oZh55E/ZpYTFPqJB83jb+BZELQtkRK+WA5twk0pkyp\r\ncLWiAFekuClk9SFpmhbTgPyDJUOQ8Cx0ELc=\r\n=slQz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9ccfc97518c89cfcc2b5e776dafe81024d137f31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/rtl":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/shape":"15.0.0-canary.40b18d043.0","@material/theme":"15.0.0-canary.40b18d043.0","@material/button":"15.0.0-canary.40b18d043.0","@material/ripple":"15.0.0-canary.40b18d043.0","@material/tokens":"15.0.0-canary.40b18d043.0","@material/elevation":"15.0.0-canary.40b18d043.0","@material/typography":"15.0.0-canary.40b18d043.0","@material/feature-targeting":"15.0.0-canary.40b18d043.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.40b18d043.0_1668639598187_0.755874324662333","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/banner","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.86bde5c06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"47799d530007f7b7598a67e028c2567415d2fe75","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.86bde5c06.0.tgz","fileCount":31,"integrity":"sha512-kuVc7o3KfYrbzBG2Orw+GDhZeA63Xl9+NmQSGORw1SegYgxdHKN7XI6YvhXj/G/vVx+UU+higO4Nm9kpIt3dng==","signatures":[{"sig":"MEYCIQDVM3k2FSe87CBS9PBqr44qBuYCnIZwLGiQpor5WKjEagIhAItsRlRW3572w06hp9XFf94Nvgi2eU7KWgXYbgrj/JGE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW3PACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqiiRAAhY1KpcgcPDm7xeGF+DL0/vukEQCdB1X/fLmt+DgS/mzynTAc\r\nfvdK1QjEsCszsB5CKQwlw11w2LI5rZbPPewznyVY6Arsm/c6HNegN7KswIEc\r\nQrUayhaxDD9oXvhcxIhi7eWd7ZdZoWfS79WIgOhKVVGtvdLDzuCUZc4BLyPG\r\n88mdJuHhOhfUCtnY/ckSL4Klm1zibGAZvCSz0T5D53vDSILNO/XSayUgv/l9\r\nCJ2PVlWvBoiJsMc7stjDXovJmzblToNVLTgpL6dCB9sLTi3VA3kZIgY62arJ\r\nWz6lQYevRD2p2mHoAKDfzNgJtgfkU9A1HSyHK9NSUUZSpQLbYE97m8oIDiVC\r\nqfMzzgvoUWEoeff+Ap0zW4kf2NLtEg33UAgvzjINIY6TiKgf/GXvLEUFfvHF\r\nL3zH8W76rnMK6RatCnWanr+1QYN73yKPgeW4Z6uVq7BzeWawD/OKEBTcW9Am\r\nZKyHbvWunzlBhhYFoYcfBtpIFFP4yDEdQJNHQ7hr876clSOMmAqEVLxAMMxO\r\njU9y6ifU9VSRNWm9y1u9mgDZ7jLw+xGu+WzpqKofsUe8zmASY3e8PWwwD9D8\r\n5LdAVBxnQe0/SDL87oU91ANRAn3ymCNNwAHosw5OaOxmGt9pxZeAAUzqSOdw\r\n1EU7KtlUfx01oI2EtoGWB/j2ZOzVHy6kCPU=\r\n=a+CM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b9cd39d4936a1961536e39eb1df855c5164d5840","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/rtl":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/shape":"15.0.0-canary.86bde5c06.0","@material/theme":"15.0.0-canary.86bde5c06.0","@material/button":"15.0.0-canary.86bde5c06.0","@material/ripple":"15.0.0-canary.86bde5c06.0","@material/tokens":"15.0.0-canary.86bde5c06.0","@material/elevation":"15.0.0-canary.86bde5c06.0","@material/typography":"15.0.0-canary.86bde5c06.0","@material/feature-targeting":"15.0.0-canary.86bde5c06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.86bde5c06.0_1668640207452_0.26818065397658053","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/banner","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.bb7751002.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ef7155fd8e90cf17dd5980d00246a29266b4b52","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.bb7751002.0.tgz","fileCount":31,"integrity":"sha512-KK0GffiYTEto5doaxGVhzek0dMJHyMvhg5y7K/5aPD8ee2Yxl/Jk4iDrATsCT2ROFkdDDTA6m9GpdtpZPmPt/w==","signatures":[{"sig":"MEQCIHWUf7LDK2FSZots5slSTzeQsDM5oPaOPBvW5YKRaG+gAiA8c3Cr3M+3S4IbXOYs+sphQc3wUXemu8g6jWm1wTtV/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXnQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1dw//V1SQN4ogjaFD9/Qc5UC+ff4UEif9Z/9RhylI2Tt/oUybkvCa\r\nAqquQH+RHZ3cUm0Hi5D3Td0VhfNSbAKyM06YZVk8nI+/a3Byv7U0sttNSLtz\r\n1k1mdk1Dv5FBHWWgTxp8LZPUM2VVHQKPZ/IeZPOwhssTAfv/DG5DnHdO84Mk\r\nnPm8iPs3RvVzzxtgv+HT/QcyTF/Z8tt92fiFOFeB7vET+h2zrEGjSVAIrcPn\r\nkRP0aOycP/kowT5w7K/KltgcpMJFrAHnwQb51fE8CcLoGo6TciAIRfC/v812\r\nqt30HCMTh6uBeRIVNiLzbLjSmAPCrtT3LuH9YCduDN8wbS6BqHq9PIFXoZE4\r\nFgZ6yI92vV+wM7hyN3MUK5snHbEOSqp0/Vk8slrJMbIMXdZ4EKlC2oAblbXu\r\nbl3rJdK6jBckSL+IAH6HKAsYhfbq3dlJ6pLy4p89e8d2Jw+QFxgfd3FvY+C8\r\n+oewLK5yPghRRds0nc+AwubC+qhEAFKRXUGlJ+PdnMC10RI3Pl74aGXpBDiO\r\n9LiJdno1jc2HUmv0/IPdIetD1+P4l4uacaPtTsfBa3OTTCU8FEMyFV8DNzGP\r\nHA2H9Q4MG0ZRVmOrQeEbOd6752lyqDmkbYx1jAQRhki3V680ht+hOJNWjj/P\r\nLv5kc23hoRncE+0pqhsphCu5B5PlV+tFoV4=\r\n=7n36\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f83cadc3a1330a69930926dacdce7fdf10432f98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/rtl":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/shape":"15.0.0-canary.bb7751002.0","@material/theme":"15.0.0-canary.bb7751002.0","@material/button":"15.0.0-canary.bb7751002.0","@material/ripple":"15.0.0-canary.bb7751002.0","@material/tokens":"15.0.0-canary.bb7751002.0","@material/elevation":"15.0.0-canary.bb7751002.0","@material/typography":"15.0.0-canary.bb7751002.0","@material/feature-targeting":"15.0.0-canary.bb7751002.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.bb7751002.0_1668643280593_0.1338836537188688","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/banner","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.63aca9af6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"956d90712efdeb8cb8747d2cff4530fcabfd02a4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.63aca9af6.0.tgz","fileCount":31,"integrity":"sha512-u3OwszK5pbDPwcwBjbem94qFcHBjTrxwUyO+d8BTj2QOSCKAbwYTo78tsOdorb6e1MBbzYPVSEeDGjlmgq/77w==","signatures":[{"sig":"MEYCIQCPMn8snWQEe2LfgQN5RxeEt1EyDYKQ6xCN92BXCOLmawIhAJznQe/eEK34XCBxZBlt6FTKpwF7A+dbbHVVMeywbNfu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoVWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqROA/9HMkLRAg8yW+CQSZ2hqtufT+JuYM1N5t5T4gkgQxqduxYX9gM\r\nqrS7/8HF/rvVZOSxFVQal94b7t3jbci9hNVL+jLrBq3RkHg3in62vs4imHKi\r\nO+HIsylA8MOYS1cxOzn8XdEVzp3AfTxcHh7TYc9iL8AnwDqVSXmnATnrj4Yq\r\nogoj8mRMaAmigIGoVxVvuO2DanRC+ELo9oyq+4xiERCeHffTCnQ48l+4S/FJ\r\nu0xAC02nMBr5AHxz6k2imHItuT6PuE3rx17t1HQPZxyZTvLxpyZ2jpzAummT\r\nVJCzwGHuGCRHuH0I21rfWz87JB1veI02Y+2PuM/YfTtNctvTnm+7m8rj2Xwh\r\n5breSYlTVAuysEGAaMXq/sx94spV1OalXWTUCjS/xAUXlV4Wk5Ld3w52ulND\r\nXc08W+VSps55zQsUQysTE0cLC7R/Xz0yqyNopHLd/NYM3+x1NmzdsEyv26W2\r\n6ug9FhlA9kZyukPNoY1nOXL8IDMCG3svfByszJ8id8RfU0+un1MPweDp/8Dv\r\n9ACK1IK18pWD3e0ycImD3w91WItEKT7EoiqnLqA56SStME9n/wFQS/U/VVxS\r\nEf25hXB2t3HLcxg90rcE09Fw8Mj+W6Qt+Mszq2Riz+iQHKWzX166ZDMP8RQc\r\nN52xwini/SFQAJOVSxYZl464ICgi650s11c=\r\n=neAX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c2c841973403116b6a405bb9aad3ae8476bc028f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/rtl":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/shape":"15.0.0-canary.63aca9af6.0","@material/theme":"15.0.0-canary.63aca9af6.0","@material/button":"15.0.0-canary.63aca9af6.0","@material/ripple":"15.0.0-canary.63aca9af6.0","@material/tokens":"15.0.0-canary.63aca9af6.0","@material/elevation":"15.0.0-canary.63aca9af6.0","@material/typography":"15.0.0-canary.63aca9af6.0","@material/feature-targeting":"15.0.0-canary.63aca9af6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.63aca9af6.0_1668711766004_0.5215701071963652","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/banner","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.56482dc2e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88cfa2a3cdf78e261f418e37f503ec5cec24604f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.56482dc2e.0.tgz","fileCount":31,"integrity":"sha512-kR1UWAIr8p2s7tVODI0+wCYPASDguvvki786Hn/QFzzkUQVqt3spjuNZIQhF3CbQ18vynPXIaJwmTqvOBX0S3w==","signatures":[{"sig":"MEUCIG9vXQjwsGUqwryBlrMaFLHkVkY9nwdtxuJqCy3hRtQZAiEA2UVUOU6TZnp3FF92nvt+XSBMHGTtST4/PFjrAFgZZDI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq4SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRRg//Rj+4ziXN8jvaRzCQFZjCx+o/K4Wf9G551WRVvSDUBnrbLIPH\r\nvAir9BWarhutFXkScQhJ2uZc+g02wwSm7zAE7pLJZ1aL+xRvn6cJs19FGIZ/\r\nWbKjGy/Z/H8dxlBiytlYD88pqhLyo5/dbRzwG3to7Vts7O5KeJEyLpPlGTUX\r\nNtIDYHhBvg3ZuHq6bRFhdoh8WZIFuAeTgODjTLnDgJu97sK47XHnq/AyPf7v\r\n87Sdumt+lW1/BACcovKJOwcfEih26eFgIO15L+Khxl2qz0vg3LMQWHjNZeiN\r\nBsh+8+O3kIZ4hh8p4eU7bP0yqk/NOfEozJTksG/9cQpiQRMuM0Bz/58bbxLS\r\ndyVhe4EE2di15MY/IFDQRzZ5NBAH+xTdZaq7L7Pi0Nw2k/yNsjMJ6ewJWIoe\r\n26YLRB35MD/M4GERWlX/KYKlfHWAXph4uDEUO/dc8X3UhTvUZP5yFk9U8A7+\r\n/RhXL5RwKsI+Q+u7sUQbT83t2SexrI86mtHONu9JT8GsVYrenncTdMC1WVd6\r\nDkvT7V3J2sTPGZpIGvDr8nKsRvmilEv8n8kuiXAtA9jFG0kAIG6XkpTsYOWf\r\nGmaKTfmMbFzWcK6j1+XNjAXVKShSnSaTu3ITCrYMNVTasR+J5lKRH7eUzw94\r\nK59ige3qJZwmxnMwuHRbuq7LLjYT7M5LeiE=\r\n=664G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c65945fd8948c8e5ada035d0f2538dc2ced7a28f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/rtl":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/shape":"15.0.0-canary.56482dc2e.0","@material/theme":"15.0.0-canary.56482dc2e.0","@material/button":"15.0.0-canary.56482dc2e.0","@material/ripple":"15.0.0-canary.56482dc2e.0","@material/tokens":"15.0.0-canary.56482dc2e.0","@material/elevation":"15.0.0-canary.56482dc2e.0","@material/typography":"15.0.0-canary.56482dc2e.0","@material/feature-targeting":"15.0.0-canary.56482dc2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.56482dc2e.0_1668722194723_0.9511790206195283","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/banner","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.953e689f3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c4625a8f87c12d4278a9d8b148f866334d4c183","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.953e689f3.0.tgz","fileCount":31,"integrity":"sha512-n/AscW+HNPK0QzHDwH7i5pGBBHDMzHGTP/J5OnyDtonj93BId3jWLfQvCSVWmN9CeBbnl7SU6Lxm2ygwIhoKAw==","signatures":[{"sig":"MEQCIC9mzt6gRSHqeh/EYT/uoW0WIASr4NGxySIBQNRicdGAAiAbSxymjCFfUN0NppPOxOuOgfoNrPjWgrCK0D93V6e1zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrA/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrnrg/+J/YFf8K5eOFUxtQ82G+/ahWSFEPVDeGyHoLBzECBIea8w67G\r\nBkkCliO/QSSmZRXuy6A53ZpL1YSM72Rswv0JTroq/NhE/fAkMudt4pXQUQff\r\njqwb7qfWVUurMwm7UjeKGjb4n4+NCsV8CqCTUz81i3syiD6vNQWEFLxawizV\r\nWPPxn0+YnAdIBeLJtlOWwmK+Nl8dVIW8I6ciqahUGvgFi7e/5ZKKnaa0esoX\r\nE3AfgTE28q39/+/4CYA3TNt16j1esvO20BXLyVb29w21//GtJ/6gtibSGOLV\r\nmaGjdoVrFcBOWF2hDjiBq5Ofz3wqLAeYaz70F9WGNUgeO7wdVpN3bJccyEZh\r\nhfKpyGjzNsOJAteszBhlyv3rXSOvv2/uv8A+mETHr25veg4B1kl6liLMfYaS\r\nt2B/q3TTdAks+jthqn4XYM6yiDUIgvKmZMVlw0O4uzTnF7cAKtCZ4+XYySWa\r\n7y2sL68/KnEU3MPQGNrN3Mf66inHQ5neiiRc51Lhyp7zMRTpmwmnCz2dtVBt\r\nFMlpT7mT3uoAmLCi4caXdwl6AqZ976DvAYwNHbusOhXKpNGZjEZTkQzXdA1H\r\nPhbhyOESlBn51fo1BWVu1/Bc6FGYj7asnapAC0Rp9sqf8wdZ769Nv88q5oJz\r\nFNILEhB2w1KtcpR7Q0lgNbg5kXxhfREvC7Q=\r\n=Mwfi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9b9adee0b4f10a2d6d77fc10e9291c3aac8be42c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/rtl":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/shape":"15.0.0-canary.953e689f3.0","@material/theme":"15.0.0-canary.953e689f3.0","@material/button":"15.0.0-canary.953e689f3.0","@material/ripple":"15.0.0-canary.953e689f3.0","@material/tokens":"15.0.0-canary.953e689f3.0","@material/elevation":"15.0.0-canary.953e689f3.0","@material/typography":"15.0.0-canary.953e689f3.0","@material/feature-targeting":"15.0.0-canary.953e689f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.953e689f3.0_1668722750952_0.07020369236861157","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/banner","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b5606a793.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77c7dac7e85ac77d3d785a5228cc0dccdcbc4f99","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b5606a793.0.tgz","fileCount":31,"integrity":"sha512-x0tHLBCJxgFGlmAYFjnImW4MgrHoyrmq9dB4+guiEZvmZx7vwDvIK0SiFm8pniSYRe5hnmVgaN6uAeeaZiNGAA==","signatures":[{"sig":"MEUCICwjGj7IQ4c875nwQ/T/aySk9OCpOmfJ3Z6HWeMOy/tgAiEA+OO9UUiB8f/5yzUWHF3L8Na0as3ixvRepqGoJSJEtUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd1zZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwSA//Zd2rg046zcCeODhdG2Q1u6jG5cFQngGz0P32z187uFl0i1Eg\r\nTcGLg9G7YlzzCivss1Fz9TXs6ncGSUmqJahP4thFGrxaB4SGNUfv1qX6j4eI\r\n5B6Qy2mPd/NUB6oU2yqje6uZaiEXcu2TJ15kZWL8ovkl49owTExwckGHlZI/\r\nbgQOypscsLmqnebu8cA/YnK/zJ/kd463DvGmYit2hBITHGoKCoAxx7M6L2RE\r\nIc54ZINFcHo1KIxoacGZdM73B4oSLnIH5qFrhQ8eyvcT9QtaV/rPvZpo5haP\r\nhMn2S5Ap1Yy5R7aF65sYxx7UgknVCpJHite5gclN5q0w7n+cDE4qXxu4JC5z\r\nkuz464CgzGmKTG89Lzkg0QLDrP2kLv2gOan2Bf0kvwWm0yTj4v0Y5MTEjEfo\r\nVVEWfcOwshJ+BgWwguXamEg01rHEM3loVrSiWdmg/e3MJl5g3wq7iNLaIKLY\r\nVC0d1L9++WCoFxhAX8SxYeDtaU5bq7MjUKvKU4Ci2Lv5bhE3225xfjTsbmxm\r\n3LGDz0M+3qlRFJIigIiuknehWva2K2NwmIkawoKSMHfwoZG7vFRmFxIp7OGB\r\n1zIgOVV9qamjIgQyI6Jl5ADrw3M7BNkc3OsiExJNkcZK/7EUZqXYcDEla/X3\r\nFhyA1IB9076wGEOuymyt5GDT7uFu5/ue4+o=\r\n=Vf+M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"681685532cfc9993a6190aedd85bf5cd1b3f80e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/rtl":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/shape":"15.0.0-canary.b5606a793.0","@material/theme":"15.0.0-canary.b5606a793.0","@material/button":"15.0.0-canary.b5606a793.0","@material/ripple":"15.0.0-canary.b5606a793.0","@material/tokens":"15.0.0-canary.b5606a793.0","@material/elevation":"15.0.0-canary.b5606a793.0","@material/typography":"15.0.0-canary.b5606a793.0","@material/feature-targeting":"15.0.0-canary.b5606a793.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b5606a793.0_1668766937156_0.7252545865585218","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/banner","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8c5675942.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3de3176dd963c6cc597495123c7d3ab271303aa","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8c5675942.0.tgz","fileCount":31,"integrity":"sha512-ykADQiJbna25F39bdn4GOEdrvvjGUH7BmCra7wQ+VCvTSyRm7MO31Sbg3FJ49xEPKxz6tcNQFlN9ZSn93vB+BQ==","signatures":[{"sig":"MEYCIQCeZarjbB9b4BJuT7oAZXFiB4JrfSuBrqioaNob2eeFiQIhAOXLoOe+pzf8VYaqMctn20L9Rwi/PQED9HN1kovwFneU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6IKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrG4xAAggwyU64FO9j5gqme1rciStgr+6ttkFSkgx/1HJ965biWN+Kr\r\nIDQpr+IgeBYc7uE2VWYo1UC5z6HJ0tCBW/Cu83XT6n8NY9jzbQ6F+Tc7Uqyi\r\nw79pCpE1S6RFryYHF1prNMedFesrQZlOp+7w0JH1jgXbBdHUyjL5zKgTe1g2\r\nvI2mFqUCLoV0SHQwdYYH56yKUZ3kfPRWs5BqTfNotyaxM2eCSSlqr4wfXYF7\r\nyJJp31hFtQiu+vMJl0wxVcNqjFYotjYGzk1Ixy0X8W14b3HaSnwr5Pc6AsqT\r\nKG5o5Om22p2eoSUdMYWpvq15nUCK3D9cv00Fn87CHzG8u+j5MQmRfzYEZuxR\r\ndwTxT+RWCZ3o47Ph0cNwKJ/QzG7rvOyj+tz57+OdSq9k8gglWcHsTd66iimo\r\nVxkdtnKkDR1hyoli2LiKLyPrFYLrS2h+GGYdEUsegg00Y6mDrG+fVmFiGESN\r\nbWERTNzSt1dXtZXTSmUQI0uDASklE5khwzg4HWIYGc96m19p5QNdCqvcc56Y\r\n4o7o8TviwgC/HNA98XX7qr4SUp9YRBLgGC3akDvpK+Iy/UU5QVkM804mkUQw\r\nM/EXVBxviyPvVbjlxyiQhLV+zHXhP4gjvTZ/qxKdv9SCye3Knc0K+ci/TgdZ\r\nQyQ/pA4IrvbuxZqsmfkbhUFkZ+S43lLuiyY=\r\n=0vF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"46367ab28a14e7ab75dbddad4b3a00d97443debb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/rtl":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/shape":"15.0.0-canary.8c5675942.0","@material/theme":"15.0.0-canary.8c5675942.0","@material/button":"15.0.0-canary.8c5675942.0","@material/ripple":"15.0.0-canary.8c5675942.0","@material/tokens":"15.0.0-canary.8c5675942.0","@material/elevation":"15.0.0-canary.8c5675942.0","@material/typography":"15.0.0-canary.8c5675942.0","@material/feature-targeting":"15.0.0-canary.8c5675942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8c5675942.0_1668784650117_0.9816981107965859","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/banner","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.697fbdebd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef44d045b1a7b29958850d5f272ce710e93b412b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.697fbdebd.0.tgz","fileCount":31,"integrity":"sha512-ZCz8YhCSMiL7rfxt22TTMrT46ZDgb6wojw8f9ELAoPg30uKuk0re1bMDrXiu53R0BMdRhJsBb6JwHu5T+w5u3A==","signatures":[{"sig":"MEUCIEmb7HLPmRoZvHPNEsWMZjraoaq1nQqTVrWA87bMwcgdAiEA5BK6471rGfHaq3UdIHCGQVrbPNBahZW9IcxaSgKpTAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7qVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoQVg/9F6RU2GezdmusDS6tY8rJnDByL2zy7ODSCHib3aTKJTEEgrWy\r\nOhxPQgHOVvTXaO4/AEzjOAKPSuq+T5Iakbm+fqWksO6jiiDYeFLzt4qxR4J+\r\np/suEJwObabuScEbs3+O8m3bX3e0gL4rHpvEJZ4LIAkj0mrTyDQPp4M6gUYT\r\nSSCzjD5URt6wDhgVNOx8wTadw1nkM+qi0EnDwagQgetF2+HBRHkwMKbemQ5f\r\nqXSsWiMYR89ZCdExF8Ukta41P31plQltciyPYDHmSv3HT5uXfjr22qclFJd2\r\nFpRLrFdpTKn+rQ4doym2vmgrG14B7R6jKVJ333kjVFHb9pd5sYBe09p0jphl\r\nPWGfISnmaeW5K/C24Uuoc7m2JUvYsrq7plYfc7wPYF6O+yNA/rTD7hREA+kQ\r\nZrIdF8yDOJp0DKAV8RX0kYCM1r18VXWdTxFEiqKV94egu5GFKv34hwZecsI4\r\nXDK3xtFFt8bNUZq0rwxIaETMMEe11EOKfkoXOQQq48a1/bmszwPnTFq52vb6\r\nOW+SqrPfYStibckbQR3l1GroX8wPX1YAIYYEVsIU8gYHvWX+6IByhnJ/kYgi\r\nts2gQHxOGaxlj6mt/kIs35CvgLnw+Z5ANRCzIhm9O0yVV6WPcLOi7J7AdV6C\r\nqrmCCapucnew4mt0/y1/k2mjWOBBrkS3Kss=\r\n=2l45\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"633705dd01d68334d80bad5e354eb7e71d9fa30b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/rtl":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/shape":"15.0.0-canary.697fbdebd.0","@material/theme":"15.0.0-canary.697fbdebd.0","@material/button":"15.0.0-canary.697fbdebd.0","@material/ripple":"15.0.0-canary.697fbdebd.0","@material/tokens":"15.0.0-canary.697fbdebd.0","@material/elevation":"15.0.0-canary.697fbdebd.0","@material/typography":"15.0.0-canary.697fbdebd.0","@material/feature-targeting":"15.0.0-canary.697fbdebd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.697fbdebd.0_1668790932914_0.5038097199382414","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/banner","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d58410453.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48bf1954cc8fbae6357848ee1992dcf7b4a756c0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d58410453.0.tgz","fileCount":31,"integrity":"sha512-7yY3rAzh7GdKniTAzBSEWZFCkS9NolUTWf1H6ibztkUFByMMQaRPOsy9TcPtnGdQ9DJpyMa8DsUGCxGniCtG/A==","signatures":[{"sig":"MEUCIQCarbQBoi60Dw4SVHktYWyI+cA1ka1Tad3iMVTw0JnbZAIgXNj7X1aFSs36D4g/Cy0eCTi1b4dllMzoMXZ9LmET0WE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9xYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1ww/+MSlHYyE0vnGxNE9iOF/cHGDEy3OYp5QaP28wwMiMxGYdY5GC\r\nqZoiV2RMXTzqrkXJhpSPWgv4lkmlZBOpDVqXpNxZUujSEG+3PiHCm/Xu4Gvg\r\njI4ydIXNqkcPjYejBCTIb5rlGKRTsV4fbHEMFoSDDUkzr8O5xoxog92TfGTX\r\nz10baPqb9JSoEbBYRjIdiY/dsecbh26xFbmkYPCsGFrmZpQsm/4VpnG3TgdN\r\nIHB3NwTBKSNLHkpl9Hu5Cn+L0+8Uquj7amDPM5z5+5nINB/UYTI9jZGmGr7e\r\nVDf2ypozSkEoaYQp4CHNPvdY44mZAPH0C4cO2xBaPhUVsOdlGtyurXT5eK/X\r\n3hLOLczHX+0VtG0XaXRvEtSauKhKhhKkipWnS4oTqGqaVDfncYHSMW4D/ZEx\r\npgfr9Lps6CZ3UwmItF4sS0s+jiCevkluowRwPC6bGw6tRQK9FtmzU7ZWIFiC\r\nwctC5PdsJdApI+1PPNgmuxorhVtfHOgeLk7QQ0uERDGM8zI9JTXVoKD+J4Vk\r\ntB9K9LgbXuygxrxo54SzGgdBeBsR6Yj5iDvFvTGJi4W23xSNG28jsFHYlSUR\r\nkbk83rznq2bLo71v8aFFS6gu/sae+VBG+aY/yNKBeScKMhvKSrTmiad9TMgf\r\nMCt77+W3ZkW5LB4jp5bguoK0dXUcxCxo8rE=\r\n=SjO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"65248afd9a1318b7afdd324f3def6a9c8e67c90b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/rtl":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/shape":"15.0.0-canary.d58410453.0","@material/theme":"15.0.0-canary.d58410453.0","@material/button":"15.0.0-canary.d58410453.0","@material/ripple":"15.0.0-canary.d58410453.0","@material/tokens":"15.0.0-canary.d58410453.0","@material/elevation":"15.0.0-canary.d58410453.0","@material/typography":"15.0.0-canary.d58410453.0","@material/feature-targeting":"15.0.0-canary.d58410453.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d58410453.0_1668799576238_0.3565451856806825","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/banner","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7971d6ad5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0410720a25f801e34461dcfcdca1f46715aea7bd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7971d6ad5.0.tgz","fileCount":31,"integrity":"sha512-OA23YGt9qTz5i+FdGgk4QpRkmby/w+k12YMlL7u+TmwWIiGom2AaOy/DbBCr2/uNJEJ6o0h+wcNBEmGe7bJutw==","signatures":[{"sig":"MEQCIChaue72W8q90m2PHYpJ6iIxaC82ZZmlRg8aIszdeB5yAiAnFN9DR09dg3LoJhjKlN7LO1kCg6mFfXg25S5L2fO7CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJfcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoudw//UglcvWH1/7aYfzac9uLLTzA/K19+cDXfa/iF8cLP6wlFSFQA\r\n1fl2bbu4qzA8ZFhnzAN/W4NmXgt/7iWG801nHu45ouFqpn/15ikoPht40FbD\r\nATQhErLck2jh7xWLcwYjGfIq8StB2TZZhzozzXzPfFXfJrU3I7+otY1bqWkO\r\n4ZoqCdnQMx2m90xeCqH36uHuoZEkOC/LcYRAdRgt3jMbeUjZr/5DUbDhAvTy\r\n1XxTf86a/tR/2gN8RCM92Vl2nGOuT+cD66uo0S4aLy/BmT2aVlKSU4/SeJPu\r\nGSdjPzHrs1FZIH8TJvFKlbCrcHlIiR50GOva+o6kNlo45rkqmqXXBUpIW0aK\r\nO5W3GgwF5bDlohUaDuxFvB3ZXLF4bot6Ko0oOuwpaBFiYaZRccItoB5i9sKh\r\nfpKK1wDEpz7sJZNThHqDNMgBqMevn9b282HXYf/r9ce3FIshS1fM0trLUzh4\r\n8SAL0KqJSnimbfeATMqFcTNT63/D7Zd/kTZurIrzFAyR/4+vNh1Gtt6NT5ZR\r\nWmFPyG3W9HkCXYvzzEv6RTvQ5zq8Vfg7j3FOwb7JaC0X6ioF/VrmmEp1NNvP\r\nKrzxJCo7vSUBwkpPl0MbEYFPJT0F+pYnAogc/2c35nA/DeCXLWh8nuZdRLb6\r\nj8V0JnU8cRW28JvktcpRShg7+jWyx2eQMgE=\r\n=bWkT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"caa68cd6e7b5cf4d64e037521bea18e312048e69","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/rtl":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/shape":"15.0.0-canary.7971d6ad5.0","@material/theme":"15.0.0-canary.7971d6ad5.0","@material/button":"15.0.0-canary.7971d6ad5.0","@material/ripple":"15.0.0-canary.7971d6ad5.0","@material/tokens":"15.0.0-canary.7971d6ad5.0","@material/elevation":"15.0.0-canary.7971d6ad5.0","@material/typography":"15.0.0-canary.7971d6ad5.0","@material/feature-targeting":"15.0.0-canary.7971d6ad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7971d6ad5.0_1668847580220_0.17041650937153818","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/banner","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a0ae73b0e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"81b454bc9085de7123bb122ee6880fe2de4fa463","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":31,"integrity":"sha512-yuUDz3MyQr82HMIgUAaSj1IJOoxhwvlEH2M2CIdoCDfilpgH8998ec9GbyI4AhM6mOFM0t1bJwzgUSqsaqyCPw==","signatures":[{"sig":"MEUCICq8GypzAlj4zVqLA09la1T0ZEYTlzJsGVl8qukb9VOoAiEAv1pl4eLQRtkVDfPSb8KGSQEn5G6i++xogckyTgt2tP0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1kOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohYw/+NWxfUyoc1EdGK8Fw7t2lgcl8zLeXVdoqpItDaMmuRafDAOOZ\r\nvAqxhxgLYMs+1RbYBp+4uCmFH0qBfLsCCGIiYXJG6/JGgLrDq9Dnx+HfoLpI\r\nHko0nKrcNOg5FZ/OeCHy1Ham7/zcN2QYzRjOGPW1Ga7vJIK8iZgLF8VpH8DD\r\n8BGOVpc0NIYaiNKzKA9nbrtIunDj5+o5iIRxawSrdhqQvZlJyzrMrgc0Hy3s\r\nNy5oGQxYT85eyDJRaf/6xGeNDbmfhcZdFdZwOMP6oVtktTaK2i+ZqiO+iz9z\r\nnwu/o7DT0GWSnNMF5vUDHuDlJ5OPdpjDen63xYhPy5IrQJg/heAoA6HJoX/b\r\nhbIykl7pV1zLviN7VG/SCbpsp9DLFSCLy2fT7VQwoQuSVxVT9NXYgBGNT08W\r\nWKW4FdCw13SISto/c3P6u2l6r8CwDzTMMsg8riENGCnMnrWTTBp0ZZkhGlTV\r\nW4AJyhSJ2gpjrMpMyYCk+cWRQCgSdx6+qhZ1Et9aOrOGAOSwYwfSF+jAUkIc\r\npKnElQ4gc5qXfZx0WbYT7ILUfMIY/z4vdrps0ejCDYxWW4Es2tCCK6v8s2LF\r\nD+wr0UWWA69CqF78prDbhC5oHDtHI340O1OR3jzT4Mj5TvrRaA7sWZZ+qcuR\r\n+tBKx9pJ9yEIlgbQ1r6TdUJW9ZDiwjvjJdc=\r\n=h2ZQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"92b496120a9385203165ec42657a2edf41099000","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/rtl":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/shape":"15.0.0-canary.a0ae73b0e.0","@material/theme":"15.0.0-canary.a0ae73b0e.0","@material/button":"15.0.0-canary.a0ae73b0e.0","@material/ripple":"15.0.0-canary.a0ae73b0e.0","@material/tokens":"15.0.0-canary.a0ae73b0e.0","@material/elevation":"15.0.0-canary.a0ae73b0e.0","@material/typography":"15.0.0-canary.a0ae73b0e.0","@material/feature-targeting":"15.0.0-canary.a0ae73b0e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a0ae73b0e.0_1669028110139_0.7201219206491725","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/banner","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.96f472604.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"20443531684f3d98803ca7153fd37ea4c85a358e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.96f472604.0.tgz","fileCount":31,"integrity":"sha512-u9Eg0rEG5GjrTcpJFb8r2eGK/IWwDYa/vmGrnJVN5bsoqFLYvk+ZenKm7Ij00mpFqujx/R92d/QlBtdyfyyXzw==","signatures":[{"sig":"MEUCIQDkYuixDsrbnw6/LJ+2jvhUOVKmgv8EmCUrfFx0RZw5EgIgCU5uYB8oE8HFBwvYn8Zjt4naA+HomnBtruOtYVu/o9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3TlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXAw//aXi3B7vA0r4QG0M31FB/WVo632S7JMwWDQ0IkoTzA/kbiF4V\r\nXfIftY+V4spJi8PIi8Mnd66Z3Wr31aQYEEH51h9rgBYxR/+Jb4kbRyFNt4AH\r\nwWOAEQEFZorYnEqA9iQtswxp3/DA1oKbdOlPJ+wUa1UBHKDrt02BiKPdfawC\r\nhPaEC1wAPBAW9Dw90lMj7aX9fwk7D46Jqel1BEEd23OqTa+zfxBZ7g8Atnqk\r\nhFguFrtFF+oNxumQwi1s/u08cR1BTBNDKUIE6inEIdNwYmrKkvRJhzDBbtEv\r\n8nK4cbPUlxV1UvIHnXDSFCnSpXFJ1jc7b4Au7tKmBC4VDyCXlEpCYVop4h4A\r\nK3mpPIxdYUOsQS4caNQHBmfkZgmOo3zMuKCRTDTV+BiiRf3SepYwUxrMCG91\r\n76h8l2rJdhh9dF+WpFoJ3SQ4VbrXH0Nc4ij0b1iUvi+5qpUo5U0WYT6S8IZR\r\n6sRNW8F8qRyNJ8AoGOy5/SOqLgStuREaRbMW4OTLuwsbKQSssrtcng0x/Lj6\r\nmRG0AjCJxzxQqPTSzvwXTjwg3N8okgLVcgKObUBV0ecK26CoNGCMHAKQ5W0V\r\nKm2yYTqeSerBgik8evtALsCnCPbr0UFZhZMEb//z7aVxGlaW3y6bnDNo9UON\r\nQ9ZF7j6K5GExR2fZcyRo3tjfSr52Vxt5+Jw=\r\n=7Mu3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"28f313542547c982f69fc57b98811983600931fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/rtl":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/shape":"15.0.0-canary.96f472604.0","@material/theme":"15.0.0-canary.96f472604.0","@material/button":"15.0.0-canary.96f472604.0","@material/ripple":"15.0.0-canary.96f472604.0","@material/tokens":"15.0.0-canary.96f472604.0","@material/elevation":"15.0.0-canary.96f472604.0","@material/typography":"15.0.0-canary.96f472604.0","@material/feature-targeting":"15.0.0-canary.96f472604.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.96f472604.0_1669035237683_0.30073677740013305","host":"s3://npm-registry-packages"}},"15.0.0-canary.18b8f31e1.0":{"name":"@material/banner","version":"15.0.0-canary.18b8f31e1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.18b8f31e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10876cfa4969b2c4df52151290528eaa4eb2286d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.18b8f31e1.0.tgz","fileCount":31,"integrity":"sha512-zm0Uj0bgA1anp7MLuyRdD37D+wKzhyLXhYMnGmUWrGIcpr9DgcQ9VmpfYslg2eT4TDY7DEC5bXtGl2jw2eOuvw==","signatures":[{"sig":"MEQCICQKO1rrz1QvVmHx8Jw5wY0mORaa+sHmIlqQKeqpJZJcAiA8j/N4gfou2FThii0kt5KDwijxeizb3EpqNQtSlqhpBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje6FbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrk9Q/+KN/+0rsL/U7Awxfos/9z+zvgnG/IuqYA/BJzhqUfCASrfhF/\r\nWPbRKLXYaXHUXei0utawyKtuKkKohlfSRF+yJ6Tk2pCHoJvOaA+yfkOn/QtP\r\nLPW3yf6cuv6OoYP9ciZaoWNvKGBJpQ/bfHWfz6Wt4tC51mqVHHWVQZRPDtNS\r\nQg6l/Di68auL4Tp5y45CglZbQzIcdaH69KPFRWw4weaJmjrA6eQmexmDWP01\r\nCmvx0o1Uv8rGkmk9PbGM/Qo2CF6R1py2AOU896Hbe/LFUpTaYLrywVt0Kpsv\r\nL5jzZpWRm+Kb7ri4sSxv3U6TC3D1YBMF/PRZmD3IEL0o95HHjs8CECIMVzbF\r\nvnZCFXT9CTxqs15SqkDbW0sITecocX1QBYQXhakP0JBOQ/t2RXfqsNDHlRkM\r\nnY3x2heIm/GOsfVaO5PXyjmo9WHzm250p9VmtwoGrDI5bW/5bnYlhU97Ul6i\r\ndH7d+lhLVwN81VCEqB9SSJCZaJe7AU7hxMeRDXyuB/lSlsQfA82X0vlQID9F\r\nl32xx9s6DNAbWDlfkLqlNrtOpSEdfUxaZrTs9PASkIidjh9U4bAUtsL8nCyK\r\ndGxfFnOkHJ6S8wfrcLSN5GwjPAo4bZqGyiW77Mlvy0r4J7YP8SwXmxWnqPQQ\r\nV7hsQayIl0VrIipSY7wddQVJfBJHWu7nM8E=\r\n=w8GY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"99a6c50dcaf8c9db8b49ca9378d7bcc70fa3d276","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18b8f31e1.0","@material/rtl":"15.0.0-canary.18b8f31e1.0","@material/base":"15.0.0-canary.18b8f31e1.0","@material/shape":"15.0.0-canary.18b8f31e1.0","@material/theme":"15.0.0-canary.18b8f31e1.0","@material/button":"15.0.0-canary.18b8f31e1.0","@material/ripple":"15.0.0-canary.18b8f31e1.0","@material/tokens":"15.0.0-canary.18b8f31e1.0","@material/elevation":"15.0.0-canary.18b8f31e1.0","@material/typography":"15.0.0-canary.18b8f31e1.0","@material/feature-targeting":"15.0.0-canary.18b8f31e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.18b8f31e1.0_1669046619079_0.4054528579309977","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/banner","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.912f33ce4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f89dcc7f515dad82abec50a58da24ebde0101e25","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.912f33ce4.0.tgz","fileCount":31,"integrity":"sha512-X0MQoBlp7sc4AJ4SAZepX/l6fz3JACvcrnWEMRjW028SI8xoH5jV+0vJ+yRCe2c1EYYl2LNL+CplvtV9UwzR6Q==","signatures":[{"sig":"MEQCIA++u0XjBVFpwrozzB80+6AbbATjwNVquR1Ss9vu9QlcAiATglTKAKdyUt8Oxm5Smcms9KmCxZBR9iF5C9SsmuPzyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7uDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHsg/9En1cJIUtdgX15Sld7nEM9HkPD2k0tId7CfB1j+z61nqg80bM\r\nT8w0L82vvb3yIAIif53A0gLnkkTP0EKe+YkcxaxGXtNoHQvznPweXAejTeCW\r\n7L0A5sBPFjA4MHGkgMx9I7awGgDZ7cSPxxQa1N4Lgl2FyYVaGuNdSwD8XAy0\r\neZjj/WhvXVCIkTOuZsHdyD4eH+2GLdHD1Cy0hiZiglI+s3GRt9rneYF3g71n\r\nt1/8Xkfj6gOUEribE/j9CSGm0QOKPi48RdAV2UWqnM6mzY8+S33wfd6zad96\r\n4lqJ41OE0VgxkPgHDkMycVofGy27ymsDBf7VbK9plF+SZ3BhWBG1LHBgK0dz\r\nJ9g4BOcamKmC0skiwbqk4j+vSlevEUuWiI9Zohes6DxagiUyYJZZ8/1jPkOQ\r\ntyuDraOoLEfLNnH8Sm/7Vw9RXUQH7byMpE4cu8J4NBJidSDQyxGejUneL8x0\r\nYpGXtzfPt0FR72+OwX6kAJPVDFuVgHTyY2yDx0hG74pYNilWOalm8vBSmRRB\r\nVBDFH/wXecNxSBvKZDIQ7Xwn3RyVZmnBTxWnMxk6IruiY1Wy5KYwXaJVvW9L\r\nLmJj70SsEvP0DayXlsD6TC1M8C6KEX4Mkm6B/rq6ZXwG/bs5JV6Ay1Xyqk4D\r\nZ5YU2wDFYpNwSvihAnbcWz/nIMlRIRGJl7g=\r\n=htai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cbdf5145fa19b6681004b6c2d5de771b50f5b6f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/rtl":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/shape":"15.0.0-canary.912f33ce4.0","@material/theme":"15.0.0-canary.912f33ce4.0","@material/button":"15.0.0-canary.912f33ce4.0","@material/ripple":"15.0.0-canary.912f33ce4.0","@material/tokens":"15.0.0-canary.912f33ce4.0","@material/elevation":"15.0.0-canary.912f33ce4.0","@material/typography":"15.0.0-canary.912f33ce4.0","@material/feature-targeting":"15.0.0-canary.912f33ce4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.912f33ce4.0_1669053315153_0.09912654491495121","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/banner","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1e1b1c369.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"614f2f42750c57b757d1f013b17df6a60d423311","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1e1b1c369.0.tgz","fileCount":31,"integrity":"sha512-vazAeZschsFu5ptxIYyRN/phXnRT6ZIpnj17SYIggrPWGT5rRS1Z4CiYmKE5CXWCx5xTisJF347wTkDKMOQzUw==","signatures":[{"sig":"MEYCIQDssm3iTmHMN5OVARzaU967xO1EnKo6AaIBfJIgTBSndgIhAJfrlJPlgZeAuSesmqXry09lHeSQTOxRwQ9CiAnDfmJT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm4lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmocghAAgPtdjeRYtXGHAIE/dp6+YQ37CdQ7QK1YbRBjk+ZuQwWk1GT9\r\nty81ybnUIezS1/0uE+/Ur2xBBgl/LaypH2cA1TKgJZCSHZKBbPNTxpJa64cg\r\nWiiNLjmfK7k7F94PX/jJu9t2P3tA6qlee/tnjKWpCBE5/oSZSofH/CRuPxvw\r\nMzI/V8c1ytuZn4x2+PQarf16DKKXgSk4aaVAeikims41SNoILO0UccK0q7ev\r\nn4rs2XdhLHQywb94WYDX4vpk/KkOziPO5w9F1exi1hKF8YDedIz4NvYNL4vi\r\nCJQCPBCZfn9I3j+n7igvE1erO0m0YsbSsxBOHwt0p2wuR0W4YGAY+wQBdCc6\r\nau3btKVz0gUP1KXrLo3CdueCw0ra3/IWULkvCAlBy00cIqQx1DTtdKGUgl0T\r\nfm3s2E/CHUJk/FjTXvH07KRHHf+Y/wNSaObW/ZdG6eEbctIkbUHBoM9xQvEY\r\n/ClW1nOWAkD26dlITCaH+yijLqSDZ/x/czGFz9uCJgmTsNYOo41ycZgtdsH8\r\nsfchLThjB6BbaxUZo6V0VtEhUUht3Lr7IbweRS7f9P4VRp2kilgaFubTozqS\r\n6oVGsr0/cSWXBWswchYbzBtHWXHbQV77RXEBtQAaqIC+5tGLDfFKSlkYyVZh\r\nwweeB00X6iAiNgIeTH89qgoq+N7TsskrfCA=\r\n=WGxB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b59baa6ec6a8114401e616de0c9d3675a34e4206","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/rtl":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/shape":"15.0.0-canary.1e1b1c369.0","@material/theme":"15.0.0-canary.1e1b1c369.0","@material/button":"15.0.0-canary.1e1b1c369.0","@material/ripple":"15.0.0-canary.1e1b1c369.0","@material/tokens":"15.0.0-canary.1e1b1c369.0","@material/elevation":"15.0.0-canary.1e1b1c369.0","@material/typography":"15.0.0-canary.1e1b1c369.0","@material/feature-targeting":"15.0.0-canary.1e1b1c369.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1e1b1c369.0_1669230116685_0.8626891394083418","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/banner","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a2ec49244.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"795f6209d3a3124fe80de4dfa68c15e356f9a77d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a2ec49244.0.tgz","fileCount":31,"integrity":"sha512-BiFkyWI1M6sUXTMErIBnbwyNcqyT/mgn1jZ32PhtukhbZWDlVpIKylCJ+SfK1xce+SL7dUMrRXkR4p3nkaKHbA==","signatures":[{"sig":"MEYCIQCs6jWbTav5WneXzkb9WdR6l0hVuYU7w2aAJwqDQh1uCAIhAO6NZcKgAWGvMHfCXW2xxHhfMzE/gb2qBRz/V9MxigJj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnU4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo2Xg//Yqk6ppvLHUhRY1besDuRBmBnLt6huDJYEDWyxdNHzO6Byd2x\r\nOI9C0wb7Di4S8ujXdoegVPs6Q14SXefnylxWjd0rAyK1cG3UTaKHzT6SW+Tn\r\nyVQIzXb/V363z3n/P9XogRxuC1QwSYvm/vEQ+i5hahRntXIl6N/stF0GR/sj\r\nPHjsdzzx3DWAf9V5DpGUaYS1jcrkw14cdkY1lzDeMlWUEUMNhYNpTd7KftWB\r\nihZ0aWz9x2YY5Nt0H3I6FWBQWziMAFjqDNr66ajnmB48QjI+miSt54xaHMCR\r\ny1ObA9lLpVcIzQZqGsTV4RoU7UBV7nsa0g8s4Co1cKj5iUCwq4Ri5JbEXpWs\r\nw1DkiqHYaAYjUh9iTHrmuadxj7HcuwhQTZbf22ISQA6iRtBTLZez0O7O9WPi\r\nTOBdU8iAmCoOnt+7L3FXRxQVDS+WH8QDJGYdR97fgwsdFeWY62cA6x5pmRAO\r\nVkjrzrqjq7hxVWwCpXSrbI6q0rvZKZEs7Y6F5/j2KcVhnKh/djiEGgGiRX0t\r\ni8ScL9OVZCRagx09QKzk2KNj+3FOjVtg2nRDZ5OFN7maL8gOekp4C+TjsnqX\r\nmc/ngMVDHVv9A4G4NVeit58rhrz/faIn/gCOmiuxJ7X2GmzXVSZieDRwplxx\r\nojhrau6C/Zlcba45AkhP5NWPRJfIhllYj4c=\r\n=lvW+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fc59d471222d0010e05a636e8c3a9a5a9abe2b3e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/rtl":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/shape":"15.0.0-canary.a2ec49244.0","@material/theme":"15.0.0-canary.a2ec49244.0","@material/button":"15.0.0-canary.a2ec49244.0","@material/ripple":"15.0.0-canary.a2ec49244.0","@material/tokens":"15.0.0-canary.a2ec49244.0","@material/elevation":"15.0.0-canary.a2ec49244.0","@material/typography":"15.0.0-canary.a2ec49244.0","@material/feature-targeting":"15.0.0-canary.a2ec49244.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a2ec49244.0_1669231927941_0.19056891493967765","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/banner","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a7458ba0b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2e53a924bc595ef5fe0d3d5122b4f3cffdcb6a3d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a7458ba0b.0.tgz","fileCount":31,"integrity":"sha512-aC3NkiBIatrR/FZntvcsfxaHZpUu15Y3GVqGz8gKLq6FMTkxyfO0HAHURrjgwQUNGdhKPneJFg2ZOtyEPUZ7lA==","signatures":[{"sig":"MEQCIAXtHUfRtVdVd6racDLFSwjPfOsYo8jiBRKJKgJpbiH1AiAlmG8uztvIKc8WotVTDFduYmVrWn99DuaGQYUXCdtr8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfn/oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOYw//eRaLCd/svk+PTVPLfQTE7Y0x+8Crfg3GWcbxaKaY6J/YvNi+\r\nZYQUXZ8kqSoEBXPI1Ea580xSizX9Gu+EGtQ5as7KbntNrYw8WF5VJFBjTq24\r\n8UvPoOVzF+63W+k4RlIK8Xr7wUrcDgr7s+JyDfaIFVfM4JASjmzdL7pSaOmK\r\nNM5B9789LdEIcHFWre3tjSeUuFVXjo5o0MDT6Ter4W12xqLDiKnKRZ8DBRa6\r\ncyETFwTOyOruk7X5bTk3r/ZT9CuMg9C59CE+vqut6fsLg7D8DQuA84UgGx31\r\nDSgDdVw0adDrqVuNgCaydPSyA7pCoobHcAGWGqz1vD1xgHUPNnS9QHlekpB7\r\n26qlBQhEc6oBZldfdjnzXGcemP47C+x06WNUWH8JWXjaS8F+NmIg0amNXuXr\r\nXnt4PC8Wp7mWWfQlkVSu07wl8LOvpaseReAUlN7fxiQPFBoMX6UOiL6szmfM\r\neegEK+DNyoOawfFTN1q4faatGo7zblKHcOoBnbcJq5q/pe/zNq5oml2CJSsZ\r\nf4AMWUtuLQ/+2Z2YR5fZMmircxmrLy1l8RQr8q1B5oXsYZA1krAM+6TKP/XR\r\nTPArn3E27IJl+XLSWg3mhbcDbbvqwehUHXk6dINAyJCFWpzKhiyVMREpvn7P\r\n0Zzkr1uFOn9Kl6J4DhTnNgaJvZOL5MoaFdg=\r\n=rPUm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"62e6a15e0784982b77df0a1d824f81d5a15cb6f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/rtl":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/shape":"15.0.0-canary.a7458ba0b.0","@material/theme":"15.0.0-canary.a7458ba0b.0","@material/button":"15.0.0-canary.a7458ba0b.0","@material/ripple":"15.0.0-canary.a7458ba0b.0","@material/tokens":"15.0.0-canary.a7458ba0b.0","@material/elevation":"15.0.0-canary.a7458ba0b.0","@material/typography":"15.0.0-canary.a7458ba0b.0","@material/feature-targeting":"15.0.0-canary.a7458ba0b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a7458ba0b.0_1669234664316_0.5920526527718373","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/banner","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7c35e5036.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07f223e4b0a38a32f28319dcde7b30865205c8bb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7c35e5036.0.tgz","fileCount":31,"integrity":"sha512-Ip91N9Zfo2SyLN/n9vIg6tFiMUdz70Q1wbYZKnU7l2Ax++FGoW1Qk+pq3hU/+pNJhrzjwx5YGkSiO5UKwp3dhg==","signatures":[{"sig":"MEUCIQD1QxHPDmI6Jp7XHY2Wf2mOEhSkk6HMuk/94MJL/dlkWwIgQyOJo7LJKXjXZ1Ev6W0H8ULVo90V5QQIRBQrBJJFXmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy4GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+fg//SxeKh/GLcE33JFTshXSQejdPsjGHVUxmbwdpHIq/7LMUgW9E\r\nv4bwloXNh+iDsCbkPb58oqhVRCriLqKr71qv9hSj1jmpOjw7AmN78/7rm/NS\r\nXbk2JkIKNKhAsqk7YuQZZScASUBmpMuVf0K7/DrDgjQj14C4DbXuPDEjtiYb\r\nw3xZw5ErvD6djr2N1cJFWdrr2LwGTL4Xiq4XfXiXaMrMtZzPKoPxPcFppzpJ\r\nqGfy6C2bS1cxEAua05efgbY4/Ar8i9fmmtFqhBVD8PV4Ouha+vEL9Trafy2c\r\nLvrH1kaNBOiAkOTuIOV3HX5NkBGH9X98beuVpiAA66BTF+URE1/cFectz0sW\r\nhYaLVySduPIbou6JQTLVlSl1aMNXYSxHpKudXAItrF4VBv87VZUUKNzsgxWi\r\n7zN5Ps0+fJ1xJC4Edzk7A86jpB9IWKe8m6COB3PTTW1x4dFlfYhwtBFc5MJ9\r\nPh+EAN5+4BNVZ8/yfHXp54KjgliXxUscOOoDGtlb2zWoJ7qki4019hTRMWKi\r\nPTaI1hg8R+CIbdaKR0wedXT1Qmk8BmGW4rPUpuckDtADttx0itTaPO/aiN/C\r\nMa8QQQQKtBXwRqD6+XL+LtRh3HzRV0GKt+ju70mBYxi/4uwU1F4rWVQpwTlt\r\nQuycGVYunqOt4TRoXnjAzakbDHaIN7kovwI=\r\n=6o+9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bb1e9aff747feef28ef92f415776fe33dc1216c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/rtl":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/shape":"15.0.0-canary.7c35e5036.0","@material/theme":"15.0.0-canary.7c35e5036.0","@material/button":"15.0.0-canary.7c35e5036.0","@material/ripple":"15.0.0-canary.7c35e5036.0","@material/tokens":"15.0.0-canary.7c35e5036.0","@material/elevation":"15.0.0-canary.7c35e5036.0","@material/typography":"15.0.0-canary.7c35e5036.0","@material/feature-targeting":"15.0.0-canary.7c35e5036.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7c35e5036.0_1669279237981_0.013231786990441918","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/banner","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4356e05c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"751e61a56b65752e828f2d7050fdaff667a40f93","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4356e05c5.0.tgz","fileCount":31,"integrity":"sha512-Ew4hbbuJifowGa8TVOIc+kIzcUtzW3JNWBEHzfRZZ273YUTQHlwAkZ2COvAlQ/bQBJx6p3rIAdJksXqbM6/Gbw==","signatures":[{"sig":"MEQCIDEsONCMYKbuHhh4v7qf5PbdIUGEwEkaAXzSbJxr33aEAiB5drcxbBNJtZG0tvnKYJm875rdyhWnKu1R9NcMebeB1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0AsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqLvBAAhazjcIwLtqCbEa38ziXhPVT88CFTsvh2nQciedQ8noLYuDRL\r\nizqRAU/0j+BQe1qJAOhir0rV6kCNmMAWRboydh0jC5a0QvC2bJuqULzQMSXv\r\nmY0ZPIimpQcvwl9MFxTApacHSpp45Dgn8NSvTIx2i+zSq6ckS1lqr/wsD6e7\r\njM2Jlxr6YWIB03omaaLS+VvYENG7aIX5BTbPtWYdEXL8gbaF8jfAnYCKsmQ3\r\npQ29RMB0IiyATY2/DpnhIiWWNLTJ918sy4zVvS4zQ5RoT8kPyma7U43n8mrH\r\nLsNmSXp8zl3EuY3Wb7v9CdZTKHvs8StzKxFvEU98/PAiUI8kwqwaH8TZ+Qy8\r\nPO8GIO2zIjvVfv3jijg1aFL4FAq/9iXTiN8jwUoI2gQ4Ln+TiwxajDF/CpkQ\r\nV3YzoQH9AfhY+iOUK9ByGI46cOwEtuhXn6q7iQfMpO1NrnetpC6shzEnqOHc\r\nEA3ODsBTC+hjg7nZyxXbGG5uV6LtLhS+qgr7nIf5MOxjzb+Db+eHflHUT7Ca\r\nqSIyLBCjDQyzrViZYz8GMUqiQfRMJpxEAT801lcvyIJ6tHcmoFC3JG8iJzN9\r\npbDq8kifpDLlrcrDWVZpuhrE0FN273NVVpVpAYswOEYH/K+0RCt5zWKcR5iw\r\naz795ky2Gow/m51MrDr6sYEJaF8nGwRyI2g=\r\n=1pQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8f21a6abb8b52fe9aa5804b940eac0cd94256fd9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/rtl":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/shape":"15.0.0-canary.4356e05c5.0","@material/theme":"15.0.0-canary.4356e05c5.0","@material/button":"15.0.0-canary.4356e05c5.0","@material/ripple":"15.0.0-canary.4356e05c5.0","@material/tokens":"15.0.0-canary.4356e05c5.0","@material/elevation":"15.0.0-canary.4356e05c5.0","@material/typography":"15.0.0-canary.4356e05c5.0","@material/feature-targeting":"15.0.0-canary.4356e05c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4356e05c5.0_1669283884051_0.839722046538675","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/banner","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cb605f8af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7f5e4595377fcdbe6e0fc4b34abaf04f09692438","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cb605f8af.0.tgz","fileCount":31,"integrity":"sha512-Tsx6200sLTRkijPXrcaB5VJF9fwNEWPuox1HkoQmgFITiP5KO/SDG/IBFVdB7zDRszNyuc/9Q+85r4CSMLJ9mQ==","signatures":[{"sig":"MEUCIFQS38iJXZ6s+K/n9jB5JFebyXpDIynojEzYJP6BD2oOAiEAtNh9sHA7msxCKtW7BVKWZXg3e/iypcZRxwS72gbm4h0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0SjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+7w//adtSv7s3MAuMOJYWpI+hU0IQ2Mt0omuSX58KKm/I1g/F/8mY\r\n8+fp4eqXlvFcYTh5msbmdSMdCOZDk4/aMH/o9wPHF6CK4MmT0a1xQCaQmeAt\r\nMoCaUGj8tAgU0+xZYpTtUKokw0f2AjlA5hZ/PtZeszrx3VM54rhdbqB5ozck\r\nKixpY5deT7z0LF218RJ1lRXaUvoHpYY4d90S++6uRrXS4KsNyrJC+LOkVpux\r\n/OC2tRubkeGhwkUT05bZx1xnokb/MzMNk8zkHqDMIv39xv8IiM3hJPmbWdff\r\nhhTf5WwRqLS9/SpGPADwzGUeet6xKf5isQznNK4BpAJE+JtG3NYWQXa6XNZr\r\nTYgxNGzTZ16crGCn3xSj9Sx/beEU4TWmrOYl3cPKkcA6RefQMADSveccWXBA\r\nrdlHq7Da7zNNw5N8fMvC2bpzBHByKYgxhieuz+DGEB7I229XyOpvTN0RGsxA\r\n5p5Bs/0GM2nAhxZtCZ+V8MBGoD1Qdit9fbdGXacRxdaDN+X3Rr0Fpw/Nv4Hk\r\nq4wukZM/HxKBgJwjdIcbSFX6dUMsq7dWvfLLWWZgdeAeQ42LgPR7fJCr8OLU\r\nTHTlpqZgbxHeI4MQa6xqiHDgZy7Zvt7FHyPAYLaCswd9UXmDCLMCpWK4/mPo\r\n+DZjDrEFpqm3/iEJEIqW9+xpVoG8Z9Ht0Ws=\r\n=ktHF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9d617d11bc1506bf595e8a4f05413067775d3880","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/rtl":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/shape":"15.0.0-canary.cb605f8af.0","@material/theme":"15.0.0-canary.cb605f8af.0","@material/button":"15.0.0-canary.cb605f8af.0","@material/ripple":"15.0.0-canary.cb605f8af.0","@material/tokens":"15.0.0-canary.cb605f8af.0","@material/elevation":"15.0.0-canary.cb605f8af.0","@material/typography":"15.0.0-canary.cb605f8af.0","@material/feature-targeting":"15.0.0-canary.cb605f8af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cb605f8af.0_1669285027657_0.604138251509122","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/banner","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.05fb07f9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8457dd2e588876938fc15eab97533306cd2fa5ea","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.05fb07f9f.0.tgz","fileCount":31,"integrity":"sha512-5O9puaQ0sxV2Q17AkdhXaZBAg+8+8ExDa+8V0cI2iuTQI0/hVV2sYarRHmSi+cIIit8Zhh8isswk4XGmN8Ux4w==","signatures":[{"sig":"MEUCIQDFpYKc/zKTSy0GwW18sYZKidvho8VwLTEfgWuOrgruPgIgWi3iexSt7rnSFQcSUdByPRGXe77mGeoeEi+Rj3DalTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6aQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDag//YbACH05h0vfD8XoMGqDMLP8u5vHog9SS4xnZpPRkjYsFAvWb\r\nSp+vu5PbFqlMVnBl8YbWcjAIbSmqctuYnJoiQaT8E8HdLZH7ZR+JHzuYWCfs\r\nOs9Mi4J7/UiVlOCA1bsMSz0/TzHrVV3Buby615imCWDjSbVmvfIlmUYB5lww\r\nZFdsV37jSJ4BKAvTXqnz1EKXrcpgdpMOpANo836MQzvVm1K5ShSudxqBZ7cY\r\n1ugI/JH8NT1Kq6bq4RwX95Jg/SwtFROAjuUBecszMWsl9RX/aFbazErVcuXg\r\n5er4Fli9MoPoWbjmf91t1AjWxbNe5CckhbX9G/Wreu/PWovRXzWYOMnLpwKB\r\nWQIRBc5yeFKjOl2mcLJe64pvaDykwX3hiLThsdtOzbIdICYN7Xp4/9dPTS0b\r\ndQpFTuqz7nR9XJG2mN5ESZkAm+tzj+pVFWLoyfLtA6gEeA/VAhmiAS+SEwyc\r\njWxDC1NmogZPttLfGv1sE/sK+jYbm/Unwo/qPTiZMifqTUvcuQORx7+n4nb+\r\ngd4RRPxoE7XEbV+Ud/Gab1mY+2lOEMBoJR8KoJGZPFI3gWsL8ggYweE2gRxI\r\nohhtuZu+P6Cm8y/JLJkpsU6Ui9Rjts8da9046C0dzXesTG4OCF17ctfX28rT\r\nlCfuSQeXHM9p9vuLT6PYtajk1Y43qfVm3MY=\r\n=hsuo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fbbdaff1715be513be46d4628f7aff9d8f7e27fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/rtl":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/shape":"15.0.0-canary.05fb07f9f.0","@material/theme":"15.0.0-canary.05fb07f9f.0","@material/button":"15.0.0-canary.05fb07f9f.0","@material/ripple":"15.0.0-canary.05fb07f9f.0","@material/tokens":"15.0.0-canary.05fb07f9f.0","@material/elevation":"15.0.0-canary.05fb07f9f.0","@material/typography":"15.0.0-canary.05fb07f9f.0","@material/feature-targeting":"15.0.0-canary.05fb07f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.05fb07f9f.0_1669310096249_0.22081910971413898","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/banner","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a911b386b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"60cbfbe96ecaed890c771f7fa3cab8413581c061","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a911b386b.0.tgz","fileCount":31,"integrity":"sha512-WneB987+5SMydV2plAgCHsMQYdcuwwakbuygQWEiYjm3LEmUFbAasfP/v2LLLVJYYPJ7vX5hWYJ1y33JkhKv0Q==","signatures":[{"sig":"MEQCIGY7a58SfXDDcEmkBRChtblXPuxvm8TfHaZJkZVZlujvAiA4HU4u1a/J012GRd2389iwjBq8b0HYHCNCsANgey1NNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOZhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojZg//f4qkyeb/BKeaC5iM4+OZJ4BQlgxjpejAijTTT/K/swUsIh4+\r\nhw8H960s5lYQoZHTNqBFsf+NjKS7oUVLPC7l5H0FkCY8y8aHYSlFksdT+nEW\r\n4k2i/d8WneXq/McoBP+T5Iwvb5BeBvI1nfNK+DiWPAk5490rpDWEzttSpX0a\r\nEi7vgeYEPngorpzyycphS931N/fHledw2zROMnEdBGuSdFFX+yBN7Z/lD4f9\r\nmAYb1TA9KNDpIWgvfA7jrhWw7CgxZLx5x0T5resRudImi6zLmKcoNtOHNTkx\r\nVX3F8Ie/6SEhfpiW5kA8aQMiqdNwhq4dX/nSLNei++9sDASiOrXVtr2jaAI8\r\nnJcdU/ui4TDskhEYNmLdZFo5JyshGba6SnWjH9xbqdG5kOrcbp3vXrzjNsc+\r\nqjDBrpV5KdaRm/lPgkAuX4fth9Iook2R5Z7mP6cNqN2CkbvuZM2D2KzYY49n\r\nkBmaRQ9otZPJAguewLBC5RD5m41eAl1kmFWWLMPx9m0FAo/ZZmHA0cceiHR4\r\ndOWtI9Ikkjuom0S3bmf39fuH89ZY15AYNg4pTSvfnW28N+LW2HIDxZZFX8BQ\r\nTUu5hhnLSc/MjZgAydqMoLLRbW3EEzXz4bFzJkumfHHK87pGGaWnHGutJ9H7\r\nLArGRD4FAFEmVVOC1S0iasILJ6L1EODtfdk=\r\n=LGjF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2487492bf1103f4c82913b328eb64ca5b71b9f5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/rtl":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/shape":"15.0.0-canary.a911b386b.0","@material/theme":"15.0.0-canary.a911b386b.0","@material/button":"15.0.0-canary.a911b386b.0","@material/ripple":"15.0.0-canary.a911b386b.0","@material/tokens":"15.0.0-canary.a911b386b.0","@material/elevation":"15.0.0-canary.a911b386b.0","@material/typography":"15.0.0-canary.a911b386b.0","@material/feature-targeting":"15.0.0-canary.a911b386b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a911b386b.0_1669654112819_0.03404440560832778","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/banner","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2aa8050b4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ce0468b5776f3eb48d578b7e13291b821bba2dae","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2aa8050b4.0.tgz","fileCount":31,"integrity":"sha512-3uIlRHVKuAUsz4qukZOL6SGjd7xhp6hEkamfXbNgkXjano/rxZIUC0qPE+Xrp5/wXgP1P7ct/UU0PWpwcINBVw==","signatures":[{"sig":"MEQCICgd6/Tq4SjbmOCmBspTiR6vpP2ld/XOd+YvsLlxJvOzAiBbbET59HRLd4gJzvxodF/Nn+gmYVpK7baBpmQtdY2Wsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQg3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqwzxAAkL/nGOpR9OJqRv6Ya7hl7q7vlYQs8pv2IfcQ8WqeYdIoomxf\r\nu8V0VG/wdUHcWBX28YsHgmHpnQ1PkS4S81N1uwcMbcukWDFMgdgVBOx6XTrb\r\nqwcBsG8XLNIYbKv9SZur78JltUNDVD52Ia+/opH/BjIcluROWSaHGpOZsz/6\r\nW2NMZ/UEwvdeS/8ExYcMF2hcfBOONAMDUVLHwnjNEW/3h+5ZqUwJesvErH7k\r\n2aBU5ZFcDIqdufg3rdTMHhHWfzL+WPn3EsKWN7ngUgqrwsDzGZcprUOmE4Wp\r\nwr6goSgdbGhM5TDItYUpGVDWUxcc1EfXuwJgkO6e3j84KLbZUC9EvobMqmeS\r\n/IZs/Uf+B54LXLIlFw9gPgH2qe4J2+uVfKjk39KqJSrBS1Z/7KzRG3/8VMTO\r\nbaTaxaCOeGYb9s4pUhBPKHt1P0VYL0ODY6yRT2PYyE/pRFHUClmquS1SEeXl\r\nAV535xRo+b2MsI9/OVAi9rYxKQqcn9eWuNMg8OIV3MZIu5i2KEiSkD01CTvJ\r\nZQ/eMkTlW7kcNWVFZpaOy9/SfyvwA66OTANDI+LzILEj5IAoTGxxpkSvAVeY\r\nQZqEdhZPaJmS824PhB6yIDNDfRkEsCsd+Y9JXl9+g3jREum5/3Qdh83k4cgk\r\n2jHNiErOx/S452+Z64rSRGJz3s8EOA9kDVw=\r\n=I3om\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7ea9b47d90d470adeb6f1cbc0c1c98b88392e56b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/rtl":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/shape":"15.0.0-canary.2aa8050b4.0","@material/theme":"15.0.0-canary.2aa8050b4.0","@material/button":"15.0.0-canary.2aa8050b4.0","@material/ripple":"15.0.0-canary.2aa8050b4.0","@material/tokens":"15.0.0-canary.2aa8050b4.0","@material/elevation":"15.0.0-canary.2aa8050b4.0","@material/typography":"15.0.0-canary.2aa8050b4.0","@material/feature-targeting":"15.0.0-canary.2aa8050b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2aa8050b4.0_1669662775251_0.18099880819888603","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/banner","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.323904a9f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7dc998b4cd0694f8c3f7e0fb6ff11bcad172d1aa","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.323904a9f.0.tgz","fileCount":31,"integrity":"sha512-Yt4sRKoAlxxVvnbSmiO/8bVYKXeR3aAFtorAvHFVXvlGb4hVFKA4mfr0LO7zgH4WkJGtZIigLrMcTBSeOY+Tpw==","signatures":[{"sig":"MEUCIDuAhKCHAhvOrNQNNALLTYWuZx6ppbUQKCzXeRM+k2XqAiEA7tax5S2f6xJZsbjJiRE8MfXe+Z21AksmQx/j5aBSTTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhia+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCyxAAg1ng+ZMD/PNhv0bOpzX9+EMIwooGJpLPompoPp7gmfEiKB05\r\n3FMF1G1kMIlSTFwMbvMOXjOnJLF1F/35sqVnPenpfau8XlQcYREZEpH0Cnpp\r\n4Jyf7AJe39Yvq8ISVZgbRkW0LtYG899ViEqYvL68n7LTu9XWr0nzVwket0xR\r\n1DLOMS5zv9t4V4FNtO9JsTyJOyQl8J5gUyhqILLYweqUZEyJ+23SkuCpBaOp\r\ncjs6a9hzcHiXThS/EZxKn7x3c8WZ/TD/0tBDxRPIIWZV0mA3FqF1ZSPwYRVU\r\nFt4Hae5hgx0a1PXO/cS2gXnaaffca8LkEbV1VAMzuvtNRBMXUK88jG4RXJgA\r\n2JM/EeqdAJgPP0NI29CAZzMJSMr1WkUjvsrgKwc9BGGXlTLgKWtiwb6VHb55\r\n7BxKdrhqXI3ihYbf/6XP9emtOulhe5a0xtdeh/tK13aQhQ5r9+a3m+dGcI1+\r\nDJ4YThAPATuCnwl5gtXbN7txcz4vNlcqaC1bsbB7Ntk0TFjDcVjVKQ+Yh80u\r\nE3NCfdV1z7+ZDtUl8y6szL9HspSR3mP0rITEOI09oq2qbm3zL/52xCPqwEg4\r\n8SA4sGfmASlDjxO40AuPP3OypGCSk1wuykrJMJpvrnxL5utv8532PN54zIki\r\njaPPxzDHFCWltMnyQUPFIqY/878ebQZHm8I=\r\n=kz+W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a69fa8c7160aaa07d868f5bc365076bdb159bf99","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/rtl":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/shape":"15.0.0-canary.323904a9f.0","@material/theme":"15.0.0-canary.323904a9f.0","@material/button":"15.0.0-canary.323904a9f.0","@material/ripple":"15.0.0-canary.323904a9f.0","@material/tokens":"15.0.0-canary.323904a9f.0","@material/elevation":"15.0.0-canary.323904a9f.0","@material/typography":"15.0.0-canary.323904a9f.0","@material/feature-targeting":"15.0.0-canary.323904a9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.323904a9f.0_1669736125852_0.42837367991499864","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/banner","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.168a629a4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dbca5531a5b91a7ecc197cfe6bbd4109bc49479","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.168a629a4.0.tgz","fileCount":31,"integrity":"sha512-OGi2afT7ik99cvjS1oeivpbzkm0KToPiE/en6ewaWEs26xYiFOKdVSfO6obAflODM5+j1LdzA9CZQhSR2AnmiQ==","signatures":[{"sig":"MEQCIE57WW13HOeg8f8fWjjqcE7cnptmGceKMmF70qzRXF4RAiBsCt1P2FPNNJlnVDDOoAGjAezf9eeRZAt4FZV45ZRklg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjhVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5/w/8D2aLPWzo5O3y4Jg/Jngd5c67HXKub7fNH1SZaYG+M6GCCECR\r\nWGmzoARFVuUbINzs2UbWfgf+YsBEIQiYNo//5L+1xVahnXFJX6o2u21U24Gd\r\ndvf3soRRJM8dDNzj46CLgsNm6fMYQC7Om2XdFCCePxkq76aNNxihEiK9MnT3\r\nKxdSqVYgaJwHbBKM7COz6Z/cBwQlOkNpDpta082pZP7hE5y87OqqSudAb17M\r\nY14XQn7myyh0d8H1eQ0enmKog4SDR4wb2266j2+outx/epapnAMfU9Favd1T\r\nCWDVGmNch86k7TyHWrt0K7leSevh53WvkjTkjA5/VE4dRPL2olMwFSU69tZN\r\nUDWg910o0uiPODHNUJPNxjD8ePEn7QFBV0yK2CbOXoFW+KUprVzSKkPyRBvW\r\ndXbCMK9pkfdF2j2+i0BXXpTX0gA6t5Fv7hHlqRFEvgiECgzLli1jXZWkj2Bs\r\nUVe0BKzVTxaV885RsD5c9eZ/pr9YiZXjPoals/QHpcwQDk/J8JLpAg0SzChQ\r\neFv9bbXwVCbKr5bSzgEjMwZTD29hfs8NijQ/tKbti0a5bntbS2xAYnkNLllB\r\nXU3YVmU2nhy1Yz/1EaVR8AwXF0c9Jp/lKP/ciGO2kqzIXREJdT4EJk4oEnFH\r\nms9fUtToim1J6qbAU9ANtrfHMPyEfE6DCbU=\r\n=U6Sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3091b344799132cce493f92839da8e544fec7c05","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/rtl":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/shape":"15.0.0-canary.168a629a4.0","@material/theme":"15.0.0-canary.168a629a4.0","@material/button":"15.0.0-canary.168a629a4.0","@material/ripple":"15.0.0-canary.168a629a4.0","@material/tokens":"15.0.0-canary.168a629a4.0","@material/elevation":"15.0.0-canary.168a629a4.0","@material/typography":"15.0.0-canary.168a629a4.0","@material/feature-targeting":"15.0.0-canary.168a629a4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.168a629a4.0_1669740629556_0.6097782995165617","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/banner","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.65c411674.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"837e09d413774343ec96a434537140cc374e436a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.65c411674.0.tgz","fileCount":31,"integrity":"sha512-c9c0ueRvm3SzsH9LjJog3c83Aw3wyEMcldoJjNuiDFDueWJ0agx2bliVkL4poJYe43I+H5G+jhapXxmcCCv2Iw==","signatures":[{"sig":"MEUCIQDctAL6kjHEobLgyL2o0TDaIwOqkx7igYW47DtwJhvFNwIgBAyKE8PhiRaWrcWwftvDjjhqOI6CtSeG85t8yHdrR2Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkPvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqz0A//fQfkP2VyZTz0C4VS4gRa7KESuIfx7tcTNfGPnWZyrOo8P5Z1\r\nUp+6lA2Jjxhd1L09u9oNiPRgLPqmlLy1px+kOIFaLERc4rNo68dKQeKyTtmf\r\nQLnZsnRthl4s+ed6UUbxHpqu0DvAqSajECISfHqywPlMTHZuVgooANq2z8GC\r\naKpSrLF+bBUzF1E5GkW5PxByyndwvy+nTzIRIk2OBGJM8aAfEAnFwtovm2oZ\r\n6k2OzkOef8QhmDi2hANsuyG7bt9RDVdxqwpckj6QSieS0dwqiHtysSJz5KTQ\r\nKyraT1LC598LcHJHA3IxqeVqBOY9bl51lj633LUJC9SfphpARXnUUxV4Vmjj\r\nJmM/txwN7q8Ji+e3dAJ9F+f8G7Yb99TdTP1vtVKVheeeybk3jIQx0uMAqRdf\r\n4rC/bi7RGI/QCbb7mfn6UMQKWNBv7vxGIS2wJJdoq6da9YlD798ZF6IefIoA\r\nLhsKdHj3PO58MPJVsL+eyaz9PiGF+4L3I7P/75CjgRbx6VmKddvJVxdBF8r7\r\n7SjKSszfHr8xSTDan4Qg6iAcT2O+XoWGeA2KrkxYSewxF0YE0/21HDLdzqzA\r\nGCQSP1W5+efA1p93l4mUQZJivgJlFsKmzrgn8HqMcog5dgEKnenAkxoRXgBl\r\nOcvuM+rloohYHLsH87/pThGeE2ezmB6ZYUE=\r\n=kOYk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d80879a8c467caf0f52227ec97481bf5b7f2cb16","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/rtl":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/shape":"15.0.0-canary.65c411674.0","@material/theme":"15.0.0-canary.65c411674.0","@material/button":"15.0.0-canary.65c411674.0","@material/ripple":"15.0.0-canary.65c411674.0","@material/tokens":"15.0.0-canary.65c411674.0","@material/elevation":"15.0.0-canary.65c411674.0","@material/typography":"15.0.0-canary.65c411674.0","@material/feature-targeting":"15.0.0-canary.65c411674.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.65c411674.0_1669743599702_0.9724767447613105","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/banner","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a86d36fd2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2d59122210d69e3febb099c82f9106404d540f8e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a86d36fd2.0.tgz","fileCount":31,"integrity":"sha512-v1cOeyaNrUrSYLcBWa87eWqPl9Jn06hMSdkP44ac/XgzLwbw7a2Vn2cWGUveTm1/oH9dBUL8Fx2gntGN73cODg==","signatures":[{"sig":"MEUCIBHvNjYyckxWzK2GZNKfPGPu/UJSNxIk80FO8IDpt0B7AiEAspw0Wc2fMZxnpKkwSbYJ/9rDlF1Q1+sBsjxovuhTLw4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrzBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+sxAAifTj1QTvmNUZ/YkhcGNwUlQM1lWdACxKlI2GNTcI9Uia6W9Q\r\n9tDw1C2FFvJuIG66P0PB4VSVjbMQhzeH9CxyS16CNMwIT+jPxlk9dButQVvj\r\ntDsUvJ/S+ZYKH0pH730H3gMfXFkcsFDWm4tdB80xQcavZTkQs3WWYC5H9nR3\r\n9gUc7a+ZbCmYjztLeEJOlk8KrxoOhOFpxQA5wcjNWZXZZlbOtJVwocSatd2Y\r\naB9FVaoYqIxRNItLlIAhVre4YJqWVi54v+mEvsEcjtZWYxxGylH+CM504TuY\r\nVUI5WEq7+qncoY2wW9075fRyzgpGwHfYeae2MdzuAstg/jlRg4UsoQEdi9JK\r\naldxX58FJiL4G/YEc7hnp+2mBbJcqK0piKprpcTNSVRlhH9Ntmg4mjkj4iMR\r\nmytN48dstmR5EcS/KtIBe7etAXAgjELwIldOMtUV4wXNvdDxEjKzkaBxXHew\r\n6bVRhuTw+utz5IFEr0L072tf6yNIRRpz05B/htj1iKYuCSatUyNBAbaFuKTe\r\nvxu6exTWYcvMVPcvhkGcFT0aJr8GvU8RVIPp7vkxxD88gncVWAY4p/QqU6P5\r\ntUU2iyQ0JeZckKpMEmWxytkms7VkR9hnEo6o4Iync/DrItAGBMh7BReBC/ms\r\n2i1x+s/cp0xc9WXUxP5tDQWcp5AGZS8D+5s=\r\n=8ImH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"85d3ff6d42516ecc839fe336441543c8df62326b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/rtl":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/shape":"15.0.0-canary.a86d36fd2.0","@material/theme":"15.0.0-canary.a86d36fd2.0","@material/button":"15.0.0-canary.a86d36fd2.0","@material/ripple":"15.0.0-canary.a86d36fd2.0","@material/tokens":"15.0.0-canary.a86d36fd2.0","@material/elevation":"15.0.0-canary.a86d36fd2.0","@material/typography":"15.0.0-canary.a86d36fd2.0","@material/feature-targeting":"15.0.0-canary.a86d36fd2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a86d36fd2.0_1669774529339_0.9101940425261581","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/banner","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3a1f46c66.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9ae3f57ff23ca968568d8d5fbd142f136a7375dc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3a1f46c66.0.tgz","fileCount":31,"integrity":"sha512-zRWgC70RZn8a+IVSEh1AptH3khn0J41QE+4WfRKdVTy6Jblk7kJ1uEGTbrpr1jbgQBRvZhI2d7GA7XlmI6KHxw==","signatures":[{"sig":"MEUCIBbezGwvBxBLaCXA9Esh0uiKzs4YPYlNlDgudoKqTAU2AiEAiEydFfg0bhPrMtS0tWsaFtyabwfvdA8pfHIc2eL6Dns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0fcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoynRAAluvuOVE+qSDsDjXc2eF+7K9AVs8q2N10gtvaU50AfEfy4R5X\r\nmL8E+Vdnr1g4eHTBFM3aludrls7f6Yh5mANC0k8j5hYVbU2rRiVsLZpC2U0L\r\nIfa71gb5olW6nnI3ikeLVTfC93fp8qYqpVs6mrYDozbxpG/cyQ5Qa1OaokRS\r\nweBYOHeyqkrqXHgSm8SydM5bgV4vCW1Q1BUozb5BB4OytWUsFkYzEtBwh9GJ\r\nlVUw23G7onFac7m+fwkuZmDgGKFF1LhMX8MQII7/yp0PPAHl0d2L5Qb3c+2g\r\nlCFexjh3b+GLH0TWgl2V+xG4G2ausIENz9nsmxZfaFXK5IGiIwkRm8piFV1H\r\nNhgOPHf0EOatFz0GrmNlZt/Do5tTgyEuv+59eHVRj2lLJg1Q2OhSt3YT4Whw\r\nliMIKMbWFQ9vk3oePaBDG/TzX1ZInlH6DD185HrgAFy1JE4ASgk8ZFa5sfkp\r\nLeTvXJAdnvr63itjBtHB6BilgOIql1pzPYZLLl7R9yv7dh2L/6rkEXwnm332\r\noCHZ3+2IaSfwGwujME4/oB3ZHpoBWqP0IuEM0pwg8Fxxx1H04EX6rIExr865\r\nxj+pJ15zbqOISIZH2XumIZC18L3+c+6g97zn+oaPSyqT1jp3XCfBFXkvlY40\r\nl0XbRnglSx6cL/cJbx8XM8iXzQqDPVhvdok=\r\n=XBAn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c3f9c47a1b8fbcf554e1fce6da44837b6d412e2f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/rtl":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/shape":"15.0.0-canary.3a1f46c66.0","@material/theme":"15.0.0-canary.3a1f46c66.0","@material/button":"15.0.0-canary.3a1f46c66.0","@material/ripple":"15.0.0-canary.3a1f46c66.0","@material/tokens":"15.0.0-canary.3a1f46c66.0","@material/elevation":"15.0.0-canary.3a1f46c66.0","@material/typography":"15.0.0-canary.3a1f46c66.0","@material/feature-targeting":"15.0.0-canary.3a1f46c66.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3a1f46c66.0_1669810140230_0.707399200832258","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/banner","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.32d8a9648.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"172e01fb5d55e4d74aa5cf0d4bd25bcad179714e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.32d8a9648.0.tgz","fileCount":31,"integrity":"sha512-fRp9U95MpYUpDGlpsYx/0fWFwqVRCz1/0KFF0ZlJCcZB/e9WU6abJnmsALS9/jMxs5XwXWBrgRjPxtE/kwcUtw==","signatures":[{"sig":"MEUCIF0yHxUzPWcai5ciZY0KhyPEIlUxBQ7b1KEScd74E5+aAiEAhykHpF9wt2Bnb+P//WRS2DCtCiJJt6wfy4Dkssf+tew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOS5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrsag/+JvCwTxd/PF8tluMfHclaN+0OagbQUhayvwnObqRnFQd3s5ZY\r\n+XlTp6xKigsA2k+eq7wy2TcFi51AWqI7mZRP+wNy4E9updKCj5+GXoZ1I81I\r\nwTk/HdU3DZ416raK4us3IYiLoVQluvK11vygGQgnzbv013x1GwTaop8qRT2t\r\n3KGNqqdxv5UcI3lt7BQlozViCKoV4wWn0RHP7RjucfrZIRGbHBjwh89sb8Z8\r\n8LoBW8TRJrtbzS7oER89ZMHOk9GFgpmIk71um4gwPchB+uPZUlLuUF4o58D9\r\n3X9/S6egs0zwgqHSncHRNw1lewYnAL5eA/SNaO8xXi5+PiyxP7U6fcgqEohf\r\nemNHMBxwTpiS63kSCKH/lP4kzeoh31WR4mgsM+QCFmSNd2aZ93890pQF2n3+\r\nZaLque4LsrOVihfUSFAJYIj6eSkfzeS18wAitv6DncIJjlCm0ZzLltBN42oN\r\nemCOXMwmyq09QLz6DxOUDK04NOxMlkldQ4rhH//OFenu+G9/vvkaIw8SyCDm\r\nG9Hau35EYTWrnbMJCrb7wiVWgaj+NuMYhah37dHGAm4+tfX3PQJIXMa7gDf3\r\nL6YuY0vQFxKC6ygS/xZcrvm3JfKyTk6bIOQPtjcXbhU59py1QahuFzR/o8ID\r\nAnCz0jc2hTL5W95ZaHqO8/cF+z0+ADeF73A=\r\n=Omyl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5833a540d2f362be3d86a707323bbeb6cee2c627","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/rtl":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/shape":"15.0.0-canary.32d8a9648.0","@material/theme":"15.0.0-canary.32d8a9648.0","@material/button":"15.0.0-canary.32d8a9648.0","@material/ripple":"15.0.0-canary.32d8a9648.0","@material/tokens":"15.0.0-canary.32d8a9648.0","@material/elevation":"15.0.0-canary.32d8a9648.0","@material/typography":"15.0.0-canary.32d8a9648.0","@material/feature-targeting":"15.0.0-canary.32d8a9648.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.32d8a9648.0_1669915833310_0.23129260261562234","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/banner","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.03618ab70.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37d9305234fae8a6b70f8cdcb77080171cf21e0d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.03618ab70.0.tgz","fileCount":31,"integrity":"sha512-X9IgiwX9tYWJKhtfr7KZtnPUGlRbvxsqa300/mYO1QuHH9rwILIfTfgF1vXC/Rs1ubhldECmTsIG8PyALdpLKQ==","signatures":[{"sig":"MEYCIQDMbcN5ji5M8hjgDMdB9gQGBwu3iuQdixDwZJ8Rdp6WdgIhAK7vm/Tla28NIsoK7a56XUyRc4sdCb4MajErHYIdZLij","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRTKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrE3A//XWKpp8/aNdTlPYAxwpfYWXk3I/6r1eQbAyQPs+OBP5ggSbEs\r\nJIIS/IIg5KbhqNLcWj8EILzCrwulsLKOx9OWeEZfYNhnS4NmxPvcn0dQ6Cq6\r\nsOYWz9jtmjkCyCVZcSQyyAGfTzg8jhA5miP122ZZbPWAo6q+35von6USemF1\r\nct9DysQ3RVl0ukNUddaMc/gbmvZ4KuV5+sz+sIIy93LRx1jMf2riJXmVOpBO\r\n8uEuwfQ68je4HrLAZPGLHjgPPQ8GgMqrlbmZeoLX6RH+tNtzaR/UN6qgiTmf\r\nBIhZoOFmhhs+prkAZse0jlqudkK5YHeuYyFBQIbWqquSJiHDdcqjLCEF4isY\r\nyN5gFA1+8G8iVXsfgq1pJXTnirFKWISUpBMQp6brvYomOaQ0/A7AW6yEkFuU\r\nFQZ5DNRURN6DPRdjxyqGq8cWyj1lj63m2J/Z7yvvMUvfiClHBwY0bq13P7Th\r\nYvWXtrm/T79jW+iDduqf5EOVB4Ai47bEhCBEIhvQZMqSc/Rna+v8FS0Y4vjO\r\naPfqi8O/stzxoL5WN5pZBWWgiDxz6dqVYDwUnfD6ZM9abR5WGzvisHBh6rql\r\n6QhG933I4VdisW3ZSrnuOjYk9BsU7osI8Xf6ByD97WZmklNn95aJ4dbE+h4D\r\nD/RIwxbrjTMp+/S4Rn86h4xlG4YdaHmOet8=\r\n=80+/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b7755627c14a2cf095b6ee87d1ad15c14430ebad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/rtl":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/shape":"15.0.0-canary.03618ab70.0","@material/theme":"15.0.0-canary.03618ab70.0","@material/button":"15.0.0-canary.03618ab70.0","@material/ripple":"15.0.0-canary.03618ab70.0","@material/tokens":"15.0.0-canary.03618ab70.0","@material/elevation":"15.0.0-canary.03618ab70.0","@material/typography":"15.0.0-canary.03618ab70.0","@material/feature-targeting":"15.0.0-canary.03618ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.03618ab70.0_1669928138619_0.22886981579096433","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/banner","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.68aaed940.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0871cf253781af8927ea545ab3a170d66199a177","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.68aaed940.0.tgz","fileCount":31,"integrity":"sha512-K1rE+khwnrrLFEjUhF6ggMTs5taW/mn5/yQOZJWAGX6fO77toUpGrf/QhjUck7QVgrszYgOXNmmXRZ1UwjfdCw==","signatures":[{"sig":"MEUCIQDEr6bmQvLZubxANvq2uZbTvvk3ndgnU+Te+Q1EQM/xNAIgeoLge8tmQ04pD3NrNn2vpuyHOqSTlEHVOPPqDSKYJfc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRvMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryHw//Y4d4w1LnOtsJ8EggFT3zyuAgCeUgUE21Vg2FC/4iQy2qm6th\r\nM/g+Fio3xyOYnfUktQxMnEo59SXtVRfgcZyIrKlEWMnIjAqO+YNPl2arguaM\r\ntc1n6EieDVJecE83H1RyhcAgzaZtbDxES2hbdn63PZDJwEi0V+CTOMo/JR5y\r\noCvcToaHzgWr6Ti94hptBYNrNaOrnPNMVSWgrHRv0mQ+cdsFH1VtpGezzBG3\r\n427K+8Zky2zdFhCV+uDZA9LCaxgiXZUPdyB8P9Jh+zBZAKPj9T490/K3Qgn2\r\nB1cDfc0sleVzdk9+hhRt5HbTB46IDV7VZLQHGbYTC63zbU85qHU6ludB0E9B\r\n9DPb/r90p4E9M/H0an6U5qLVxBRYZ/uSzdsciRfJRDjOTwYaFE2uIYTTMXc2\r\nbzBN01xBcI2avmACUg24HmoVZeUVIDVGzAVBDyTIwcSorLv4PWmuKo5aq9kT\r\nJ6rdpKUvqnJVCh6jkqzk8X6tQa6gy/ZLuEH5ZpWXfU5HElpcGTu+iX+qkyDc\r\ncyhvvkSo2OYg1eUPhcmJrN9AYqnnEp890nxy7S93vJv5PdkG6rJicyR9Adnj\r\nqTI/k30qWSzK69KdZH9YM/AOHa5wh4IzH4eREaKJz0J7ZvWjvHlrVFYF938X\r\nfkIPgUYcnj9Om3Ll8cMP2//sG1KaD2RPaG8=\r\n=fkZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6092c4f3bcdf41ae7f55d37c6ad51793eb8f040d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/rtl":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/shape":"15.0.0-canary.68aaed940.0","@material/theme":"15.0.0-canary.68aaed940.0","@material/button":"15.0.0-canary.68aaed940.0","@material/ripple":"15.0.0-canary.68aaed940.0","@material/tokens":"15.0.0-canary.68aaed940.0","@material/elevation":"15.0.0-canary.68aaed940.0","@material/typography":"15.0.0-canary.68aaed940.0","@material/feature-targeting":"15.0.0-canary.68aaed940.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.68aaed940.0_1669929932246_0.007002843975710826","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/banner","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f0a0bbc75.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"637bb23cee9e739a45dc471f4eab412f4b64da97","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":31,"integrity":"sha512-R+Z5Ve9X6GHJ9i698ZxKFbPF/Txq0SObewnRagYhqEp6k5yLk97kmMxJlZcVrvixFmSC3DnVGqrEBXYRF2v95w==","signatures":[{"sig":"MEYCIQCL6CkrFgdURjvfvPFkZM1M2bqBYIF0sLyHah6Om2tlyAIhANEAiKorHPVeZ3vA81Uus0F3sOPVmAlsZG+k4JK6p3Hr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib9WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmribg//Zv0xt5xPlZukBfcoCZFhRixiHX9TlP7LfhmdZxhEte9skLEj\r\nQAjSFoVdRnPhNfzb/yS5wP40J32FORL8Q6PkD+lVTxuKvwia8eaYVZ2N9us1\r\nYg2SHqAVcLppeGIlfW7DERybl4M6Nen2Dk+xxA7xWOSqL0rd7Ongo1e3O0Ln\r\nlBcCumqjr4bHiVZTwPThZtCA0HAd63IzqQjwWMyJj1A0wx/MH3G2c2DMDE6T\r\nn4R0i3zBUeRQGGMWgbIuUTwX22rZDGnVI+L+TpQ5TG//lg0bHqy8y8JRxDaR\r\nQpzTCrcqxi59djEt8nDJrYo2bx8LmwSeaGPhqkv8q0brTDScgopyyyJPfubi\r\nX2l6jmwXmAo7AZVpb7nZmgCwQSzsdTDWx2P/hrNXpSk+9oNpfrbsq/6YXZ5s\r\n3+6VRtixgkwuBJVg+yCarQip0Oku5Y4wUvYRs7wAegnf8VK7NKYowom0vdTV\r\nmU2ornDhbUiz+pe6WNdmzQrxloJiKwtJNM+Byikn7uxRq6iNLAiQFvp2smkX\r\nDXp+71iVts4d5f/tK6nnxQ4FTCYZwK9Hk7gqvC8FI2XMuCQ1if9MM1cQOptQ\r\n0wLD4u0xl5yDQocykb36k/RDHmzvaPOFRbGQY54JEF+A31Pe2rbRuJyOEjb0\r\n9mumONjObKpORxO3vVzT6GFb2DMvBMQXTTc=\r\n=lnXW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5111125522be9e3847929d9bbaf323f31e9057c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/rtl":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/shape":"15.0.0-canary.f0a0bbc75.0","@material/theme":"15.0.0-canary.f0a0bbc75.0","@material/button":"15.0.0-canary.f0a0bbc75.0","@material/ripple":"15.0.0-canary.f0a0bbc75.0","@material/tokens":"15.0.0-canary.f0a0bbc75.0","@material/elevation":"15.0.0-canary.f0a0bbc75.0","@material/typography":"15.0.0-canary.f0a0bbc75.0","@material/feature-targeting":"15.0.0-canary.f0a0bbc75.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f0a0bbc75.0_1669971797983_0.4758367991996788","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/banner","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.dd99c8764.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d973c773acc0c09675def25eddf9fdaef2a0b075","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.dd99c8764.0.tgz","fileCount":31,"integrity":"sha512-BYp6yOBsKkaxHeGfMPrgs/Xa8FPYN7My0xDqNweeNZN7paoey/rk8Qwgd3I5oRAk7H5mcCIzIgVX4Or1A4hoJg==","signatures":[{"sig":"MEYCIQCC0IIfWWTSY4HIahr6CpV52t2w5tg07NGM4XaZzZxWygIhAJVm1olJIQ2fQ5gnvxGesp6LR+KBHw92c6Icw6+LjYao","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigVpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEjhAAnzzcXmpgikDJgzqsiaTwRhy/ve/LJrRyUWwZYCZiebW7bzw9\r\n0ocY1NoyQMCPiNMzh5IAaKRw5mBTA2OEDUPu0mpFY4t5BmiRrHLk10EkdR24\r\nuLLh6eGheevQwr20wzAwgvNtPSl9npEeIxp2kXSF2SBdTvCasJRni+4bg6Mt\r\n1jDSy5GxAZFH9nxRRdMBab3z8+IRopU2/YZ4DILN4g7MOeXfcY6H2HL5V8l/\r\nmcuXkl+ZJbxIOGBKXJ/YzZpy6IQdzLfnGHFbbTbF89bLsQvw0rDcx0tUDW/N\r\navPZzlzvYgLQLqIs4tbdtBJlKyL+A5DtrI8YanfkdWeHCCd6LiwywW/3CQjM\r\nYX9jMBCSxRuzMsvBmThtXmE7XYBXYhw0yYBr9IgxHowdYJHyMIg8iodIMvD9\r\nemFxwJTtcWp2bH1tqAKswEzjSYgRDzYO5ust6XOV6Ce1mLc+8x4rRK1df3P8\r\n9mt6isjs3ZpqMR24UjocFHUdOjc1VufjsHcvEgLz/OkfKMPDw0FM+cnfNq4n\r\ns5Bjm0Rfogf8prrCnpouR2r4xsqeqQ8EMPX0f0KYtreDizoTkdO/PERQ/V4c\r\nY8LFMmleJe31wHsJG9tR4Q8d0mdX4LBn1o5xTlnsXvt5UpQNtMAEczMutyEI\r\nPcpzn5DQsvEOCLRGI2pHZtf8Vx5jLz9/xf8=\r\n=9iSB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a9ff7973c7dab53b620d5be8d56e0c491cc5e7ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/rtl":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/shape":"15.0.0-canary.dd99c8764.0","@material/theme":"15.0.0-canary.dd99c8764.0","@material/button":"15.0.0-canary.dd99c8764.0","@material/ripple":"15.0.0-canary.dd99c8764.0","@material/tokens":"15.0.0-canary.dd99c8764.0","@material/elevation":"15.0.0-canary.dd99c8764.0","@material/typography":"15.0.0-canary.dd99c8764.0","@material/feature-targeting":"15.0.0-canary.dd99c8764.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.dd99c8764.0_1669989736872_0.33806955807809524","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/banner","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.fabdcca3a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8a936b4f21643f22ceeb8d5dc5213eaebb56c7ff","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.fabdcca3a.0.tgz","fileCount":31,"integrity":"sha512-Oki+AY6oSCgd7sK/dr0hyx8scdAwK2K7CwxpdAbezcBerICyzZX9B341+DooRl+JQvOffnsBaWVdFsSdgAlRbA==","signatures":[{"sig":"MEYCIQCIjcNhQSUshtIUFd77b9fmZwQBYAmbYzHYCztcO7SwjAIhAJHy7E+yeliy7epyks19ZywMVtACPLEl10xU3oiQcKj/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihTZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+zQ//c4dCkwYFF5N7uFNMDu2YzEPT+/fPJLlGFQEuqjTHMDyaGME7\r\neeyvm1HLWZ75oLxL3bBfTEuDztYFkK67JJhMq1lVwKwjUILTgqHEY7LH2qoo\r\nD+hDKAox60jyWMBk+vgPnhEP9Vs9QCpAvTHiVZqtl3PAAKK753WKQZSUPttu\r\ngCQCQXlWeRlPYB2XGNhzjvG1iATJpfUcFrBk5jHePGO3ffzjyn45QqGtg1mv\r\nWQnjHUazhRxQTuN928GaibWRBZ4pDIyDbNmdwcNjAz2omw1ANHN+USMUFhAP\r\nxuBz/zmT+lRZNVYe+QdnzA+ix4Za8z9OabZqvFMxzMlwlvTrJMUX1yHL4UMp\r\nZpcyJwmp2qurOzVt+AMEEK04QotFTYcp5ir4K0AIbQTf2l7CHSG/Vz14w3it\r\nWFADftttjCa6HpQBMLs/cGwlFMfFeIvV4JgiRSpIhjfWxJYqrbo9jnfwLKqt\r\nkqoQ4sNjX9qtS7/Ll9O//AW+aTbqQQBhVtfD2tGPv63nQ1KrxemNa5aTZKZe\r\nXwnC4H0+PZMPt3wUF7R79y+MEDgmJJzKsWIAY19lXvF0u3f9Pr6NCp6vzS8b\r\nV9XycujncyICATU/1fIYYUbJpXSbbhINnetF2hVvIi51OVWOVDovBtkyobdT\r\nNppxtHylLdOyW8AbvvMwmKqX5egf7CZ61uE=\r\n=15J0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"18ea36a1261419acae3218fc917dab4ca111bb9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/rtl":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/shape":"15.0.0-canary.fabdcca3a.0","@material/theme":"15.0.0-canary.fabdcca3a.0","@material/button":"15.0.0-canary.fabdcca3a.0","@material/ripple":"15.0.0-canary.fabdcca3a.0","@material/tokens":"15.0.0-canary.fabdcca3a.0","@material/elevation":"15.0.0-canary.fabdcca3a.0","@material/typography":"15.0.0-canary.fabdcca3a.0","@material/feature-targeting":"15.0.0-canary.fabdcca3a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.fabdcca3a.0_1669993689188_0.5648618542227459","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/banner","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2d26722d2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"755dbfcf06c537a713b77f85d848865f9f2ca254","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2d26722d2.0.tgz","fileCount":31,"integrity":"sha512-LMVQjN4H8lx9uFdTJCAF5l68EdEn9bhTA1Q9j8l7WqaSPpx5GN8rlSeqg/NzWW/zr5djsbfcHQYTRRaofB0ygA==","signatures":[{"sig":"MEUCIB6ya9Uf0qIkRLjSP6nVDYbUHLnK3PW5/GrYXWjCJsgGAiEAhLL9Z568yw/ZnuVArcptQataUNlojf7PsjUMy9UZESk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiieLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpL1g/+OU3Zs4HeEdiMxrtH0HWUEIFsV7hIy90+Gr5B9c2iTp86yoEl\r\nLXqUAr2x02+qM/WY7ZzuNh8JXYqAAzffMYIB+GuZ32y/JkI4Eh9yT1IV89HQ\r\nFUGydflC28Gkw2pmFfL+mIR9+Ui6NbYdX5ABrU3gZ5gjw6r4UXfT0Uk9yPWd\r\n3XdwXPKxhDpCnvWhe/hQWvqkrdTcAWC0U6mKX9d/ovsiN6sNVdew4C2n2E6W\r\nycbDnhXHc76BJSPZu/BEZJS0f//LX3mpyJDNN8k2RGkRqREgKaqI79D8Mht9\r\nt630kzHzZk1NPqHx4HPvTbuqE6TuZTD7eNRrqP+HyUS/SIeBX6Axkkl7ek80\r\n7wJYTlPrOie/v564ULKmPaQHYXsRQ/2rgtnjW5Vh25eB+IIeoIJmkOjX0u/G\r\nSCqdcaOYMb4gzAYT4DgFL5/sIBdwJAJN3ULifXe4PQ30BE61AHkNfLTXFnCP\r\nUXqcDL6B4X2gq7pzo17sgW1K7taNq7jiBC46JY2xMq8Q2DTHNdNwEmzAPXl7\r\ngV+i4+S/XX9khe8J8PLOSw5N2xDfM6xqhmtkzgdU/JANit5nVqqZoK7qH739\r\nld1xNXM2mMIzUF0Damn3qTRxg/T9Z54Q7lsVHmbZ7isjWW0h9WqDfgImKRSh\r\nZrXvhfcWwG7txbB55zAA8JM5MJydZ5Gk11A=\r\n=7GyY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"76df2659d7f71f74a86512b38245422ca356fe12","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/rtl":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/shape":"15.0.0-canary.2d26722d2.0","@material/theme":"15.0.0-canary.2d26722d2.0","@material/button":"15.0.0-canary.2d26722d2.0","@material/ripple":"15.0.0-canary.2d26722d2.0","@material/tokens":"15.0.0-canary.2d26722d2.0","@material/elevation":"15.0.0-canary.2d26722d2.0","@material/typography":"15.0.0-canary.2d26722d2.0","@material/feature-targeting":"15.0.0-canary.2d26722d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2d26722d2.0_1669998475073_0.7693053170406785","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/banner","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.eaa0c3a86.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"584b58cef564313d47ad07dee775d8092f27e2cd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":31,"integrity":"sha512-p+U/JRPKwh5Ud7A4ufiRoZV2MbKnaI80wdkKb0voaGNwM4MLk5l30vKdkRj0cUrlScOpAL+BGNdgOmYGkxenWA==","signatures":[{"sig":"MEUCIDFZBZJHW5N2ISSmFjOuMeTXyRQOqBYgKc/7sVkc7Q3UAiEAmMJIKQXF8KwbYq+HoNaoVhvjR/wpHGJH35Yn1GZv2Gg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijlfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZHA//bQ1Rx5A9vgAITUWE5qZl6aqMVAuqoGPL6oPNwSeGfN4mB6Dz\r\nXddfv7P4XGbjbiV34GUjIKAVO4/QLeeG40ZcS696vVkBlg1dxWz9fbVg3Qti\r\ngWsZW4Iakk/fmnOTeSbB+GFMO03CPegC1KK1qTJpDKeuP1MZQQ7E1086BegF\r\noW1TUAW/c294BJaVtqRX0wZfAl+uPW5UAzFPqou5yQ/01qMBfgz02Gk9SYto\r\nmOyPlOcfISC8GmpexTYb2jq9DjZvHm6wSZqiROaqGZNxi7TSAtqDvKib8BGD\r\nPLib0VUquPIcw+9vf2Q6NQjSLqdpNM3fXQqBOrq3j90VpPYEG5UJoXE1cmIv\r\nNs3DWWxLjftY4fPCalKqkPp2sibJ/0LuiignpXqNj0nRZ6sCyMa9Y2waL46v\r\nCwvB2hlew7YMDlVtiItshOQncCBnd65i9ZGY2nQfb57yYOQhds9wdFdpQ14H\r\nLEodQ3RgxVWMHHedfJRvOemiKojwiJIuEKx4g8X09yOb/c3SerascJK4CQIp\r\n2Ijb5txcV+iDiH0a+KJ6nbEUfcFBBuHntaRQxk5LhxtobKbNFMRJ2IuwFItb\r\nLL7f5lZD8efD6WM25WAAqaGvI6XdNjd7fPHi6SNdUmLOTRuYzzP4dBqS1KTX\r\n/mqnL6YRxoXxA5gQubTt+KR8lCn7EyI8aH0=\r\n=3YfC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c54316c7c60bacf8254758124c9235dc48d44064","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/rtl":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/shape":"15.0.0-canary.eaa0c3a86.0","@material/theme":"15.0.0-canary.eaa0c3a86.0","@material/button":"15.0.0-canary.eaa0c3a86.0","@material/ripple":"15.0.0-canary.eaa0c3a86.0","@material/tokens":"15.0.0-canary.eaa0c3a86.0","@material/elevation":"15.0.0-canary.eaa0c3a86.0","@material/typography":"15.0.0-canary.eaa0c3a86.0","@material/feature-targeting":"15.0.0-canary.eaa0c3a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.eaa0c3a86.0_1670003038815_0.5469480154327004","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/banner","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.79a613bbd.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a4c2c73d5a18111bb6ca241582944def950e368","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.79a613bbd.0.tgz","fileCount":31,"integrity":"sha512-PC7XmOMCAJ2ezzYgiLTphJ/zwvpmbLMCly7EAZLDSL0m+YT3Jq6zsYVYpVWutkcXmEu0GOvrNT8hmPJcODkpXA==","signatures":[{"sig":"MEQCIDb3A9PpiIiUj3JTYBnQXWLCeFQMVY8B/5wETafyYAx6AiBfusDmXDImgSm6pjJIeJogSxWElrArPB3jYHgcLM6Q9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1FAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiAg//UBK4etIMHVDjfVhTZHIlzeNzLtWFFmaw6+Rgn+UHO0DijiGk\r\n2RyXILS8DXweqvppdY9/HSJBFQ4TmfEBUEOJrWoYVRPm5Y4W73qpZGcZu3EQ\r\nVHpo807d1hz0tguzPGIseftCuLtlG/Xde4v0qw1yUxdF6du4tNXcbhqJKqvO\r\n+YuC/RdS1Vc63SI+SKo8HFy3PqIhoQ0LVRExdXi+2SbYQCrzsQzvDeZbJ049\r\nKY1VrMke8rbKAN3dr7bbvaRsGriHmJGdrA+YZ5TjombFTtMd0wTn80j71DXU\r\nAYSikIIYBRJl7onbFY1+jvh/6ofDJ1tF8N7jPBwIUhK6MwAYG3ZDXTbvjk07\r\nBPbvOu8Y1u+L/2ntdCdaS439KSn5m/4bQt9sA1NzGlUmylBkudyrqhAIgOBc\r\nRCT1MIWffBPudsIrJyH/RJJJDwWa2MKNu9zN4xODEondeDFRumzHLS55y+zL\r\noPYdDjxPL1MgzsQRXclQp2GgQD0hMfpGHtR7YvKndRQrszlrG0yD0mfleiwh\r\nOFU7XGVTewCTtx7ruG/+Vam++ZDgv1tyqMoPnWLwzxkeoJMEgLjdMVb7Arl4\r\nh428U0RmOeyEFPtU6G1Yqf0ZRwbSy6ulRoC2leXnDnP7xq3uJKr8SDu/CNZL\r\nfRCKkFk8c5ketYA4EPbTKcYISnrz/pCw9Eg=\r\n=S2DD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"755ec1ef0b2cccdcb0c8b888d199b4748e3ba10a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/rtl":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/shape":"15.0.0-canary.79a613bbd.0","@material/theme":"15.0.0-canary.79a613bbd.0","@material/button":"15.0.0-canary.79a613bbd.0","@material/ripple":"15.0.0-canary.79a613bbd.0","@material/tokens":"15.0.0-canary.79a613bbd.0","@material/elevation":"15.0.0-canary.79a613bbd.0","@material/typography":"15.0.0-canary.79a613bbd.0","@material/feature-targeting":"15.0.0-canary.79a613bbd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.79a613bbd.0_1670336831970_0.7381761593140073","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/banner","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c871fe61e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cfb895e0b8395d0b3cbd23740f6ab7aab19851c9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c871fe61e.0.tgz","fileCount":31,"integrity":"sha512-s4BJArFaGrpiYnW0Mx7dhwfDTgyOh5QfTwwKLlk8kY+4yu+xB+sevOWAWLkiXhjca8qdbG6iDBmo5lTPJL8/5g==","signatures":[{"sig":"MEQCIH63vtPsr1a75aM2n7zR6gvaVy845+d6exsqu43thvlhAiAxnhMJeCwzR89RztzqAGX7uYp5XssPORwTTlmasvAMSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEZjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzmA/9FAAg5YwTf4EzQ9GAG1xxADCGjyvzK9XqATY6iflF6iLoUywE\r\n1+bJxse4vPA3/eLunp0IKRFtDUFA3qTE9qB9tPUw6bj8xmG48rpA3Jkn9EYi\r\nqsZdtWcMaUritrpxnd3TyrgEe3WUCQKnqYmFdHwsuYh4ZuCYVDjepuoLSa7N\r\npNMi0dnHwxEqyKSqrYtHiBXIJufi3zESAgiKuPKMI+xOnINx2sj6gF80BbQG\r\nMZqavvXVtnvfFU8uF+wJFjsNNgt+39SfALU87UEBtZJjuWw3tNPLpw/0Q+7A\r\nRtkPKN4vQes2zYoXSamxkktq34cZxr9NlzbMh+S+BWXDt1nD9BxbpnLCEc2F\r\nxgCWFB4FRs/rqzKB49I3un0APu4hR4v7eaQZYc/eZL/gOQjAbfCVsv5kTjgw\r\nG/s90JxI9P7K3pLzUkqjOrDcILTWxaO2tbD9YuMzuJ6OEUKNY571Yu8eTQ9y\r\n8FhszZ4tX+49o5Rcj10NQzl6t2Mme4qssxYZVFvHclaIoGsP4Hs/7G/fmq14\r\n071jKaRvgMnRhwtU1Bk/S4Q/PDOLro8TFHP8OcN1NEQrrawb5/FGePbRu6hE\r\nFQWLtJNKi+1qByB0BJ5P/28WYTRSal/rcLaKA4RLjtdJCSG5RSbLcoUiDSfP\r\n/q7W0j7+5Ovvd4WuverwGbDqD9hm9OiB8sE=\r\n=gtn3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e69be4936d1304c30ff7b83af8488b43c0ad5fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/rtl":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/shape":"15.0.0-canary.c871fe61e.0","@material/theme":"15.0.0-canary.c871fe61e.0","@material/button":"15.0.0-canary.c871fe61e.0","@material/ripple":"15.0.0-canary.c871fe61e.0","@material/tokens":"15.0.0-canary.c871fe61e.0","@material/elevation":"15.0.0-canary.c871fe61e.0","@material/typography":"15.0.0-canary.c871fe61e.0","@material/feature-targeting":"15.0.0-canary.c871fe61e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c871fe61e.0_1670399587281_0.9290050021846712","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/banner","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.9eaee7936.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af433fbbc34faea3ab3d5422da716e7d73cfadfd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.9eaee7936.0.tgz","fileCount":31,"integrity":"sha512-38u+RAXPs8Nr+Orgdy+12Tz9olHwevVExY9eVd1ybeO4O6nHndNdkUQs4W2PtT1KxMMRRxt7PpaBDd6cUpxw1A==","signatures":[{"sig":"MEYCIQCLhGk/GlNCVuxKjLbrfIdINfn0MjotllQtXPG+sorpfwIhAJIg0yfckCMz9NAIXs7vtyomx3M74tOqeQKDk6cMujEu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPHGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5VA//XomX3g4V6RpRv6lthIpzn4pCGZ7F/XYhyXVXknzC8tz+Qehy\r\nGIy4WEdq0dBs5pponuqIDAqGh8F/xT89sbMCLPp9NZgVxQlLBi0jtP5du8vu\r\n8n1h+ncbggX4cHXpnDuYAx6S/eYdAMF92jmGNNhTPj/Jjk6MmOWwMouM0chj\r\n+FUPiFY9C5WbM92K+85PDWm/JJ4uwX3NkkEBj+4KlRshjYIp8utXq+kXeAKX\r\n+dx6nfDMqf6Txo1n2LnZxp60wBajGaHafuVwiuiJK9TmTKEprkpiTkCJQgUn\r\ngNeHNDSrAiMznBY3U3vEOdPnR1aXSapf1iplmylocPbzW5nRvhQNLTD8m1eW\r\ndm0PoZemie/liDodXhpkZnGtj/CYAT/F67UXKsGaFCVGMnd6vYoUkv5om7RB\r\nogTqIMtY46DLcpUU1GRMXpTzFbPN46avpkhH5mtVc3JTd8hGMJ5kVb/wCj2o\r\neSzlprq7k+QlccstcCR85/07G15zAo7+/0iVA1aFj7f1T+WIkFgvEnPYaa0Z\r\neS/dKYy8cLsSV4hCcLgboo8HYnDbUhWBYo5meViVk9d/UIZY0zS0p/jz5NMk\r\n8PkOYg67ia9aIE6QQa12ncdk+rpshk7K39X0G9uUYLcu1ocQm3sm7IpI2FNh\r\nsEVynWkpJJ6X3O+OqplfOtZEtowQPWIyuoQ=\r\n=RxLk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b1b576e68a716d1a80dcdbde7a572c11ca937fef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/rtl":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/shape":"15.0.0-canary.9eaee7936.0","@material/theme":"15.0.0-canary.9eaee7936.0","@material/button":"15.0.0-canary.9eaee7936.0","@material/ripple":"15.0.0-canary.9eaee7936.0","@material/tokens":"15.0.0-canary.9eaee7936.0","@material/elevation":"15.0.0-canary.9eaee7936.0","@material/typography":"15.0.0-canary.9eaee7936.0","@material/feature-targeting":"15.0.0-canary.9eaee7936.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.9eaee7936.0_1670443461709_0.5352008216243003","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/banner","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1d37bf601.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dee82d51f8a43ac581540e1019911da41344157","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1d37bf601.0.tgz","fileCount":31,"integrity":"sha512-rvCjl39vu7RDk17IneKQX38QJ9BcjTbZx3zET1Xnuh/Qft5ROg+147oXlKaFcvmOFxNECU5D4czdXaqAiZDQow==","signatures":[{"sig":"MEQCIEExCiZlcHQllKuLL1j3uJC9k2SJjzZEvuLlytzQy640AiAG65vk1cVhFGFwRB4lm/FRFZSH0jsSw0X6403lFwIZcQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPq7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpexQ//Xil2HiS8BHuxz7t/7GvpWLm5l68ueGC9/lImaJ1heiqz4BOj\r\nzWBRUNlPNOQagGvTbFsU0K9vcG4mVf2YKQZyZJtCz5ZMZ1G1hn+DZbYV2ZOd\r\n6CoNkTh48Mziau7rbODP+4jZqSJJLjn22KZIP/td+duPrjdrYgSvjJYuX9Ev\r\n1uJD1OwErc9v9hfM8lSa3HuaG8U/vsEerSv+VFDQEwC+vpz5URXQH/rokUM4\r\n1aSS6KLtgQbcsOdgbEi46RMVHiMb0LLzcUSbuFIyPw0YEXaM8vhDx6Fznfx5\r\nameauqit6nCAcq8iZdnRamx4/XSsS5NPQGUrT/MM/f5gK9+ZyNDY2GwmdaJ5\r\nybp+cPAq8oWZXehMbK7ENlryz5zcpowlkAsCPpQ48ZCHo93wu9maXzX2Acpi\r\n+JdH4H449zSyxHiZqbSazNs4K29gI70mmST9WS+kAAde8jem5ryiPZ6CZlpQ\r\npsG17gKZy4CEoWqWzr6Wbkz9aLqH82I6ms8QanuDOshR/02HgIsfPF7WsxVL\r\ni8prs3tU5kVSOfYWxs7AT38kJflpznmzFuj0WwBNprFso/bepLWYQC2YH8Um\r\nrY9Y/KwkWju1FriheLzbq6lKx1QYZlo1k+ubzOZOH1snnb1FXpRo5QLL3t/Z\r\nGrIhEbGhj6qHzZ1H7t0/lYEIm3aJ+2OJ3Pw=\r\n=Qr+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"747a03f19fc88f7a2358a382989e729013e06df4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/rtl":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/shape":"15.0.0-canary.1d37bf601.0","@material/theme":"15.0.0-canary.1d37bf601.0","@material/button":"15.0.0-canary.1d37bf601.0","@material/ripple":"15.0.0-canary.1d37bf601.0","@material/tokens":"15.0.0-canary.1d37bf601.0","@material/elevation":"15.0.0-canary.1d37bf601.0","@material/typography":"15.0.0-canary.1d37bf601.0","@material/feature-targeting":"15.0.0-canary.1d37bf601.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1d37bf601.0_1670445755090_0.17319801614438401","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/banner","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a5fe069d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6ff17899adf287aad0b5aad3e3b310083622e388","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a5fe069d5.0.tgz","fileCount":31,"integrity":"sha512-dVSMh0AOdLdoclpbRzlHW+2NbKVBkWjeyfLdrVz1r/w02Kib+PspzUPiOO4D+RfTbyXvQtgvUCamzymn0g62vA==","signatures":[{"sig":"MEUCIQDvpNNs/Ph+PkuIS8JXNBDXhA4AERXqXJmsU8jFuPxJawIgSHQ5ZnLaFxGyyZseH+QK5yrx3K9zQjNt7lsHKDRY9Vs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4JaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoljw//YJ1RT0ZQsBnB5ciNd7txaLBEC8zV4s+NydVCO5EKjiR7q2Qy\r\n7g7ZvRO5QKy8WJdfD75xIHRVphQSn7QxrX02l0O+X6o0yURfxDMV2vEmMmPx\r\nIolAdqlfW7unIPSmEDi+qle0gZs2ER4YhQ4xYWKUw8Cu6DspAIbOqvNn+CuS\r\ncc0TH41y/7MTbi2B9Nzsdn9V0lMXqkMnDOlpcoYIOgCvBzEV4FpqOgEr3xFQ\r\n8Z1t0pFd282Yg79m3CnoHzBWaEhVXXZjG/blwpsQrrBx4IANjOir/rPcoX+B\r\nUKcIfwACrdliJR6MN1VwhNlodDAHj4Zcd0dPtz4U9uv8ENa/LVsBdoqViUGk\r\nzN7HnVgEpTe+NmbM2Z7Csrgu5SuUvfgi7oKKLLJ5mn/L/KkHSCG3t8NEMzmh\r\nKmKMn6v0zq9yaw5yF5RGoP/a9O2oMZG7PSJ4mvwAP14r0359rUzcO5Q1VMHc\r\nMs27KVTjEENWa7WzOos0lEU4YtQBqvxxBK3hKykO0lYiIv9CETFqvw1cGj67\r\nLd7UouNPpysGyZFJiYxmlY/l3y/Tod2WoHLMyqctuG3VBL0BM7zKEFtAsHpD\r\npQbeyfqzQhqYeKuYQoSR8ED2FKWxh8pfMkM1Con59I671pQUY9S2/xFe0DRg\r\nEC2QA9723xBIVvHQXGSPvDTebC3Nr2S2gR4=\r\n=XQ1t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c41dbe93704a7d03ea10d8f1b4de13fb8c6e19ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/rtl":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/shape":"15.0.0-canary.a5fe069d5.0","@material/theme":"15.0.0-canary.a5fe069d5.0","@material/button":"15.0.0-canary.a5fe069d5.0","@material/ripple":"15.0.0-canary.a5fe069d5.0","@material/tokens":"15.0.0-canary.a5fe069d5.0","@material/elevation":"15.0.0-canary.a5fe069d5.0","@material/typography":"15.0.0-canary.a5fe069d5.0","@material/feature-targeting":"15.0.0-canary.a5fe069d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a5fe069d5.0_1670611545783_0.7585015767434058","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/banner","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ce8b5326f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e1b716d807c733d358967fa602d0de5287ef503b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ce8b5326f.0.tgz","fileCount":31,"integrity":"sha512-H/tE0f227AJgX2nVqXa1P1S7hps7kIi4IhQkdjJv0Hz84qgqolNf/dnmvaQ76br4Wd2Mc6qW3iKeLfdJKf4/6Q==","signatures":[{"sig":"MEYCIQCuRelHNTlc96NiDsqIkjgHzOKw6Wa9gSpqhEVrtkbKowIhAI5TuFlJ3arA5lAZC3zT8F1eNV7paLKiPST/1Yk0LrrB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8V0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhvw//VtY0Gzf5UsxcTBG44SugtH0qe/TMlWJDYbrR8+ZlSfHElNxS\r\nSfv0np7sG/lfoyguB/2LJ1NtSoxVTipRhmuHRHYssFyNhZNFTA9WPS5FSxa2\r\nKCna5WRC4kBG207dO/ihjyO2r+cZvaTIw7BqVLfvWpDlnvxu5PHFyi+zzsex\r\nkFOvdhZggoBCgXseGR2JvwcWgZJhlKvWWupTncZNI5mIGoVuGf+nLNFCjrIg\r\ndn9JMLW4FRUg/s9y5tXiBuMhzDUNTmf+5l21NFitS612WQsgZyP/Ss+Rhkyl\r\ndOJM27XdDwvare7kgfk1fxUaIhZ4sA/G0qGwcXzpXawT4WVtwBTCYxuaSFGN\r\niXdOWxWgW0Qg4o601XTQqRZyLT17zML3UQYilZkol+QIFehFH0L9ZxuNUhaX\r\n4J2YCbpQc/qgLvDg241zRNuk5gaIR2bc1u6tXEfWtiu6QYvn1ltkIxtqyCwo\r\npbFs2sNh6ckgn+s5IvAEtIIKAbdh1VFgQRAD8sNSKbISHiR4ENVv7y03AO6D\r\nhjl8gtaxGNAhFk4W6oXOFj+7FUZynEUokpCbvzfGTBJGGKx8VRG5u2sa//oH\r\nBqe3LWO0cI5CwpKluozPVsxvv4FVt7b9Gc2ZTFdC1QUDA3W14kePrVaUd18s\r\n3Kf7nvJIn/yirFyfAenNxDQ+QQCEYGLagJk=\r\n=3QR9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8ff7f9974a16b8178376e943748356193d364587","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/rtl":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/shape":"15.0.0-canary.ce8b5326f.0","@material/theme":"15.0.0-canary.ce8b5326f.0","@material/button":"15.0.0-canary.ce8b5326f.0","@material/ripple":"15.0.0-canary.ce8b5326f.0","@material/tokens":"15.0.0-canary.ce8b5326f.0","@material/elevation":"15.0.0-canary.ce8b5326f.0","@material/typography":"15.0.0-canary.ce8b5326f.0","@material/feature-targeting":"15.0.0-canary.ce8b5326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ce8b5326f.0_1670628724023_0.6698899809582533","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/banner","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.43f5323bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6b4b099296c67fb10f43f9de0ab591d0129bb234","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.43f5323bc.0.tgz","fileCount":31,"integrity":"sha512-FYyNH3tdshZCc15mclqEwuPI9+kBc3RvTnGWLm3ly7WCVBvwJbFqqeN2b+yQS3pImRRF8RK6Kcn82M0/CKFs1g==","signatures":[{"sig":"MEUCIQCj6T+kteq3FR+ceu8EPS+PAlBOcQb9DNqGny/Tw8LP8gIgcVEERdULqfpTf6ZdqL/mnh4Tmfrmqf/CoeYdrxKjUxw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1s5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqTrg//bEPK+jRuLo+heB09vRLqJVprThnTjOnTW64ETA/CNPhFTqgT\r\nF+P+Dp826xg4BOjONcLPRFysGcx9tsjLGPfxIy2crT3eNljnuJRXJPkFQNNI\r\nwNp7I6jw7qGPbnrmtVXp9s93P0OiIXfjhoD3RfogR3Ftk/6dXzrFjXz7clO6\r\na//Z47s/Vk2gaH1EvpKnQCwUQFyPZBfZCeQvaBHoyzdZyGBgBsjzs8ZW48ig\r\n28WwgffaNlmz/Jem/rCOf7bkQzbrjyerVyDW69DguKdGnHEZuq92K3G36hiS\r\n4nmsGpfgw7eie1pO1BGo0s9o9rJ+quknw2vtqzzwnXpSt/LLvzwEtBcPgPXo\r\npfmzqp5jgdHTI+dSYO+XWNAZYHWdo/uK7WVkZzhnTSaulFEpdIAuzK8N8Zj6\r\nI52/Bs2iG2eqMVi2QmQV2VLT45G+NalEMUuYQc8MXMRAGk5UdZYuLTcwK094\r\niiN44s/Luq6sOdcx7+j6/9mFNTOOoDfMaa9hcxVcusviGnpoE6igNgmME31v\r\n7ZcC9jLGdeJU+4qx6BzH3O1T7+x7UnM7qoilTZvAYPT9XzCXGoMTZVUGy7y8\r\nm3DBKWE9bBvgot0zha+q1PAABgnLnOSlqTnJBkAxEwNvtZG4hQV6pPiVA4NK\r\n5KVFmQ4WSnH7IvOqeeq2rk8xP7bzhn2gftA=\r\n=Wc30\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"00be798d56184d5daa74ad6f53d4992db90688bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/rtl":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/shape":"15.0.0-canary.43f5323bc.0","@material/theme":"15.0.0-canary.43f5323bc.0","@material/button":"15.0.0-canary.43f5323bc.0","@material/ripple":"15.0.0-canary.43f5323bc.0","@material/tokens":"15.0.0-canary.43f5323bc.0","@material/elevation":"15.0.0-canary.43f5323bc.0","@material/typography":"15.0.0-canary.43f5323bc.0","@material/feature-targeting":"15.0.0-canary.43f5323bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.43f5323bc.0_1670863672888_0.6616546142262476","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/banner","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5490e32e7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"017e00ca811345e363e22f4273c889a8be20f590","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5490e32e7.0.tgz","fileCount":31,"integrity":"sha512-vtpFNEntkokqgGrxyWzsDHpaqBllMH8A6SfkhLMLEwyjoXTeJHYMY/V1UcQIYpcaGmiQ/30RbxUPeFkPxQKyTw==","signatures":[{"sig":"MEQCIEpVJ0LPBQN9566Kh/Z9K37OhQDPzc7tyIPH1Gda6A+7AiA1xALmgDg582RDCDqfzllPCrRJwb7as+BaFS8T4reRNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl17mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqbnw/+KGP8Aw+KLRKpqErZATIgiUfVnaLYyexaXU7w5h3XZh8HhtU3\r\nGelilDDNtEdz4mI7Mw7QqTCDrUM3YHrsfvg1daVb/L9tuviN13arDHKgqdyj\r\nHW+KBU+SPpOl6V8kwZrXTHLYMrxcynZrQAxlNRoJGHZ8HUQCMDXv061Rl6Gy\r\nL40/IVmD2uqIkAOdHEqkmHH5rm58uvm7MUfPOQiuRPvt3O6CifykejwdkPCc\r\nimPo+Q60WfcnVZCD3J+k2MrUJKgFdpjcyWo1+SfVytWmTJk6QOJ8vZ0NNDbH\r\nhObo5eyNy0e9p5GqDc6y6WPrAmI7hvdoUnrkPnPgww0zug5iaCX65nM+QxR3\r\nGFtnSATIuYVZdM4M+Yf6yaDq7mpgNTNZ7oQhW9kWN7ORxtGEHMPc9lQfHu8J\r\nBttpBI9IdXWH0Z4rhdqCb5N0Lt1UzLDJT9Mt1827zQKr4OejZN7DkwVXIGXc\r\n1esCjVxUOi+biDiSyH/OYfbLmdvnO63njl1y09d7vaaNHy8r/+j/VZ1TVwQB\r\nvRlg3AtxCR6b61ZsB8RP/AOm1nvDMmmCVOwpWfiGwXAqDzOF1KQhwJT8Qd+b\r\nYVuIHuaeHPa9RkDzihZ8SHh20mMFWTjkrplDnODN+GekOG2XEuaxCdCpPH4A\r\nhl94LDhRmmDCkxvixk+hUAK0mnBjDbG+Sb8=\r\n=1cPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"968b84204c7a8626355569e2b90063abd574f7a8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/rtl":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/shape":"15.0.0-canary.5490e32e7.0","@material/theme":"15.0.0-canary.5490e32e7.0","@material/button":"15.0.0-canary.5490e32e7.0","@material/ripple":"15.0.0-canary.5490e32e7.0","@material/tokens":"15.0.0-canary.5490e32e7.0","@material/elevation":"15.0.0-canary.5490e32e7.0","@material/typography":"15.0.0-canary.5490e32e7.0","@material/feature-targeting":"15.0.0-canary.5490e32e7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5490e32e7.0_1670864613804_0.3280858667016082","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/banner","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.817002c29.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"26378ade2d2ac2c1aecfe748d12ae0fc8373299a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.817002c29.0.tgz","fileCount":31,"integrity":"sha512-07wHnkeyGFfo5fGdaoLYW+6al5fLjPjMw72CDx7LfwCbAt7dGeYyCoQt4T8KqWp730AWkq2gi/Yh8bVDp1GjMw==","signatures":[{"sig":"MEYCIQDfyvNDMSW7O8o5hONFS36PmwFhE1okN+Jo1zNQhQ18eQIhAKwck8lpqEE8u9j592d9Bz+WPUCCjI6RkT5LM0dR/Tof","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPTMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9pQ//ddFSLjG4DmdLFWrhnuTY4PLxqx8o0Zls+PxPg2cDtfvfVsSR\r\n095SJz+WB2sjgWPnMhwxI3tFXuOXFsWqOhGEahZlKmWKbDFc24tlnFi1wlu0\r\njOVKFGauQhPprI4Nj/cNRMGrofF5S9Zxz1/lvAsjSmAVvzu9xBSLbT83vjUg\r\nXUt3NYB69JkPWy4nQbSzKcpSFAPexp/+/IygYIl28jKj1jE0rwCd19jMLmUz\r\nJZ4c8Fn8oq5pmIuy2Og1M+xu9fZNkKLV7P3KCCaEF0YB6r/uk9r9U7IbdlmR\r\nFVq+5Yrv7e/i3V15Ypm0UtA1rItZwTuLDUdlYMFSiQQvFQPiVmr1jM2pklap\r\nlRL+ENoTo4QG0LUINOO7wQj/Jgx93RJT4fAIhK7REt7AJe5r2UIZnoYokhkV\r\nTEoAVYu6ZftGlme/kzzlUOcjYfwF5McJdChaBkSHotrIYYJhd+b2b3IJznVY\r\njbIBu1GOokZ/64E08v6lcjULFgjb81LyWtJMosuPfIschw2smg2boGAq7OQB\r\nb7YXmeDobQDU3CwelRs6VJaf7GGgQ60/w6iFM6u+DbGWyTaQfG+rFInUlG7n\r\n39kCiMRmJlYafkkcCNH0rUhJaJuHQuPXGp82YkwduUmANQsqJ6njeuxTUAj+\r\ntzv8TP9h4HdRPSUY4MWhGb7SSmo95uil4h0=\r\n=CpiA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8a85122d0f4bac7142c66fa54e2fe9a569e7c4a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/rtl":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/shape":"15.0.0-canary.817002c29.0","@material/theme":"15.0.0-canary.817002c29.0","@material/button":"15.0.0-canary.817002c29.0","@material/ripple":"15.0.0-canary.817002c29.0","@material/tokens":"15.0.0-canary.817002c29.0","@material/elevation":"15.0.0-canary.817002c29.0","@material/typography":"15.0.0-canary.817002c29.0","@material/feature-targeting":"15.0.0-canary.817002c29.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.817002c29.0_1670968523646_0.08246061070977229","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/banner","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.313a1326a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1569115e32807254446ed89c32443feb874dc05","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.313a1326a.0.tgz","fileCount":31,"integrity":"sha512-x0UAXjr9hR6eIODQBESNCAi7oQx8JMelW3GGauDaIVnT/l1qaZi0XRa+4KqDZh6bGO1omT//UcIVnHeI3CwCWw==","signatures":[{"sig":"MEUCICT8XukhaS/6O4JjU13pfAKDXCvDH1r7xs+qchOS8dmBAiEAp7ApW26tMGkeWGGZ6BqHr/TzUECwcDBKnt+VMTL4Z70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaW3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpstw//YR4MPe8djFSXE6iEZwcVE7QlPhJK4EFWC0NdK8+A05Ejr2uI\r\nERfrAi5ua1IgB4au5vuF/vy41tsUpcHD0r3BfyNVfEOBjWJBujEuZBMDiKBW\r\nSSukl9MgYTr9T0igzWktKMs3K79mAmGf/W5POnfl86ZflZihfN1novnxGBU/\r\n+HpQfLDSSjX6H5w5GepS5GC6YDILxS3QpyjZEKBRbQVngg0TyxjJ3ZIVkM/R\r\n1dzHqe0nXn+8zcXNROGYsMjEuuptGj/wObz8Z1VzWssODm43lsae2mgIcEuL\r\nU15J5/5MN28YpOLBE3Zka83gvIIvHV6CnuPPCf7hDYCbAXSd6BcyqTTf3z8N\r\nx1a9/c2Y9q6LPdvdd8TJAbLZeePiQt1x4BQvtzE7R+cwddr7U4BxSYJ9u8qU\r\nSKFciAGkwqYmnhjcDkvszzJ+EJCvbEQLfKgrN0IvfP8cdB5UnFGZBkC4s+Kx\r\ncS3ln9ReMQVo0n1HGBhmB+5K/1AL3CmhPVsDiw6PpnjrdQZNUXiE01EvjzD3\r\nlDevlgEfmYP9HH2mw0EnL1vF8GVtZxX2BZ7/9xXlAASaMO1H/Z5WRLOgSSqa\r\nK4tzI/Ga3tSIteTDuJdneeG2bETJ4+ATVqnFiIW72KZSFv7/WWqYChtF5PsR\r\nDbFGJVnqCkaVWe6kpEptsncUDqQNYteBxF4=\r\n=u7yW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"899522d523dc8a23968f530bb4de8698a5b0e78a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/rtl":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/shape":"15.0.0-canary.313a1326a.0","@material/theme":"15.0.0-canary.313a1326a.0","@material/button":"15.0.0-canary.313a1326a.0","@material/ripple":"15.0.0-canary.313a1326a.0","@material/tokens":"15.0.0-canary.313a1326a.0","@material/elevation":"15.0.0-canary.313a1326a.0","@material/typography":"15.0.0-canary.313a1326a.0","@material/feature-targeting":"15.0.0-canary.313a1326a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.313a1326a.0_1671013814854_0.5912282155533772","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/banner","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a69c14e10.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c74b3f1566c1d60ae456d3e376e8014530ae205","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a69c14e10.0.tgz","fileCount":31,"integrity":"sha512-dq4DMsiXgxe69/l1CRd6csWYu8uqflrSErNTHEkvJwlL+pkvx7xlIhsX4nlBDvKkuhc+BWBLuf+M0LZ2QlTO3g==","signatures":[{"sig":"MEUCIExx3sEMw2h9fbSTW5RD442lrxigdRo8ACYhmdh6GIjQAiEA+sPxYB14uO5IZga0fxbNrdatk/8Yrpsl3h8S7Ma+I/c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbGHACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOxQ//VJcZwnHsGCFewFzasrZwn8KAh1nFSXBv7X5UK8VaRl3RhdFa\r\n61Wczpb9kvFxvXUiREyseysldfBH/E1ZQDAmeK6ib2alLfcsDZjk2XthFfjh\r\nF5JrGydQqv1lDfekWxcZe/h9gJZG4CZcxlrn4e5isIrwAQD48XECVrSS+AIG\r\nDGJHJk76vu0d4j42iqdSj5U0Fkwb7w8jwS5VyQmqCEGOtlmQ6S3CwXZzN53n\r\ndM5uzlZmR5OW9lznd0LwuKHAyXbQ1PVXzePg7J+CHpCWxqtUKaUMtI3upr9K\r\n/R3YMxMiy1CQY6SKrNSyRaL9IeGqnzuuwfDoS/sr2mpgzRqDFUtnYFuSRUhl\r\nZYZj65eaeD2nUKJEytQSZkKtpJl10+yZuIGX8k5ljcvLPeZjIQQnc9Il0QJM\r\nGebdBooX1FqQO0A4/Lbtb0m+bNClt1WbQ1A1qnJ1HrkvvFHf+BwftUAMLAfO\r\nWH06YhqygUeSiOazJHk0+WRPu5ccsvO1XTHsy5zbf/WGe4QkiRfyarsMKZR7\r\nD32cIhPtTwdRs/42CHyfPkNe5lSMdj39sEAA4oE49MZuP8GYqvdhaiw870Sj\r\nd2r6waBHB8Yit2kXr3kaYEpycLdlOkUCd4sdcH3lK1uiYJBbjX++S7+SobNu\r\ngvgWHT+/ORNUUesDCa0p10O49bq0wQ8+Fzc=\r\n=N+vo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"39b456415cb22d1c1b4de3d505f0e2412c1f5316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/rtl":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/shape":"15.0.0-canary.a69c14e10.0","@material/theme":"15.0.0-canary.a69c14e10.0","@material/button":"15.0.0-canary.a69c14e10.0","@material/ripple":"15.0.0-canary.a69c14e10.0","@material/tokens":"15.0.0-canary.a69c14e10.0","@material/elevation":"15.0.0-canary.a69c14e10.0","@material/typography":"15.0.0-canary.a69c14e10.0","@material/feature-targeting":"15.0.0-canary.a69c14e10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a69c14e10.0_1671016839638_0.9456606225070334","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/banner","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f43e0ceb5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e2188aa1ab3b4df0f4d350929498a7dc46414ad","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":31,"integrity":"sha512-e4XQtYPuzs/KI7UQiZmXnUABSH59OkDDDH3HZB5LDr/II8WiS0ZOHihW81HKyEXBterwdmTkm/AjZlGZ4msjSA==","signatures":[{"sig":"MEUCIQD9pk5z4dVHA+ubFHSwcx7XbzpzcYgyD7Nj2kC7rVTvUAIgGASgu+3cnxklfWb5VS67J1uFaasVmROCZkx0WHtaWW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf3RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquuA//dREzUeKmQpxs2KfL4PoyZTPfqiy2IJYsqkE1p4iXNbAwYwEU\r\nFHHbgdLAN9mwWf74peCAdRX3mR/mzWvH6HkkxcZpYk+BlDyfhA8QRX+KBvGo\r\nMdlZkAQgGTnHWu0N7Cbg/k4LvqNoVNC+RAHitMJBW4YkZmJvpIBzXEw1pEHv\r\ni1cdUhYL4w4KZFk9WIcwgY1Od5RhQvdUk7OWXj+k2w3Wk89WL0G2BZd0TLeT\r\nlc+a4YGI8UNFPkD4IGFfcV1EYupeblVtcoeadE5F/Hkq12d3BJR0R3YuZp0H\r\nGFWI30nwXUgo1iX5X87n2gsigPcObrNbJZef99yH6dcNlnKAj4lD+TQmT/h+\r\nqtD1WB+TbPEHz9qQ7E4094qlYlRXkm5DGtVTRigsu55SXnyet5UZ+pkO2tdk\r\npa2zoJqNbob2D7FYzODQVezuSD/CE+61H37lzc40QvlrMhy61cbhQACsths8\r\nVtYCMkV5xYV0uf1coiJBjCh95VOv25MM8nsRWm/BXIPWUHDzhCKAUM+JbsfV\r\nWr4tUqnQ5uAicNv9n4TRltvaQfLW1yx/2arvyogy0UPY/pbpR7+65BErB8r4\r\n8EBCTOFClG9t7nq3GwAFgdkcI2PvkcMFB7++UJzSKV9AOEkxmo8Le2JHGUZL\r\nLGfFreIq5NwgUR5gnXAQng1xFCTeX8v1fvo=\r\n=BT4G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"35662ba23c37e102fa09f72d61e38e5ce3b10881","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/rtl":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/shape":"15.0.0-canary.f43e0ceb5.0","@material/theme":"15.0.0-canary.f43e0ceb5.0","@material/button":"15.0.0-canary.f43e0ceb5.0","@material/ripple":"15.0.0-canary.f43e0ceb5.0","@material/tokens":"15.0.0-canary.f43e0ceb5.0","@material/elevation":"15.0.0-canary.f43e0ceb5.0","@material/typography":"15.0.0-canary.f43e0ceb5.0","@material/feature-targeting":"15.0.0-canary.f43e0ceb5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f43e0ceb5.0_1671036369398_0.36379801344049056","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/banner","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.34767110.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"61bdb3760db79dd68923af7e952b861855c71bb1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.34767110.0.tgz","fileCount":31,"integrity":"sha512-6ee1FS7wgksbpPZimt8rq/zFs4U9bS5mQ4ZYBoGGDTjq1OmDoQVkqtY4o3vPHFHi+C7ewVeJhvYkj3rMfN1zdw==","signatures":[{"sig":"MEUCIGHiRtF8Go5XPt0hc4c8rjEa1XDavhs1zVn+gFjAWLOgAiEAsJ8j/ApZJOAvj6XWTi9iNpkOEyELL2+ikhJ8LYvpH1c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450063,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgWdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrHIA/9GUA85573JkobzrfcgYGL7UfFwmtkqbLWBVapsh6XN2Bwye6R\r\nhfsN2YqL6aGoGwbyqenlLzPMOhnxt2i5NvA+wEasuBK43+3nthLzGsLGZFkW\r\n3NBfhHSJFsEiR/rlHdSRusBSXi9uUURwpFB8PtRQ0HikR5q6IEcO58UtpyGC\r\nvgC9xFFhd92VbUHaP9zFcSzkYviIhop4Mxnu2XGCDFvGwvZvC6hNXjIWUOKL\r\nI9dLdn1dDsw1c1KeHrOVUqTHHhHXMb0WkKMg+tcUMrGYSW1SUzBCfSoFJjhD\r\nHJ3z9d3on8YNFPQRF5pci3zFv4TVvIggvyVn08MwssCyGPbhMQWUuKT+ndvk\r\nOEY0BY0KbiXJSai5NHdz7LLpiROgUQbu28Sn0Cn4d+LnrPVIvk03xHFUPQ6e\r\nnriLEUfzu4x7+8NFZfltmOuygawwHwfCGk9JKAEvGWSUSR0+rk+SkiPPloe+\r\nPGrh3v4KrPrNDtzOFHgbFF62K3MvWiedG6NI5ut7zk/XS8qh+xGNDzYol0Mh\r\nTKl1c6x9NbbJfSgNS9qS4ytRKtirRYSUJvr/wioJhRDezT8Q6Fv094+fwN8v\r\nyhQPzsqoHvaKgf8tQ7EXW+5nz/v+xEQA4WQZ5l/2o+ybYzWzRioqrsnHp9u+\r\nA/WgwXOtcaOA6Antv7auRlulCafzM+DZEmY=\r\n=M5TJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ed8adbbccdff96503e43dbe6291e95b5d2bca2c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/rtl":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/shape":"15.0.0-canary.034767110.0","@material/theme":"15.0.0-canary.034767110.0","@material/button":"15.0.0-canary.034767110.0","@material/ripple":"15.0.0-canary.034767110.0","@material/tokens":"15.0.0-canary.034767110.0","@material/elevation":"15.0.0-canary.034767110.0","@material/typography":"15.0.0-canary.034767110.0","@material/feature-targeting":"15.0.0-canary.034767110.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.34767110.0_1671038365252_0.20173546279923382","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/banner","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1f99f3c50.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7a7296f19d230043a117d6b22d9c81384c519c6f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1f99f3c50.0.tgz","fileCount":31,"integrity":"sha512-ZOosUuNatQzMeeZM8SLQJ178hsBNfzcIjrNs8qz+nahElqUQLGGjNT0zxCRAi+QNLlWx9IKQMazg8Dvb2UXFJQ==","signatures":[{"sig":"MEYCIQCzDE+xuQZQoD15w401Vw2vei4tNJ9yKH+WXgiO5vvdcgIhALYHEpqZhA4sF5mNtG2ePq9kS68a5OLI64jtXVsbWtQL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy6vACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4dg//f6TrdY0lJyCI/PeDsSwVjKGCfacvxCEfucIzDnu61rX9nItz\r\n+ydXhYMv2NVtjNcreaJVOEBJv2eIqo2xKSrE2fO1XeIRzwd4BDFRlBrpcA/U\r\njQYfjUpE373tTajOw+tO14MmR7isphq37i7V1YmuwpBVUdyMnzL0pdJPyjsN\r\n5jZXL4+rk6rufqG7KUkWS7b7rcVcgVntu8AtpYWYFsmBr0HR8CP2mOaa+GyT\r\nQTq65STu6d7jtsQC6mHNdzGnk+8J259zTeBcmJk5lBL2j8CdlbYdjfNy1ETf\r\n3G4DeWdnEikTL3UKFwY0WONdfwYGRNK7w/mvmdzrPM8d+fLMnyysuoyOqxwm\r\nNMuCuial3A88q6QvsdY771h23f51UbOBRPUb7hJ0BPbww4OHJTY3isbSAAQV\r\nk5mghwXVpnMr2zFP5ebgVUgWFhAtpBt7sFKYwUdgpyFRxavOn57xl7tErAf9\r\n9nAyn5Jxb/67NwZQmUFG5a7evz7K+ItbDk82wQbqhZkuD7SPwnBc8ZtsMr2G\r\nH42wmcZJJFXbJe7xOP/8PnwvDMCJB2hUyUTZZu+/H2QUMjK1I2IDYzT704ya\r\nariXB83omOwc/S6qeP4MyW9y6cz9+aWCI4z+DW0lw2/MG7Ol3xXNf3EbOpXm\r\nas8M3hO6Xy2xG4w6HWV7E0fhwn51HAQDj44=\r\n=uIOz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c9094e8faca1eaab158d26f7ca8ee4b42fb54bdb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/rtl":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/shape":"15.0.0-canary.1f99f3c50.0","@material/theme":"15.0.0-canary.1f99f3c50.0","@material/button":"15.0.0-canary.1f99f3c50.0","@material/ripple":"15.0.0-canary.1f99f3c50.0","@material/tokens":"15.0.0-canary.1f99f3c50.0","@material/elevation":"15.0.0-canary.1f99f3c50.0","@material/typography":"15.0.0-canary.1f99f3c50.0","@material/feature-targeting":"15.0.0-canary.1f99f3c50.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1f99f3c50.0_1671114415440_0.28929137153633677","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/banner","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cfd69490f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2d65500b7f8a659c9d4c18eecb0fe2638c5d3db","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cfd69490f.0.tgz","fileCount":31,"integrity":"sha512-KzAsTQ4jOL4fmEZPcGVjF+V7IMgMjPG5ur1KlkEgBVryPjfrLjHKDOod2d2ZT5L25eze5fXdwID9oINGfcRv8Q==","signatures":[{"sig":"MEQCICVt7C56MhIgv0b2ZsKRxMSH/JpNccO1Pn+auGAaKl48AiBnVDpGoG/apXbE7NDoDjjixaNUrALc381HX0VadGV9qA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNCTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpQRA//Tfjldq86e3EZfA/nBvwSRBFa3u67+4eqQpHu7dInvAbwga+N\r\nKOibIpkG2T/VMBuBVkyP7BeYaETMIvaX/de+QBCqA9auj+6peqb8W6N3Psf5\r\n9Yqpb00mt12GRtnCchNKPn0mUZc6tn08f/wCgbo0EbfTktlO512yrtLtLUXz\r\n7zPCpghD41KqKlIoLONr4g6yBZMC9NVa6nKqzYtOPkcrvDBUVE8p57EKR5G3\r\nzclVtUeb7TTAUxJIgGfS99ttXaZKOVQF7EZDm/UnMOVnnoCdN9J49s8gOe+h\r\nCLA22QwBBTNKWg2wMlYbYYWI1t+1vxYSFSdTeDCwyhuNCYotjQqV9Y0sYtQQ\r\nNVBzKyJnYCr0ZCWk4ZF5mV4WY+nIT8MVT26+oS1XEHZ27a3n6tBFs6sDRt/z\r\n7k7ljpZKRyYgyLYExd6DMBh2baP2vnnpPg3xFK880whZ8UuARQC3dtnzez9E\r\noaoVEanxadLGm/Zx+8hF1QDH+wwjj8buVnwtnqIm7H2veTOkmxeNdeVqnW2r\r\nG8u0Cau+NrzDa06qp12SU+RislHkRJ1TXHvxcLj+qKpYa6cd+fAIiJ9difTM\r\n3leQez/Wujqylc396Z0Koukm0uZGKxo/bDZ4/zmNsSgVOlRW2pmrUCbNGEdK\r\n1leb50nB89i+pQLkwIPW0gmyJV+uu6uR/TI=\r\n=D4Mj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a7b9218e1ea7572b08b54629159e6f3a98970096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/rtl":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/shape":"15.0.0-canary.cfd69490f.0","@material/theme":"15.0.0-canary.cfd69490f.0","@material/button":"15.0.0-canary.cfd69490f.0","@material/ripple":"15.0.0-canary.cfd69490f.0","@material/tokens":"15.0.0-canary.cfd69490f.0","@material/elevation":"15.0.0-canary.cfd69490f.0","@material/typography":"15.0.0-canary.cfd69490f.0","@material/feature-targeting":"15.0.0-canary.cfd69490f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cfd69490f.0_1671221394737_0.4956377940582559","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/banner","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.94ad8d986.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d1a8bdcc06962ac790d2051610ff66494a72f83","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.94ad8d986.0.tgz","fileCount":31,"integrity":"sha512-3Qi6NKS6PRtRnAMB6fJXlAqNDm0ReCCNc0KDwUDyU58XuM1Ldx02ReUASNeZRSzSjiB4GJ2gJSaxMqlqOHCoUg==","signatures":[{"sig":"MEQCIDjfJ/dQgnZbiFGSrZdBRmO1eOD2Kzj/OJFXjG+uP+QbAiBNmtMklbL6VbHMKhgQ4zemZ+AM8DJZg3tr3da0SG4DFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLtgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqr2A//YzzzKEl36G14KzCN4v9m9p+Lr5wy0wC1Mkfzcf3KbA/0/pUK\r\njFyV4pv81cwKJ4uPlodNb8IVbLWUSIn/sGjLhrdu69UEPVwO6VazT/1qBK6V\r\nD0eH3Z4gqSzJfI/17rsom53mF0TCxcEROaw6HB8OuNLirdqFguOOgnO//+X1\r\nj5y7dJQUFMsF605WQRShMM2vmD0+1YDu/cNg2Ns3sFRirbIyVQI/VHimR312\r\ntOkIGGd8Qm3MmMWnWTqPpZqqppcPed3EiSvNRksuhGkz0h8IyXwk4GuyrWJj\r\ngrZcj2ReGuFPHVZZvwwNOPS1w5MvWrTs8mTihRxy2bVIJbz1DcsDLOr7yoZf\r\no3VNkIvRJu5hCNn70iIonE/wJPGEGqyqBXb2yc1+ExfIiiPoM4jgwqGKo8cH\r\navFZvEorFhc2hKP9GGLQNyNAi8J3ffUdZe+3RPglmr2U8SH0wJQZ9uc9sm8P\r\nN2KGpTEyIl3n8ZvgQTPWeS72bCnumwioEmIUOh0J8otnCgzMI+Y5v6adtB28\r\nddfOda+IgW50JquN4/ekIb17e6xWhWF4RamrKvOTFj9qBaDxf3D/ZAcs+pld\r\nNcvZ7TZQaO4n4Fskk7I9PyI/nWN3PXloiLByIv+bVOIf94mEKup/Mv7CvmtJ\r\nC6Em7ZymvpvhLeAdffVdt++26GGSKccqALA=\r\n=zZkr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8e8a69afb313ffa8badca57ca15ad4a464b9f718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/rtl":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/shape":"15.0.0-canary.94ad8d986.0","@material/theme":"15.0.0-canary.94ad8d986.0","@material/button":"15.0.0-canary.94ad8d986.0","@material/ripple":"15.0.0-canary.94ad8d986.0","@material/tokens":"15.0.0-canary.94ad8d986.0","@material/elevation":"15.0.0-canary.94ad8d986.0","@material/typography":"15.0.0-canary.94ad8d986.0","@material/feature-targeting":"15.0.0-canary.94ad8d986.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.94ad8d986.0_1671478111879_0.5855178604220095","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/banner","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.604264203.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"065e5d57e5b1d9aaec6ce6db8781adf124ce88c1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.604264203.0.tgz","fileCount":31,"integrity":"sha512-sZ639zisaTZzRY4orfxothUs1n+qbdS4ABCwobX6Zu0S9ma8D4tHZoAaXItVG9+ZoRl9YKZoV/lRmzouu30HTA==","signatures":[{"sig":"MEUCIQDTmvSw8LIQkL30lBoZNvl8lCw3hdzqmKQf2zGgKw/QwQIgcHyT4NYPXUTb7wmqkYqEdKeYiI/eGRtAiq6+VPiExZA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo32sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqUjw/+PMyXS5WGluCO0ptTIhgt/TAuEl++Be2pKrVoeHgFn/5WyjlN\r\nnGlNGjQqrxmih2FIhJIFDsIyxWWxS5GmDSierRmBRnXOQ1B2blXv7qIU1OaQ\r\nfb2eA7elzB0xTUf3q1J4+LkyReqbPzcIil28PUBMxQmXtn1upetADGvvRnO+\r\ndFN02QEopbfs65m25g83Vw+/2w8Ki8+W29FSjyfi7AI3VY25avJuSZ91yiSM\r\nNvv/MHMyT3TFaI3WgC24BfdWOsDOOBAIbXB9VGoMZWK+ZXZDqTPW0AQnU2w6\r\nivtdk0K3Uwd7T2opUcwszQOIUnpM9tDm1rDrq7SPhTx0W5F5LlvYCUn8yari\r\nu614NU4APsKwl+2NVjsOjhiTE+IZ7Ia8HgEDvnqccStWhojq6e3P5zSRxxjd\r\npEYheJnLmfVpXi+pv8Z5D9v1COTzvILZ5PDhCLE8AJHqD0XX0HGIpqj+95Qr\r\nMTsF+VsW04kvSMHKzVUICqUFaTcs/59ezsBqklDJkdaxbbNarEo9cesXOR+u\r\nWHJ1a5fW/VmAH+bGkH3Lf09oWegUla730IcSXHKbs9YQKs/AyOdhNtaF5Fpn\r\ntZp6UAWEk4n3yGquVH9EzeQgG+LtRgnFvHU7eiVhdaztF+RtGdZ/A/lpD/Ug\r\nerMXz4V9i15mHOnz6vH04RZgNokzb7rrlzg=\r\n=OfVi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e37bb80002397246ad3ebd1bf11a465b2eb763e8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/rtl":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/shape":"15.0.0-canary.604264203.0","@material/theme":"15.0.0-canary.604264203.0","@material/button":"15.0.0-canary.604264203.0","@material/ripple":"15.0.0-canary.604264203.0","@material/tokens":"15.0.0-canary.604264203.0","@material/elevation":"15.0.0-canary.604264203.0","@material/typography":"15.0.0-canary.604264203.0","@material/feature-targeting":"15.0.0-canary.604264203.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.604264203.0_1671658924413_0.7564375527438145","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/banner","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.85bcff6af.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8334325f3983bba1477e0a20459ab5eea94a40f2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.85bcff6af.0.tgz","fileCount":31,"integrity":"sha512-dIbH2cW1feByqGmz388IEYgQPEzBBX1DvVKcTjArvqAHcPru2JqqEN+j8XFNGllX8z3foSuuhS8kwfdFbCFWvQ==","signatures":[{"sig":"MEYCIQDGDH6QuGiqJclT3ZuzD24DU1El9QIC/bg9/pHunWf/VQIhAMza9SirMWWDgbWGTB0OcFxTUx18CWqdjNTr8vqySyde","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDDtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpkgw//SO/84N/h+/3sA5FG1TzYcye5yFKE0PtdXhXJkjCXUkjpJWJ6\r\nWdG14+KCF8H+oKgerTyu8MVyddOh3YCaE9n42b9TfJScnaFuOWqaxdwOdxER\r\nhk830FMXicJswHk9RPKtM74ZnLMk+o/QzBp45KLLFjRjz971kU+T1Be/wrZN\r\nKtek1lqPb94fRPgum1eDlOCrzd9VgZ+rftYQU7sEsgFQZ+jjgQZUWLvvL8sJ\r\nLLiemXxSmuBAu5BoVa6wPT6A/eCXfpMdfnAPkl/Uk+ZjKdCH6LakjDH+VsXi\r\nYxuutqq4SbmSMfG0VH0uwMn9hsW2/vKqV1oKMEPyq2Ts1teZLoQVmMGGuw4E\r\nSBDw+bv9w8xISGEyPneFCW/POPRfsXjIlncnnbDuIsjQ7RGfdHkqg3G0ayyS\r\nhgIFLJndHxSbgQzWSerJgj6wo5hCcBuktXawQBW0yGc10AhuSmMM40qochTz\r\nWtIRzBFrE5Apxxdpi1Mnw8DXEV+MLu/HpwI9Zdp3eRkgLNSTR22y8uB7jTkf\r\nw30UcsxBrLL+pZcjWPQMRRw598f5zWfy9BdQ8mduCK4hqlSe/4c9AZrG2wNI\r\n8xBOlELj3R76U1+VHxNOLRCc1f5eb0RVZ9o+BBuNqZny3a+i9/oaf5fyGDQP\r\n6FY3zdHwa3cvb0npZql0L8pMABZCUv+FwGs=\r\n=raQ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ccd1f76fc7f93266cd894275969c05a833a002b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/rtl":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/shape":"15.0.0-canary.85bcff6af.0","@material/theme":"15.0.0-canary.85bcff6af.0","@material/button":"15.0.0-canary.85bcff6af.0","@material/ripple":"15.0.0-canary.85bcff6af.0","@material/tokens":"15.0.0-canary.85bcff6af.0","@material/elevation":"15.0.0-canary.85bcff6af.0","@material/typography":"15.0.0-canary.85bcff6af.0","@material/feature-targeting":"15.0.0-canary.85bcff6af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.85bcff6af.0_1671704813610_0.46842984593785286","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/banner","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ece3e8d21.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"07c7d6cd336b18842e39394e485937cab6e1b937","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ece3e8d21.0.tgz","fileCount":31,"integrity":"sha512-BAzoQhb3ENWmFbbSQR0rng+Izi4cFeb4zttfywBL3NZlbACbuDMetHm7StTi7EiY6n8LyheHUi37inwm+jFKIw==","signatures":[{"sig":"MEYCIQCi9OxmLvAGG6qfppOlLRPKfNgeia24arnZjXgI/A5lYgIhAP+3AXV5TDf63cu1ORa1w1jHcd6PvkTCz62bipCb0KSb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJA7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0bA/5AIGaUyfWZn8tAaVQRiWs+FfFaos0EtTEWAR74BTOSS0D0snv\r\nteAURADVtHO0h7Of9+Q68+suug6IDXdawIRMUr+3sjuS8JeYxpSPdVxdFUMC\r\nf3aQ1BnBMKFn1F281XY+d8Oj+O5kVbzNx+M5Q88vyB41Zk86mXELk6CTp9jh\r\nBl4hkVXdOf5uR0sY/hhgvfUjGtBAEGj+ttH32vyZEC0FbjGRmgTfmNOx9MfQ\r\nHhGgwYb9r/G5Tandr52wr5XudJ9BiPWZyaAB8gveTE1pkY2JrHEDG8j+wOOC\r\n5lcxDnsvddX2MGQ2nDB0KwNscN75t0qX130WasRJdUJoDh01VBhOHns8WTwm\r\nNAsemsso0meFAglykt1IaV53xuZvZUZp+aV1/C9mv+x/e/h204LKmQpzPu52\r\njhfLIeaiLUOAW465Nm/SsTYCwSfkCHSjuELAytzk+LAkW+ZS1Mb9uPoG4dsl\r\n8jWIcm7xlYpJRY57LkEWI7pbiH1Emj3uLIFun/W6iJe/g9joiV1jgTwf6ebW\r\nZOZZLM02QSm4PztQXpNvN8j1rH7+rfkEJ0jDszf36vjsERg+J2tVeV3Lq8Yc\r\nSanRKJnBN6DvNnJp1RcskQFEGzY8miiZxeaXzbNW5hlerPesbQg/kFrsz/HJ\r\noT7iUNV5YO11LeaX9QSsRvOa9gWLYVyHLA8=\r\n=CNz6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1a4efd7042befb584384fcbb35f1ca445adaf1d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/rtl":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/shape":"15.0.0-canary.ece3e8d21.0","@material/theme":"15.0.0-canary.ece3e8d21.0","@material/button":"15.0.0-canary.ece3e8d21.0","@material/ripple":"15.0.0-canary.ece3e8d21.0","@material/tokens":"15.0.0-canary.ece3e8d21.0","@material/elevation":"15.0.0-canary.ece3e8d21.0","@material/typography":"15.0.0-canary.ece3e8d21.0","@material/feature-targeting":"15.0.0-canary.ece3e8d21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ece3e8d21.0_1671729211580_0.49174740288072094","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/banner","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.278ad53d1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"28030a89c24eb965f0ebd10424b48aaacc9ac6f4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.278ad53d1.0.tgz","fileCount":31,"integrity":"sha512-qrjRoLlm5yUqIJuwEb1un8tqTkDJU6xDQYlNVsLYmuAPryASkb2ni95m/jItP09g9UhOsXmfvufX7KOE76Pcsw==","signatures":[{"sig":"MEUCIH7WXd3aIg25pd9KUNKNdbdFlqo0O2uwwoFQ1Od53ZqTAiEA+f9np/TuRGWtspU6VDjJ2qtE28uqYbc7gcj/mU5E/gE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyYVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGzA//f9RacVz4kwGWXqTlkL/a+fGqE6Y6+lQICKFtRkAvIWVFT6tc\r\nkHyOXhe2FVsbf63ZqdzVloaWxmRibz18U2y8cvzW/QnUZPBmmSlsKHUo4rbj\r\nzOp8X7LiyY29cFr+75JQAllbcsyVopyKk8Ek/Met9XwzVx5Oe/2C9aHRLEOb\r\n0bJB1/yZJ3C18BeB5Aj0NcQ8m/C6zz+MvRTPc1ucQaRxvsR5uf81DZgttJlP\r\nCTAy1BUzPLAyr2Ao+9rENau0DpV38s40ECXfyiCCJ2fHiIH8mFTVCzZoZ+qZ\r\njfURdSxdRvpVZswNwJgLNKznSf7XGaPdqgPqOb2STsx58b8rHb7ljsRKU+Pk\r\n6FlOVs0PeCkqDu9DkZgLHd0hfVwnEP4VdCy4No2orhKYE7gfLur85gU/N9eW\r\nNhWfLdDoX3sBdM9UmeDJkhcCdfsQQDKvDIuYcDEIzYRN8aVk6tnG6ebSEZf4\r\nu44TKI/5I7aQgRtA9j2w/cFIEqzF8V+VaQYYtfeo0Zg16Y6nU9qcOxO3eoxh\r\ne0XuHGpTy30dDEflJHcUMxRT4s/fnY9vX9tpJHG1nMkMz/L5vbrTzMQHCkZA\r\nHMCVpCO3vhOt/f0aS3aMIRxNMy5F0k9bYSlzCyrK1YL6fjwmHfG+NW6MJUTp\r\nJcmDNOCFQ2oEmLtovh4bsu0ixLFlBN5/RFA=\r\n=gOqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"967cf83d2b9fa8a3e6bd992aa107c66182e0c65b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/rtl":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/shape":"15.0.0-canary.278ad53d1.0","@material/theme":"15.0.0-canary.278ad53d1.0","@material/button":"15.0.0-canary.278ad53d1.0","@material/ripple":"15.0.0-canary.278ad53d1.0","@material/tokens":"15.0.0-canary.278ad53d1.0","@material/elevation":"15.0.0-canary.278ad53d1.0","@material/typography":"15.0.0-canary.278ad53d1.0","@material/feature-targeting":"15.0.0-canary.278ad53d1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.278ad53d1.0_1672160788756_0.9415030749484838","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/banner","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a7d8389e1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0a4adbd8124ef410b1a2c666c0c8032bd57249ca","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a7d8389e1.0.tgz","fileCount":31,"integrity":"sha512-iX/uhrvCSKF1hLgopKyFZrB4pnPeKjDWBR053B08GTt3H/J2P/QeagxKWlnx1U8TUhYGaQnquNn/uz4NUOv6rA==","signatures":[{"sig":"MEUCIDSIF0DWLi96YMN/ue5fh3hVQ+bo74/kOgfJsO5QFO2vAiEAskx3kRJC61KwQniwNRVSfUjrK7SnBULN21iNU0FMT3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0HtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmppSRAAiBAAXUz00CMI7m9BBTSrx9dBgWxHfpZK8Xk+d9g3D91IwD/K\r\nXIe0q5XQ9EspdyaXE3ME1HK/evKR56//6msjo0T7e/5W3YbSmL+t66L+KyzT\r\nm+m8PXhy9VUX2zGjT5TD6UOlcdKQ3M4F+g86RORqgGUrl2qcuv/DgwytTi9E\r\nh9MjMcIc17KHvI6vdhahzaWiEMrdflAlH5etF+kHmL3hbHnUeSzEmg7BkBKN\r\npfByo7QRADNGru/+zcI0Qa6rWpTNjhtx2s28iS2yLkWsTA4C2wkrrmkoKyuC\r\npqOPmWgz6avzpAYwJOM+PjuTffc/YProc3S6t9M9sY5LPH3Whh0vmysj9nvM\r\nWzqXXCtmhAQbkm96NtQ8nLk7/YnadL/IjaQEdhhFztcSQr4PQDLdqzpWFn4u\r\nVMZXmRbDMHt4+WKTcuC+PVMdrHEes5BPyTgWHLcHX1TpgvJtN8hkcuJh55Fx\r\nf4tYjXa7WtYNMu/4BopymsmWHdjBGzoWkqr69CMI3xqfD39XCGZhv6aWVTvg\r\nMMUGWaa2As/eNkyn5yNxGraRn2HhBUVGZhLADdH8YQNhPF0yXx1VV8UfL2RE\r\n0u/5VNZEZl5G1mOXK8ExMC32e2smI4K3Y49Qjtg3IVd3NyDODHLfblXc/vhN\r\nHdWE5GIE4wR7VA+1IJYXM915pGrJsYW001M=\r\n=GcPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f9b27084bc44ecd4530cd2252389b0dd8116709e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/rtl":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/shape":"15.0.0-canary.a7d8389e1.0","@material/theme":"15.0.0-canary.a7d8389e1.0","@material/button":"15.0.0-canary.a7d8389e1.0","@material/ripple":"15.0.0-canary.a7d8389e1.0","@material/tokens":"15.0.0-canary.a7d8389e1.0","@material/elevation":"15.0.0-canary.a7d8389e1.0","@material/typography":"15.0.0-canary.a7d8389e1.0","@material/feature-targeting":"15.0.0-canary.a7d8389e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a7d8389e1.0_1672167917400_0.8075356180450046","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/banner","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8175d5eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8d6b23c854e3ac4d5795aafd7233e370c968902e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8175d5eff.0.tgz","fileCount":31,"integrity":"sha512-UaI0kjY66dshbrgH7BYZErhGZIWoChmAA6Mj5BEqLNJyLzb0jzDzCm5iZDQ1KylTsEZmSguWJodKUfFIDwr55w==","signatures":[{"sig":"MEUCIHqFc0KJMj9HAPTyLpo2bFFLupYoT0rlA7Mv6A+Pghk9AiEA5kP9RNeoRjnz0kI4IQvroyfscPF0T+WKrVtfUVcISpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450508,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6F5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOuQ/7BcB4uyRoZG/IJYNzDP8m9ZSt4MDBCG+4DuTURteTBG2Htigi\r\nQ0lvtqJVWYnhDFiLEiNwyYe2OnZQAVl3Em0m7yeH/AeSqY4kn8RfaRtGulnq\r\n/Qcit7OsGIQ0N5qe8hbyvcdrF3KEE2+sSBCj/5z4feVGRRAnRIC3Oxfmm5nS\r\n4+L3zH6kJRtXxbSc3keGZ1oZHyb/JLpBMFcMW08YUwV6AuUM/uRyYNtHCQia\r\nvkHdaNNHcLOqOgQwaotQp5paRWjD/f/E9MWNor5aI+LJhPYYUACMyUBaOAGf\r\n0MdDpGDL/kQQ1HfMXeXm0wjHp57sywDwaqgpW+vx9qhT3Ppwdj7iMlmPVObZ\r\n4MQkYUdDGhxxB45ZpZS4ZhSRf8vKQIXWnp7Hd1SaqnThrfbKc1wPTkRsLZns\r\nZ7CkUXInA7PlO3pGHi99I4d/YdPDIZ6f+XeodKH1B5BRXBg4ZUrejbsYrICf\r\nfThgQciJYqtJ0dNc/hMxq3tacwCKgciyerwxJDHdaJPyQ1KVg6QhELp3cwZh\r\no8zlMYplFRHmCPdOy3EKVkWupdzW2J95VTiSe72xLkqrZ7sEylYIdxkIuuWx\r\nS60V1UQ6/K+9iY4OhfFRAfn9V4apR9Vpej+mrrTcAJ/bVrGFCAYHHFg7VS+F\r\nkL2EX3JF8bsxBTTV+DaFy09ayjd1Z+fmajA=\r\n=cB/f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c3bb551a6b32480853dcc8e29f7f8513d62154a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/rtl":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/shape":"15.0.0-canary.8175d5eff.0","@material/theme":"15.0.0-canary.8175d5eff.0","@material/button":"15.0.0-canary.8175d5eff.0","@material/ripple":"15.0.0-canary.8175d5eff.0","@material/tokens":"15.0.0-canary.8175d5eff.0","@material/elevation":"15.0.0-canary.8175d5eff.0","@material/typography":"15.0.0-canary.8175d5eff.0","@material/feature-targeting":"15.0.0-canary.8175d5eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8175d5eff.0_1672192377578_0.5856616559090124","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/banner","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e21dcb86d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8eddb760fef70ef58ce90546b268196b2441b2ea","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e21dcb86d.0.tgz","fileCount":31,"integrity":"sha512-zcjhkB9ktSNrmYRWulOepJqek1t/jrZSeEYiNq83K3Pn8Nfga6euy1lZB9CfsQkhGDGpxd5EK8KZroe4cErOlA==","signatures":[{"sig":"MEQCIBK54TyvcsOuEp4V4X9CtxP/p3lBt/HH8YpO0yAe/q/bAiAVA0qiemHGc55fY5ZdndfDuLjLiS6KcGj7R978sZl7ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ45ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNZQ//djpKmdLqASe/2DZZQ62tRMPJnCiqiK0RYn93G4w27bOUfvT7\r\nROdoGv2cf+9GcOnYOnmjCybKgXWrLUl0Wnz/wjdz9yfXDBHFhtI4WFJFUJen\r\nabRJdD1TUFG0j96j47S3vVONCEAA2LLgd0w6AMTJhUIMod+dxOmOSmAZINlW\r\nXR263nmvxqsLZ5XNFkykt363B+gfvJahE6rKkmBQ1XEizt6QwyQ+mCQVJMaY\r\numj6LQbCnl6Xm/8pWWtAwgJFtR7cFqzU2l3+6Ohs/Uby7uKS/yi701lOMoza\r\nIxHwNUDXevV5vnPr+yWH6bx2Hn1WkpJQtERWB+/rXDCo3xrg+ZVj4x+ip+OS\r\n7QMVbT4xq+oU0JrzWXEIqJFcDofgrDDsvrZmlYQzrdFsX3m2FzDMj0gn7nIp\r\nQUku5ILbS5m8htTDcquRDmeMvNBycalCf9wV4F6xzVtxhZQevO1QXjAcipBE\r\nocWmW/YUR8Rkvq8KIGgOWmMEZPImjcO82fT/mUwLC6FzoJ/dDZxQfCTx1EHw\r\nXW2ZJftq+ziVRl9XEQoCfOomBkhbiNjrZMcmHJxhs3N37LDjnzRpXwp1ifq/\r\nv5Rj94kaFt530K4z8CVfdh2jyi1G0ctquaNg7u/0E8q1OKFebjvNOuwosrFH\r\nE1McPRelQ5o7rjOLZW/cUKA8GfMokfUT7Lk=\r\n=D+6W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a32b4ac6d2bad60870533296fbc4acf050735b8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/rtl":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/shape":"15.0.0-canary.e21dcb86d.0","@material/theme":"15.0.0-canary.e21dcb86d.0","@material/button":"15.0.0-canary.e21dcb86d.0","@material/ripple":"15.0.0-canary.e21dcb86d.0","@material/tokens":"15.0.0-canary.e21dcb86d.0","@material/elevation":"15.0.0-canary.e21dcb86d.0","@material/typography":"15.0.0-canary.e21dcb86d.0","@material/feature-targeting":"15.0.0-canary.e21dcb86d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e21dcb86d.0_1672322616850_0.1501026612586216","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/banner","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.20ab6f5a8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"84a0fba7c83097ebde855df9c908459d0aa35a39","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":31,"integrity":"sha512-sGbbN3gp60JcfZ5ihuerUL5MEp6s6EV+TW0jhukBEOrd0G3lrz3pAHYHWDiM/IkbCo9ow3O7W4DtipKVF0zCsg==","signatures":[{"sig":"MEUCIQD/IPfOXt2UirDRvyj8wAgNftK+40rmb83tDjDzL6PBjAIgU/jF0JdLYhlu9QkXhbZqoyjPM/8usgYIipK+6ozVQpg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":450594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre2aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3mQ//T6/y/4p6CDmOBTXTUc5JMBL4DYvgnAvzRqfOyrH4CjDK+g+s\r\n22nm8S2KF0N6/9Z/2/YbMRfd7U635sJvd+OJDrwPEha3Q/L7EcBpfhxxeUTb\r\nbyPzMGmUeCvTPzcjw4ll+8RIn4IlH9/WQqrr/4WOuL1UWFe115wowfwPJ5tG\r\n301lrV1J9Cll3QI42X/pxJ+yLFIXM+mK+dIRm0tKsBNqDFHrZrUaXG0Bh23W\r\nnbYMubg/DTCSYXe0rhJ/5RDBvd5xZDoiTaIFbyKcjsjU9iP8Sazu+qAl+dzV\r\n1Qk2Io7mqwhBSPkzjS4WK2VFKegs6LejRwP7KpLnSrqdUpinniQdvMnz7OBn\r\nxMGaJ42og0jEsE9MSAAWdF7EbJg8v3iPv+s59Te/wK5qLK6Z307D4xE8Aid3\r\nodoOnbdVSMR4sSHgoz0isSM0k34Y38pHsk9bNvUxKCc0rkpe8599lakOz6fv\r\nEJUY7FX9vrU1H+Y3N4FKwWrQWFOQKaLW93AvCH1QY006aiNAlBvo1hUHcpIh\r\nMrkhYDsNHE3C0igpoOt8aVcaDzY/0CwLI+BQfJJxVFvDfbj9Q6mtgxIkubdJ\r\nrGFDfvQ5uFI40Vq2IYuxvJ9NEbVOWS8Jv/+A/sU9Tb9BefBxSAmYftG38ZLU\r\nhHAwz78NSH7kVs2b66UWs4zNVyGguISCNDE=\r\n=1CEv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"abf2135af6e71ea44b6e6a4de17493e5923f7255","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/rtl":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/shape":"15.0.0-canary.20ab6f5a8.0","@material/theme":"15.0.0-canary.20ab6f5a8.0","@material/button":"15.0.0-canary.20ab6f5a8.0","@material/ripple":"15.0.0-canary.20ab6f5a8.0","@material/tokens":"15.0.0-canary.20ab6f5a8.0","@material/elevation":"15.0.0-canary.20ab6f5a8.0","@material/typography":"15.0.0-canary.20ab6f5a8.0","@material/feature-targeting":"15.0.0-canary.20ab6f5a8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.20ab6f5a8.0_1672342938403_0.4294052281798637","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/banner","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b9806f623.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"276c34feb7cb8c7456354ddae87a5ddb9722be83","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b9806f623.0.tgz","fileCount":31,"integrity":"sha512-3peBfCdf2DlBy7PVF3oqVRB9jk/TYLnjVOU2JAuZ+4O6faeol+YRZWTNYb4+/caQHvz1bqPtq6yQFE7UlQ1zyw==","signatures":[{"sig":"MEUCIQDAJz+ufNxNg+fj23M+Htag8AB8wEonBsB5qb7QSlwiQAIgMRWWdit4luMzAMNfLFpXSKAUf905zueF2oNKrH+e84k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh2kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfOg/+PQRA3J4nqNFozzt+6YQw3RQig2iGYbPoarxzY1ZAQA9cHeOm\r\nSkWuRgcoNgcq5rEAjHYpElh1idtvJ8Iq9PSdXaN4hH24fMVd7Ep4YQfuzWYS\r\nCgiNi5FNtQp6w5RBGcaVbKRvn0iCKBtx+mACu9LyK2Ejw1ZuI/Cf8fm0xxHO\r\nMyzrstTF4lB4CZCPPYnvfj2WySq2/de5CeDTdqHfbUA3JykqPf+VKxN5roAP\r\nugeHplu6FEnJRL3sPXHcgbekiDXaRlmPL1qKOxtuN7o/7sYRCzGed3z1rH/7\r\n0aPhr0pNKunIBC0GkKNEZ2LJw0cpDLDLazvVQofp3n4qgBjiYboEZVYixoUl\r\nuZMS+9Kl5DgMa403r1bV8q/vVjLpNeOMSxcqI9bjuWvhLSB1ZSzuZURGHKM8\r\ny6zgA9qzlJp7uJW3wZk00zx0Jrv1no31esHd/kFGt3n0qebSwgHqIyNzy5GN\r\nOHwpzoghFALzj8Y6cxN7EIgwKXP86fa4kBLtNYipcREeQpMc0THArQXQkana\r\nHVyfQkR0KTVP9PrKDwSaTZ1Bq7LEvajnGuxj8L/lk8R/W3YbjbdxYEW3u2T4\r\ns2Qvez8XT7DCYtdoYMwgeLj0zKWPzc6BF03HlVcuIa1Bvj6oftBiXQLwMlqA\r\nzf1t5EthTv8Y0WX/h9rN+/SfRKBqI+ERVEI=\r\n=eALA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0eb4b8fcbfba4d68dffe3a2b5c7478e69e2e2eb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/rtl":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/shape":"15.0.0-canary.b9806f623.0","@material/theme":"15.0.0-canary.b9806f623.0","@material/button":"15.0.0-canary.b9806f623.0","@material/ripple":"15.0.0-canary.b9806f623.0","@material/tokens":"15.0.0-canary.b9806f623.0","@material/elevation":"15.0.0-canary.b9806f623.0","@material/typography":"15.0.0-canary.b9806f623.0","@material/feature-targeting":"15.0.0-canary.b9806f623.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b9806f623.0_1672355236087_0.9220315380699804","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/banner","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.50c9f550e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86df7d23cb16da745e4d46604740795e9795aa7c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.50c9f550e.0.tgz","fileCount":31,"integrity":"sha512-e/qtqkAKOophxeB9boOwvARjbA3lUBDstNhcGiz/g11X/HTzvC2bBP9jMeHf1PMZN6onFtClUEvkF1XNdKIkAQ==","signatures":[{"sig":"MEYCIQDP8WjGNa3XISoFd9EYX9uilVICEV+CK7gEqo41dSXytgIhALFkkJfMGonqn0XSMXd1v3EbATXX+DxUV7Nj37SB5y6b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE5rACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvDA//Yhwd43QYklfAUeqdewIsNSCGvKTjLRYup5nxSxQVo/wdKSJP\r\nqjG2m72uj7ml8+RvhcFL24l1YYZOie5YdhrYbte427rGDTVBsGez50b4uHx6\r\nNfa69/0NqwvP6BbFkkxiRkLlb+SGfExDnw2ffxxf24wUmldMVuti2TdVbjod\r\nvsKagSpmeM9ht3GwxO70nneJcUEpyJe+o/Bq8xO0y4+GLtbf2ZdqF3JO80+U\r\nvVWlgSN6Su2/bYCfSFivhRfoJ3bqD6wW7s0UKQ4loOvW+iM23qkSc0p4gC+U\r\naHAlRzsyuPR/yTShO7xuooGuxCfN/gzVo2YH+ZeD2kPgV7ayZqSJ15INebtU\r\n5A2OM/ECKwTcfeboNrnVyMZNT5MpHNSUmQZD7yqUljP/AwVRbF8LemYZkSBD\r\nB/PISzye9vjqk1jMeQm79cAiO8eZH+NND5sJsYfV7x0pEyaroBt1V3tSEc/2\r\nnhizBkCgGW6uXnB81RhbV06C9daLX9fs270lOfQEXvsqDXOrFZaHPLmr0+GQ\r\nNNBTjb0M1HX5Zl7ZItfSUTRFB81JPazGKe4IsRbfjDvjpXI4lLqyl0DkxZRF\r\nmv7RbaSf0vGasHZUGFIZwaK9YD7hv6UanrQupjkVuXZjJjCnZHhfJAnki4OI\r\nDblskZt3IlEpKnVp/u5gHPDUVHfDs2xG01c=\r\n=Hzvy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d020b19d0ab5525ccca1f803a00e184efafb15e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/rtl":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/shape":"15.0.0-canary.50c9f550e.0","@material/theme":"15.0.0-canary.50c9f550e.0","@material/button":"15.0.0-canary.50c9f550e.0","@material/ripple":"15.0.0-canary.50c9f550e.0","@material/tokens":"15.0.0-canary.50c9f550e.0","@material/elevation":"15.0.0-canary.50c9f550e.0","@material/typography":"15.0.0-canary.50c9f550e.0","@material/feature-targeting":"15.0.0-canary.50c9f550e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.50c9f550e.0_1672760939402_0.8487434367862225","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/banner","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.af490a848.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88b094ab33546bdc0e11a8a972fa3675a324fd16","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.af490a848.0.tgz","fileCount":31,"integrity":"sha512-m1uUmEy00ix1zYe8UsNsH1wN+GXEGOOx41JfW6VV1bwaSsM3b2mzI1Q7a76sGhVgJXXaqVQaEmcIg6/ljNEm1A==","signatures":[{"sig":"MEUCIQDkbYCHgLx+EIhemTaeX/PGdC5WY3RC9jqAV2h0ewHVoAIgVtonEZ37l92HpwwtkbXg/WJTH/Prn2jXSHB30mVNq7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmreNQ//WMrsPS5L/4mEMHMRixWGHGNqbC+82qvZMhB1FJEMV71mqOlg\r\nbgpNL+RD+eILj+9oQNiaoN/RJ2qoq78AIWwBqdzkJRRhsGLKvaX6UoVTPJRn\r\ngDfBk9W3NyfP9W20hnH5j+fOMWMqXqa3W6kQvpS9uQak6n2VvTsq3zqUOoTG\r\ne/lrLtvznMLItgy6GtGI8oc07JCAICNWSdsBaN0MZbl+MNtA6qWS2otUGTEs\r\nxqB24cKxiuBeOHo1n9gcXXpTf4DoDAkz7RCvvbzRqeB3CJHDOsNboIoK5yyY\r\nHhGK38916UMFdc1VF+rYGSrHellA66bXfQAOn7mPT/Wn32LaFVwQ8N5JN1+O\r\nFbQa5FrRZagbj5Q6KH3Iv5echDXiRdNU1nJV1u2pbHS4I0ah2dtuG11lUo15\r\nIPkxcyMds5zNSwyh7fXzKvq88XqxFRln9gqbtK/42poOF+3VhjZJxkhgQ02W\r\nwu7eoOjaaIq6CjASll1InK7DCxYRKtGONnLm067+GutMnHHawedkOtmOIZdt\r\nZPsOzVhL3Mnm4gfiXDPeZcHQKPPOBfJeo8BeHEKBPUNjX0iHfuPaAYhyUPOH\r\n2UTlVo7o5QCTJ/nTRz+oYdG5vghyGt8Ax/SmJXKa5pWhgi2xc+zGKCz2cGYw\r\nqk9NsgfpuiOxWWYcINNfpeyOPJwwhrt7Udg=\r\n=5C0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"95f5499a3dea1763e53574fb3b884e8e45cc974e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/rtl":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/shape":"15.0.0-canary.af490a848.0","@material/theme":"15.0.0-canary.af490a848.0","@material/button":"15.0.0-canary.af490a848.0","@material/ripple":"15.0.0-canary.af490a848.0","@material/tokens":"15.0.0-canary.af490a848.0","@material/elevation":"15.0.0-canary.af490a848.0","@material/typography":"15.0.0-canary.af490a848.0","@material/feature-targeting":"15.0.0-canary.af490a848.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.af490a848.0_1672761552545_0.09369694739095946","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/banner","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7cf487c98.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91eeefb4c92a040ed005dc2c9636eac4a2d5d4e2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7cf487c98.0.tgz","fileCount":31,"integrity":"sha512-ji4TJytqdhjqtKkU9gPlqrn/ArTg9lVptGGcFx0nIBhvkGWNoLxjv6DxuD3FbPsSl4PKs2asdtEYeCEN1aY2Ww==","signatures":[{"sig":"MEQCIH6NvGafKvaNf+D/RWPVs4EtgLhFvF+aOqsmMhCl27WqAiAb7zeVqbmSPDAfeHHj94DLuqk+yQAy701PcmPVRs+Z5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":451185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGh3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrccw/+PYMcrR82tyqB0z5sNuWPL6psqxBC1LEarvqpCYPhmAPsXBc8\r\n9Baf91Qwpcuc69H49TrshFE7IU9Vyjr/FyZW/2YkR1+A7wmpmyY0pZA9cOmQ\r\nCrYSFAGecrwCFoxEGGalihNWg9RUKlgQd/bSAugPGR7TQAKK8KGoREaKLxGc\r\nK7iPjTa5QPxmQG/VjFz8lFMXGmWM+pIXGx8iltIfn1EmqiXJmO1GPEojuaRt\r\nEE90p3T9tnLhghssS28aRON6+9Ow8DqSHXlOSoQp2Oyl/mcmrTSLKSLTsjAC\r\nU81JXbdFP7oGqnDtbeXBuv9OlDCk63A7br+AAjIsEQrfWjdet12QXjAC++Db\r\nMTPoLDyIyIP5dNh4EaVYaqsJjOusSFQJULbCE5TwdOzHrZ7sQvjNbzChhrY8\r\nfgMBxPuUNs4v9RZP2ih8WAS4F36ABxc5rJAOBygu9yZe23/p4WGLtm2JJLPD\r\nRN2mA0Hs/9rGyapS4d2lPPoWrlKUC+5rOVap8fyiIxW+QsRaX9JOPE3QMpM0\r\nNfRErkCIUow/l3PoMYaaIzMDc9nBhJRN4TD+7YNi2Qw4x8AcXzEIbRNH8cE6\r\nexHRsVCDsVVP1XLsRrtUG4KcAiFBzO6gNH1L3f67MK7nPPhdVHuY6Aij5RsH\r\noEVyrvWCmh6EPPiCb2D3478KVTZJxGyETOU=\r\n=t69J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8d246270c785ca072651213aa63882309c7cd5ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/rtl":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/shape":"15.0.0-canary.7cf487c98.0","@material/theme":"15.0.0-canary.7cf487c98.0","@material/button":"15.0.0-canary.7cf487c98.0","@material/ripple":"15.0.0-canary.7cf487c98.0","@material/tokens":"15.0.0-canary.7cf487c98.0","@material/elevation":"15.0.0-canary.7cf487c98.0","@material/typography":"15.0.0-canary.7cf487c98.0","@material/feature-targeting":"15.0.0-canary.7cf487c98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7cf487c98.0_1672767606862_0.3974893343990278","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/banner","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a52be2d5e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a276cc2be178c13c3463d29487fbb171cb36fa60","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a52be2d5e.0.tgz","fileCount":31,"integrity":"sha512-5WYpsfvkjZVzPun3lATZQnCPzrQ7WpfXGOaiHxZnOtmwkLhy2x3r2HqKsDjy4zbsZL3yNFqR2a0u+srQC8Q1eg==","signatures":[{"sig":"MEUCIQD0LjpTXJzz9S3zjRfOhdr9W1DJEvfimSotsA20uXnENQIgdWZoXEW2erzY4dpZRBMUatWKki4/GZ0dvDDVOOU3BjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH6WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq9w//cyD5XgvMOMMvXBV737WbyvhNDbWv3DGmPCaP7scccs/Fsl9G\r\nRYD+LCLtX+SJfWLkNJ8hmjiAKw8xNW1GvDa5vUvgOxYJLt8rGpxvJB6lbk2D\r\nN6i2bk4DMQE4dhXWzA8adjUXI8kFTEmqWT/QeMjIFAmJNOzJ7RVMP1zlqNJ4\r\n0woL1DNb9fLrCAHI5C4QuBQ6iIUyhg8QN/IjQ4PA76Wx7ugo0YFjxRltW8RY\r\njC4qEErvMtDPQ3LPyQVbxN/do0Bkx6FnuriVL/K8OOZTcdnQhKCqLlqYHy3H\r\nPp2JJJvMd5QyJnwLTcpgHi/tHx494W53dGw0JlRk95LUtTpQv0ejZsbofjzn\r\nh60+uqDm5uyQdOFyT+pQkzvvgOjYBJcfiCFaLv8bcg/dCXtNqrqYjSOs2M5G\r\nT0Thj8/PhD9+LIT3NSWnox8x5s947dBoLFsPTJgCgDqtSylp4rMBMv9dcyYh\r\nRqror2YKg4Pig8qTnmhXb2LNehE8jy+kuPMXLU1mYRp1Ue1Qg9jdz6fCcnTb\r\nBcYmcglJ2S3ZO1KL0QleO1UOupWtUmUX4Og1t3kMUKkOsEtx5bMylrsNEw71\r\nj8tQkVmHCVo/ZLBuInfzEqB+P3rpHObeQ3Jpc3JwKB+zWI+mJ8F5Kv+gV2wS\r\nWaQNWRBImmJFWgtOOuxhkBftGajtexDEIuE=\r\n=9rGF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6c2c2b2b16d0188fcfc620c5bd95622d34ab600e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/rtl":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/shape":"15.0.0-canary.a52be2d5e.0","@material/theme":"15.0.0-canary.a52be2d5e.0","@material/button":"15.0.0-canary.a52be2d5e.0","@material/ripple":"15.0.0-canary.a52be2d5e.0","@material/tokens":"15.0.0-canary.a52be2d5e.0","@material/elevation":"15.0.0-canary.a52be2d5e.0","@material/typography":"15.0.0-canary.a52be2d5e.0","@material/feature-targeting":"15.0.0-canary.a52be2d5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a52be2d5e.0_1672773269933_0.8795961481263428","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/banner","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e38ba17c5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8559e2c8f6ab8ecdb6a653b024660bd645e9bd79","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e38ba17c5.0.tgz","fileCount":31,"integrity":"sha512-lA0zHCJhR3I3Rsw238ARXdqRuSr3xTJwNIdVeLJlVd1VnQpqcXTY2dcsMt3t4y/D6Nh/q8ublLw4rK4ViYslRA==","signatures":[{"sig":"MEYCIQDKsw48f9sYibUQuxdh4loQFfl3aRIrFYrN35SYji+9zgIhANWn2xflZIDDaHO+d47357mkLpfMS1pWoiVJsibk4iaH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK1XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+UQ/9GD0qD7t6j6oP8BuBn1Dhf3cyuMNVrvfI7AY1iwKED6wspcgb\r\nPj+spi3s7jQNC5ZlQjtn2LfOa/BrldcLJE2qaZEOGcwn+ilRZXvD61u6Z9br\r\nIb9L9k+gFHQpK1oFMsqKuRHvzPBJ+xbqPaNiK7Nlk9eVv22qOz/t38ERcnE8\r\nPrvzhiKOLOJBhkMLgWRMS6wxgWRpgPGZrosQqYry8exVgjYbWNCJVRWgaYaO\r\nw3C5X3vYrIFnrYkel4gICMeo1AYHAYdUd21yINR/5NM7UKy9oRpAx9aE1u9M\r\nD6YzAQvTbIFTghft2rql3AVwms3js6qj8xdbJfMGXjEHlVSxwI9wiP2EYKuX\r\nRYL/kPvzNV4czwO10nj3cEPJESUPyoYnqeCIQrdEiBB2A/4839wUXsMkD8wc\r\n6D1Jb1WyzjHob3d1wgmhAQtVtC/qDibzln8ZSdVlW5UvURWTUIdnYQdy5RfO\r\nl1Jttu1BVm1CNztXDdaz/TRO1GhUWQD4rPTAJ64yUIq3BVkrB6VsQUznM4iu\r\nsbakhsEzcqi8qRHvg5crWR7u90KeMQb8PqNHJaWZHT7mIKLeSPljN3DJUY2J\r\nPX6bUwnjO0L6H/DwXPdyVvLrwU2Ks6mUD4/TevxnByq0QEGnaF1yW+BhpHlL\r\nSRNZ1qz86ejWwNDVZsZmmL/Nv8Jj9jZzdJw=\r\n=gZzw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d44100693c450240b468ed28efc3841fdde62da4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/rtl":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/shape":"15.0.0-canary.e38ba17c5.0","@material/theme":"15.0.0-canary.e38ba17c5.0","@material/button":"15.0.0-canary.e38ba17c5.0","@material/ripple":"15.0.0-canary.e38ba17c5.0","@material/tokens":"15.0.0-canary.e38ba17c5.0","@material/elevation":"15.0.0-canary.e38ba17c5.0","@material/typography":"15.0.0-canary.e38ba17c5.0","@material/feature-targeting":"15.0.0-canary.e38ba17c5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e38ba17c5.0_1672785239629_0.9213616474350403","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/banner","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.49041a6c3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4b80023f244e186e0f195ab6edeb1ac24777036","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.49041a6c3.0.tgz","fileCount":31,"integrity":"sha512-AInNCHbnQ8zcCTUFlUF0Y3T+//nwuIzCJppi5wwKmBXZLYxtn0h2zq6Bw+nPfBA3hgJYGzSL/QcvakTCd18CCA==","signatures":[{"sig":"MEQCIFWytM1Rj72/1OYUeqZfCVyZAv0HwpUnN2/5cmIQBfF8AiBOmo7h5+hCRtuwrr/FrR60+nuxlvl9RxV71VMZbGGSNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZjsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplVhAAhy+HtHfav34iP3LDjPE23TSZlnC7DGrLq84sIK5m0Vu9P6D6\r\nnc33XzBf/xuOhVk9NuPmclGfCdQG8XE9i9NsvTBwpnFwPguPQwf4h6C5IwnB\r\nwSP9+6smA42O+A0pTkFxNaWaUicYfyiuF1RjEPN5nEEHKPrJTmazDlV3DuNo\r\nJgMGaN/ou0SgxheZuHVewoZnwwag9jM4rQE7VHQifhrVJPEnywla0E1Aw1OV\r\nncGqaOe+1BsaigsZ+206pe00WunRIN1xegdhHEwZ+z9dU9Cd4u5oebt37LXh\r\nbnJhj2DCB3TMfRuY9BZTG3mVWCgR4wCM/laibfbIVO/YX28wcxyOs4jSUfJW\r\nB+6TEh2hci+WiJXDUr9HHEgc+bgrY9sgKlndNp6ZUYsVciSpWlP8rkRsmmzH\r\no/9pu9lQtJcYRV6u60oexUmVj5jEQh3cZQO6eLBWTQv9sLf9g9dmePN5GWCQ\r\n2/zzvHCKQhr0QeDQfwBVD/i+3QGBuaFTJHAs4nmW7CYX0H4m2wOSiJYGiOma\r\nwBdYR/tvtPXLaGTYv5O9wLpEJwC+17V0WnC3jchWMg6kQm+Ss1MxPrb5Nni4\r\nwhpWqIJdk29xV9t5VjyXkKpFTok3jNMb93qX9fPSbi8s17/V7cOwwSvm3GFu\r\n2+PvCzwm2Hsic1mrs9huNsOkvihqm5NxsB4=\r\n=PESN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f012497ba1285ac3de691b5e25afe7a21ff62bdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/rtl":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/shape":"15.0.0-canary.49041a6c3.0","@material/theme":"15.0.0-canary.49041a6c3.0","@material/button":"15.0.0-canary.49041a6c3.0","@material/ripple":"15.0.0-canary.49041a6c3.0","@material/tokens":"15.0.0-canary.49041a6c3.0","@material/elevation":"15.0.0-canary.49041a6c3.0","@material/typography":"15.0.0-canary.49041a6c3.0","@material/feature-targeting":"15.0.0-canary.49041a6c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.49041a6c3.0_1672845547811_0.321368151994756","host":"s3://npm-registry-packages"}},"15.0.0-canary.c492898c2.0":{"name":"@material/banner","version":"15.0.0-canary.c492898c2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c492898c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0fe9bd39ae2d58ac0b2113239079e5a2b816eac9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c492898c2.0.tgz","fileCount":31,"integrity":"sha512-JLh5ZghXl8yNS2Xscq/DN/ziKdLGK0Wu38dvX0qPYFvPbQFOvbxYtS90ovokqB5ROI4kiw6VrDfBxa40r+0tPA==","signatures":[{"sig":"MEQCIFci+k8KzNqcIEux0Mm2OYDf6X/Oxrqv5Ud4FUD1T6YEAiA3YRu4KPA7pW0d7gAoaA4hd3tLdBcQrl/x5ryIfgxYwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtbmyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkTQ/+P71tnvI+/aFkLwqn0wMFbVlgk+5mzTlHwvlNv8UhuzEFNVcN\r\ngD4zRpLaHh0EWhTsCNJQpJ8aiIVKh4Tucym2jyNcuoavjJqw3L8PXNvbN/VO\r\nmwNoTuxun+TnSHDk/V0FFKNpVgegm6cjEul7QcMhxUQUDbB1D4qGEqMELwoy\r\nBYj0PYUx0a+krUv2SNxVv85QktrjroaUfqsR/hSN5X2i2GlZ/a4mvwiT+jPm\r\nSKPrkQ19vgr+1iFSnkC0il/xwzgvAhTitIIUmTD5F++l85ArImwx8h/uocWj\r\nNMqr+NhsRZzRYtq/9KG0DSo5PKuuqVpsVdOTlgMIv1jlL/GuD7iK68dPey8H\r\nZg2eg5/4VewPqYBlbDjJQuIgbeBk2Da7ZzJU4pEG9lsH8vNGyUJ5ch+osBSo\r\nmsFhJMO6EDOZb61yYa8pKgbNsAUGsjyXiZ7nZ35CoKIvaJYHFg2fScfwe3Ps\r\nqLIDxPktF3/G5+CtChe1MqgqtsKLba6aceSvSgmAc7CwLaYno/ERiE33TBUs\r\nabM/pLT86rMeUWwzghmsSKEpQKp9n0kuLAp3N00d9rEuvA4WokIsd/1ics3C\r\n7n+V+BuNImuOITLWe54Eexrs3qYkh7tjPVAvXaSvUmW83WwEuHi6XSP4AaHl\r\nvpa7jQ2qF/kzYIUwYRKZjDXMJPAnVh+FXoc=\r\n=qBq8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8f57d41cc546a15258de2fac7e4ddca48b2987ee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c492898c2.0","@material/rtl":"15.0.0-canary.c492898c2.0","@material/base":"15.0.0-canary.c492898c2.0","@material/shape":"15.0.0-canary.c492898c2.0","@material/theme":"15.0.0-canary.c492898c2.0","@material/button":"15.0.0-canary.c492898c2.0","@material/ripple":"15.0.0-canary.c492898c2.0","@material/tokens":"15.0.0-canary.c492898c2.0","@material/elevation":"15.0.0-canary.c492898c2.0","@material/typography":"15.0.0-canary.c492898c2.0","@material/feature-targeting":"15.0.0-canary.c492898c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c492898c2.0_1672853937736_0.871834205496451","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/banner","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d7a2277de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a222b13d545c732d20ef3923700b9b652bded46c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d7a2277de.0.tgz","fileCount":31,"integrity":"sha512-1T8IeA9V0vq51rLvrToArLUw2vBwIpOFz0DbWdmecaNvA9jdhfz3XX0LQlVmYq85ctyF/ELzuAICYyjPD3nvxA==","signatures":[{"sig":"MEUCIDhInkTn7POJSDe0hf0SmPqyWSOhzKarrCUz5vvYz+IFAiEAh+7bUHA+Fpftn5xRoH7/0sT6fbXiToPZWQuKIHFrV6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfF+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrekA/+NlmfjWugxO85piAjbemEgUkR1AhA4dsErWf3UOEF/uCznXRY\r\n9bcugjhCD/foSG+FfOsiQxDKScpicmMCKAYH2sLJE9Iy9Cj9Jf/RX2nvwcy6\r\nAOvmptq2VZspPPKBixsYCYfnPmbz0J7pDQvEaW5TXkzwOv+1YlovCgJtnXWE\r\nOEJVFO23sePghGtoySzvE8bLc7KdcUA502N1aDwIgH0prN7IR2fPLWCzNEDq\r\nXimB79VGGmadMEIF2E9t1HCOuNGzNjnggt6/eRKuj4BlnFPaucxvfFtjSoLC\r\nw0ddsS9Nq9ZXaF2YuRwXBo0EHxrA542OOKKHKRLWJce38aRb1tMGoQ0j5Sy8\r\nvaj/Ka4e56Y5TOMMkG9eRf84HG38TYtzjmFNfWH6s5wWkVgU9Ar0cG9oz3Jm\r\ngKiYfs9OBoJWxYYJZrSt1sZ/ba3mnZg6ZD1v3XNoOz6iwnLp4bft7Ogkruf4\r\nZoWS33PELKAX9uCAQals57yCxxVANVc5NVpf7p3SeOTdlvVQKMXz3ZATGN1h\r\nmoU+4pX5N4uhj556xfsASGbEitRxWrsKeIvxvKwThIMuns5mCqsEPFy5gjcs\r\nP3oGdWRDPoqxMXIuu428VELGTIIByBpwvBd0yQ5sw974d74F6KjNlBtVkZYB\r\nlzBijag8rJtbQutNvKqu0Xu3FPAqa9dQoHU=\r\n=5ULi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f9c71e947019fdd0ca8837669de0401f3752d1f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/rtl":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/shape":"15.0.0-canary.d7a2277de.0","@material/theme":"15.0.0-canary.d7a2277de.0","@material/button":"15.0.0-canary.d7a2277de.0","@material/ripple":"15.0.0-canary.d7a2277de.0","@material/tokens":"15.0.0-canary.d7a2277de.0","@material/elevation":"15.0.0-canary.d7a2277de.0","@material/typography":"15.0.0-canary.d7a2277de.0","@material/feature-targeting":"15.0.0-canary.d7a2277de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d7a2277de.0_1672868222655_0.6047115014134077","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/banner","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.fd95ca7ef.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ceec800c2ab22bb8429b2202f5466bafb298b707","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":31,"integrity":"sha512-lplDzQjQGbImfr+IYkO0USpgDsWx/vk0e6qg71jwd23m75NOZG6Pv0U1gtL2LLVr4hgedbLq/gqKSilsZkKxZQ==","signatures":[{"sig":"MEUCIQCQXRJ7GBLEXNKKyGQVUBZsJWS7ZXOKGHuH8VdsgrACcQIgDkHRrDN4NKtD//WpVwg7vkLxRMlssCc4N05Spuno/Wc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqGOQ//ZAyjAtRndwyiuDjFWDX72hpNDlL3ys+qzA/c3F75bHQjkzGy\r\nwEY/UDGdHl+w84tWGWzP5+MmpuPdnLEXDvX7mNqkZy3CSHHMP9zSyXfhcIH/\r\nEQLSbsIcPNh5/CDjM2yZo9T3KLRFxOmVhDe9Uy88/NpNNc0Otypr5dJdkyho\r\nnT/vOEhW0n+TE93BME3EDdxG+1jKr79CSbSA4Zy+oAFhEYqYkq7jwbPJ3FTp\r\nrzzezYFUdlRLQJJqBPfob07HsUn/VDxC6gxXzE6O9FrmIvgLHdRy0+qG5DoK\r\nBfowET90BDj8YGQbO+I6jI/dA7h3ZbacR8I+qY2jhcfPJJu683CtVuaUgRxc\r\nSpOlafs5K6dUnakqZ7jBE/YUJiShohJvYUFgzPpCt4zZ/FcZ/avjHG8pMV6J\r\nb9jhMZga5Hk5Sh1iCQHH6H+PWABeL5ZhONRSzhZ71JZGPcd9Dg0R2k559Ha0\r\nZ6RqPC3tmFM5TwVLTm9SerXwZnof4XH3jFBX4WfjRRMFz9BR99OJQSRpJbMn\r\nFTNTfCo1ZH+WT8q6E85An9i7W5mRNhUVFcG4pIo19FuMNH7dRTHSQdwoiwZc\r\ndKRpeG3KnM58Tu3yApWdBt/fRIxtH5M0bMJZLM3ROmvZAbHDo27EUiHmgrXI\r\ngq1MfJa0topCHhQnxHiOYXE2UGW5npb01JY=\r\n=Oq8n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b0d2fa371ec4a3d0a8a11e19d9753b1af5d2d62c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/rtl":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/shape":"15.0.0-canary.fd95ca7ef.0","@material/theme":"15.0.0-canary.fd95ca7ef.0","@material/button":"15.0.0-canary.fd95ca7ef.0","@material/ripple":"15.0.0-canary.fd95ca7ef.0","@material/tokens":"15.0.0-canary.fd95ca7ef.0","@material/elevation":"15.0.0-canary.fd95ca7ef.0","@material/typography":"15.0.0-canary.fd95ca7ef.0","@material/feature-targeting":"15.0.0-canary.fd95ca7ef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.fd95ca7ef.0_1672880649811_0.6629409525271088","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/banner","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1eb44faf9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88e67e89cfecfbeb5016b947b6106dbc2f956626","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1eb44faf9.0.tgz","fileCount":31,"integrity":"sha512-1tYtWAKa0kjwXXo4JuvXe4YDuiwU77NcV1U0XvtyGJc9RxiG4nQ7REeex8AjH3TahH3xJCnzuc3LdUGGEJum1w==","signatures":[{"sig":"MEYCIQDbxgFAok/PDMtgtbgl37n/HoeNmUiyodg6YJTAAkNeLAIhAOlWSY2lJ1fx5FOey3deReNAOKHeuQ+jB9lQxq3ocyK6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpQPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIYw//Vh331XnKTdoB2ImahUONpsb8JS9UfOHbnrchwG65JgjaSJkr\r\nXS3RfryVtPi2Fe5bAx/rBZJ/0Yhd91Kcj6Giv221Ow4mlucwq/iQBj4uul/Z\r\nWEpotKsV+ETJJmsvjJz48HTcab++o04Wr/HMqxndoBqSBhhIJLIFVZx7vZK+\r\nOKQvWrHlYej0c7qrh7vkn6b/UDfIAYwK7ajqWkPlXWELUZvsLNyoR8tE6TTB\r\nJMIWm1dt0lZSjcAOwMFvmbzST0c9wt6XSxpHQUZPGxIJdQ7wMY37xxgIIcwJ\r\njSsBpLCxf5By2Ypg6K3Asc5fLWZmXt6pmxHPjlfUbm8kpIUz5pUdE/Ja7G1v\r\nzYeHqtKQpsK+o8oA6AF7yB/PhwP4OWQbBd7gK1Pkrpkjnlf0/n3BubXk8Uqd\r\nQrb5H3P+aqvTXYOKKZV3eCN5Mbx/1sSPtb3lY1dvkNjWrnC2GaNjvCoM4avM\r\nqW3FdoR0GD8ndsskGouh/XXSydUvVlwtdVZIZHLbs2IwYbC5r4phib5l9aJh\r\nnQkFR0Az672MmSl7yS+ckNLOKCk8CxhAiIJWb739FyVKqXuGTsB/fDvXeDCi\r\nIv9vjEaKwlq7Fpw8MWOKmHB5YrTDYV+NM1YTrn+xT4XlWezWo03Lzs5DEJRY\r\nxGnnyahxdGyrrjz3szR6QA/3LkaeaydWjYg=\r\n=OcRt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e0eeb94598a14217ebc97ec3e249d126a29a13a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/rtl":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/shape":"15.0.0-canary.1eb44faf9.0","@material/theme":"15.0.0-canary.1eb44faf9.0","@material/button":"15.0.0-canary.1eb44faf9.0","@material/ripple":"15.0.0-canary.1eb44faf9.0","@material/tokens":"15.0.0-canary.1eb44faf9.0","@material/elevation":"15.0.0-canary.1eb44faf9.0","@material/typography":"15.0.0-canary.1eb44faf9.0","@material/feature-targeting":"15.0.0-canary.1eb44faf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1eb44faf9.0_1672909839167_0.8174471677256447","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/banner","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.adcdb7db9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4224a5a7735b6ca15795d9392b1579d3a645ef73","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.adcdb7db9.0.tgz","fileCount":31,"integrity":"sha512-b/d7EVpESYepvfloC4CfpU5Iaid7f02LF0lp/INzH6SE9jXNgyTlPKDGqpPT/mefZPgLiFY8Oq/y6YC8+qdOQg==","signatures":[{"sig":"MEUCIGL3ErvdKrjJUoeZ4c1j/AqkxUb5v2Ep6WNv43EXgw1gAiEAoXCus5uDzP7avUbYvtrieczTmsDOM2tfygooCYZC3Bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvl+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBOw/7BybZSeoLr5Xez1TWpsJFrMx8v7Wj34LTEKTWH8bObIvHK38k\r\nGrH4Q8iOX2TCEWMQbojwrISE245sztGmV1G5BYc/1XGGfGSLP5Pn5jbbnyfx\r\nLDF+8mzNpxBXeMmLDhOAfB4RbUChWDZKmOy1KsMr/kRUEMd7BRuGtycXv1/c\r\nxvUcAG6xzZQkbnHk0tmzA32Ib+5wYg1UJe08KfJw78BsvIapR8hqWYdX8Ff7\r\nmnW5eFyAPUyZRjCuZtfe809Sn+p+MR+POu5aprL61hQvf+JlGo+c1rUAL8wC\r\nGUB6ueXsDHwFlgGTex7kdkyABZ80lh6xVStlkfyk+CMVkPerzr6JXcvBEoZX\r\n//V3qJlfIGnq5WhVaE9pKlJS4u3wyzj4r1fZ/H0RghKzJP8WTa7CqlsMtL7L\r\n/cvSZf5kwCq/4+R9d20tfe11eNWEfL6YeWvXdSgZKn1eiGEhXJ1SwWYNdnUF\r\nJu4ABXIhH3euBHXOvihgyXVJPM4+IgZZfbJhArlUs8NhFsTFnhFqK2ejdzJO\r\nCzl7UI/biS6Ayzyt4XykRSZzSGWEwvEPH21JVXh1XLSqKV27KkOJ/uLWC252\r\n5oboqLEWaDz5r/8/KJWU2Tc6o74K36xUui791iectWJq/OP0e6z/xEM360qQ\r\nVSPdmBeu8AIpJPvctwUokJ+6U2p2sNNU/x4=\r\n=9Cqj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2bb419da8b7b393c085616b6c5f28a3eebf832f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/rtl":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/shape":"15.0.0-canary.adcdb7db9.0","@material/theme":"15.0.0-canary.adcdb7db9.0","@material/button":"15.0.0-canary.adcdb7db9.0","@material/ripple":"15.0.0-canary.adcdb7db9.0","@material/tokens":"15.0.0-canary.adcdb7db9.0","@material/elevation":"15.0.0-canary.adcdb7db9.0","@material/typography":"15.0.0-canary.adcdb7db9.0","@material/feature-targeting":"15.0.0-canary.adcdb7db9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.adcdb7db9.0_1672935805789_0.7423034116344283","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/banner","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.067af7eff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27bc741f36dec286379a8f9002397d99fc661644","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.067af7eff.0.tgz","fileCount":31,"integrity":"sha512-S6Mny+d46c8F1uih/1um8cvAmLYxJwpdgAKpn+SsIZeBpxWCqqc4cMLxgJUQ8ueBwLZzGbrVBHGeF1zyED67Vg==","signatures":[{"sig":"MEQCIDqbwy6EnoZxVGDZL4TYLNNznvWDVatKGb9ta+SwoPsAAiAtz8T32OqEXFvQSA3SNxfHsmbwKgPfpb9rew6BO2pxNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKwBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqlzw//ekPSpzHNvJZ8BWGAS4oYO5bFaFp4oTJ2wyFwj/5u2oHKu4rk\r\nRBklwoXOtZMwo5icdRrWotYzVcj97kmQi4ZbdUvl+O2AweV90WOCZ15s/j+w\r\nYGqEgjYynAs0hwlSt3IUgFnor3R3RWIv0RmYikCLhmjN6I/0/UD+NU8G0Ghi\r\nZIaYRmL8FCgc6V9bdIcIZFoTKdYDm6ZiseblvZfpfFjFYA3ltBvvOJH2R7hh\r\nUJdxPzK/xElKmPm/dP1Y7F1CYNF0rmloaYH/ioOomMI5VlAuGCA4Dy6GFZd0\r\n6LywFWQA7JUOiHsL5nF7f0HQqttNwF9aKFYsUIh/XPcI6aCwstBzyAdk/1qQ\r\n7H7h4ZCnw28BBv/GjCMdhUoOWjr/Iz51glclNeLImqPPY2Qv1Pw+l5L9Gqbm\r\nXnTzP2u5+1YeaXNSsOGCSsOniXDPfZZM3+S/zNZ9XBCPCKSrbxUvUbzofwQ+\r\nHYSJoC8u50iwUBfn9fUYVNXCksx7ugv8vMmfkNLgbgrUvjoGQZRYzxs3ZJBC\r\nu+jGK45go07rTceA8bNEUj0M2ZwpssAXyGDapnboy8sW5226qTRNsBJFIWXB\r\n7QeplvfNJQ77+CyY74ON7sTB7EeKTtGUd8VnLYXuwrO6zJtNPQIeihuvizQx\r\neC7euuYY5E2GGJsHzCiDowgjZpI6GZ6Cako=\r\n=51kP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1fae2c792ff8ce557995a8d5d858676b4355c7ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/rtl":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/shape":"15.0.0-canary.067af7eff.0","@material/theme":"15.0.0-canary.067af7eff.0","@material/button":"15.0.0-canary.067af7eff.0","@material/ripple":"15.0.0-canary.067af7eff.0","@material/tokens":"15.0.0-canary.067af7eff.0","@material/elevation":"15.0.0-canary.067af7eff.0","@material/typography":"15.0.0-canary.067af7eff.0","@material/feature-targeting":"15.0.0-canary.067af7eff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.067af7eff.0_1673047041389_0.724448156744911","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/banner","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.21d1196a7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8a3327661d0747fbec4b1dee300dfe5a574b454","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.21d1196a7.0.tgz","fileCount":31,"integrity":"sha512-drAy1MifK0uXbF7WTRyg+6O4+SqwYpfLksQeGX7Dg/eldE//nwfi2Sq2w+D4TV15l+CPSnSVurJLaPEnPRsG+A==","signatures":[{"sig":"MEUCIQCb3MEU9bgFZzp4fdV6r8B/+pvS97zfKsbFxU3K4W6csgIgdvS3sSkdrc4I+nG92qmtfhtbsHCNUP2m1DRHsyxAk9o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/AgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHIw/9HwBJR/QpNZQ+uNAr2Whd19jbTwN9vAyoKulDv+9ozUuYTG8h\r\n/BQJ49VaVt8pV+71uT7FuGTdYgmUR9s4IlzCUXHwe4x8X3ZuW2O1OmO2mgnJ\r\nZJdlWJnhpShnBq+UxqVzlC5ZNPy3nYB2m5VVehoDdioHeCosTfZeks8pewgu\r\ndHDIc+L40dKHdNpPhFuL11YOmNp7UUc0pf0XWd3YhV5sYa9eEkpmGMN+3mAy\r\nRwCjnshcKCNMb4m1Q2vc/o6xH3Y2FDp864Y3yA3tj0sg7y6GDI82lIHUjpEn\r\nNWEL/SZXIRsUPb8r1T8mFrsx+AmbamIX7Gz3ZdmE0KHsn3QfXnNjnVFsh7D7\r\ngh++7ShIxZNzHpKAXtaV9DKesK57I2aPUggCIdoDJj28FGt2jmJ3OyYoWd7I\r\nlhSyQ5zSAmV/X8pT+rMgavELH90VHQuKv1bygCDvq8eWttGV/RvxvciCWv1Z\r\nCejn8EQ9g/n/+QIwH3hZvlCHjtP2rDmeOELE9QrFmO1kp029fXMhVqTAj1U7\r\n1FyqsvQq0HkDyf/ARncZlf2drfnTRBDUFR2wX0qgb751fFznkUZnMW/80dtC\r\nqj4DTh8fIVA9W6JV8v4IJAGQcO9T75QQZ7Ts5K7pI8Lgh3UBWcYttQicOan6\r\nJSp2AKPk0l6Y3N+sBwPHPj1gQZe6Gxo0fAg=\r\n=6Sbz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"361e536c54e276112f021b419f666618a20599f6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/rtl":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/shape":"15.0.0-canary.21d1196a7.0","@material/theme":"15.0.0-canary.21d1196a7.0","@material/button":"15.0.0-canary.21d1196a7.0","@material/ripple":"15.0.0-canary.21d1196a7.0","@material/tokens":"15.0.0-canary.21d1196a7.0","@material/elevation":"15.0.0-canary.21d1196a7.0","@material/typography":"15.0.0-canary.21d1196a7.0","@material/feature-targeting":"15.0.0-canary.21d1196a7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.21d1196a7.0_1673261088222_0.09599672920030855","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/banner","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8d2d8d3c4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7c22bbef17397075702e8993dae05b216fb8a4ac","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":31,"integrity":"sha512-9RZGXzKZa25Gnp26u0MrEW+4n0pihhMDeLnrMwsYohIXCdPg7zVNqoviaKMGU276wZzSNsbf/Ks+I7KLI0YeDw==","signatures":[{"sig":"MEUCIQDZOae9CZPStXlo/mfIFqrRRZjdSnggwwMuwguheAzthwIgHohxFmdKp4nZPEJIOtzTobaN3SMPZ3cd1RyVJG0CXB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJRSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHDA/9EHouSoQzibu3iNASwndLIdV/LsMnczG8gTFWe6uMikX8cl35\r\n3r9aad0Dfk9+5bl4+tnkXUGbQMtJReg86ig5+7SxOurzXWhWHSZTYJ5bawYK\r\n2Y7tHWD9r/xH64+H3gfST5DeSbCErlsMoJMZoNvlvhJTlu93P8Vzf1kJ2OzR\r\nO6sp5WfadtlpxRuqSLp/o6C+DUXDEM4a59Yj2uXnaNWr1SGxrUdpPHvJXKyX\r\nO7qIyx/YQIMyOPCBZv+0A1kIUH/CaX+uJuH3Px3oFym/UIDj78aAQADv0LbD\r\nySDoh2CKh7eRZEsBdqNnAZixfcyVM8ciRpqWHDrt7Bh1jZvDcq7JV5dX5RQA\r\nqTUyQ2o4i0TgopS1Q4kNmBGo2IeVuIxzQUNh7ClZLqqapcRV4P6qzjJuQTBE\r\niCJpnTGgqVVLlOt1qlpllxThQucNBJ9bXrfvezaENBE/Nn6pU04Ae6ohMZoe\r\n/EVkdHd5kQWvwKwCZPz3OzKT81YfILMGILkJRtxKQJzoYiUBaZU81bYK3Jsl\r\nA8DwRyhk+oM13fcJX1GqSJWh+reOuP1xXAxQeIMG0BGQZ79TLWk70pKK7e7O\r\nx2YDmwWnqY0TCIfKIh2sbhwtTjdC3SJ/4xbLhErqmtbYV5oatSObXinLzzQi\r\noW6MN9UzW7+yJxikL9Ne8pNLCljtn0zEfrA=\r\n=1s7q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c2df4624468d99280d9dcb0894d04d839fc8673f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/rtl":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/shape":"15.0.0-canary.8d2d8d3c4.0","@material/theme":"15.0.0-canary.8d2d8d3c4.0","@material/button":"15.0.0-canary.8d2d8d3c4.0","@material/ripple":"15.0.0-canary.8d2d8d3c4.0","@material/tokens":"15.0.0-canary.8d2d8d3c4.0","@material/elevation":"15.0.0-canary.8d2d8d3c4.0","@material/typography":"15.0.0-canary.8d2d8d3c4.0","@material/feature-targeting":"15.0.0-canary.8d2d8d3c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8d2d8d3c4.0_1673303122539_0.5108415027288891","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/banner","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.fc6ee6c32.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"187e0ef045b747cf136d72811e53016e1ffb8e37","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":31,"integrity":"sha512-K+xdBU4km1GHGx6KWYrSk2aGV8UFwPuNf2EdMU1NlkkBUGQKaOH+dQSma9uat7LZ/AHUInKX5aTV9Kaf53cO9g==","signatures":[{"sig":"MEUCIQCi92vYN3itM6p0yyMQrqx+ycy8wN7kRTR+XoBIBdaErwIgE89FMZKLDmxNyt+ujGFIcpJ9YOu1EZcHjzJ55MHjZiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZJpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5mBAAkIUbAdiiCtDCObHrUJB2zfGVLwbxVNguZUC1WlzoKCKgHi4y\r\noSLrSj5CUl8n4qrjoKEvDMdoa6KTCMnbNN+PFN2GHtjxTSMLKgSPpFjLlzqk\r\nBxtYcB/KpDLAJnBj4zi/4msD24Pg7425Yf5J55mIq2LJhM2f0NnAutKjSPTv\r\ncU/vVbKS73TlD9KIJH3HatuMteN5bDCH2H5fB9bnD9q8zEiABdNQHvEnFH6n\r\nSvQNqwEllZnA/8gck005JNjLcXfj66PtEi2Y293YCCSkBIhznXHDUmvgJkT2\r\nRFovBfXed803lNQa2ff3JsS4cOz8x2HSJXPh1NZet2MDsJQiEoqLEi+frjwU\r\nP2F1pX2SayRfhDmuWZX+wToyfhiY8rvOF0avKEdREoZ/ZYmudfbkT4CDwd63\r\ndLkIOgTmegbu+3p6vkpeTu8e2ziSnFLAX4Yt7rwaQdtvTkUCtQinjIoQSetz\r\nuVMr1oJDFm9YX2d3T5ex9YhtP21a361yv34B4WmjJLvVdO3W5Vcny7sQQzBT\r\nhvYf6zlArxir6sZmEFck1tjcvGsXlqaPbrf8X2THDMb/5CWFYDIVHzVeOouB\r\nCKiyEp2hp34fVBCy31rlzrJIAj27oSlZVsipIFpinPmjaZ8M7hlRBzhsGwPl\r\nNjaLlUZDEFMI8Jx2F/yiofEPnkmp2ABwrVc=\r\n=ktnn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"225aabdf74bdefc3d2f70f268ddd04c501a821ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/rtl":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/shape":"15.0.0-canary.fc6ee6c32.0","@material/theme":"15.0.0-canary.fc6ee6c32.0","@material/button":"15.0.0-canary.fc6ee6c32.0","@material/ripple":"15.0.0-canary.fc6ee6c32.0","@material/tokens":"15.0.0-canary.fc6ee6c32.0","@material/elevation":"15.0.0-canary.fc6ee6c32.0","@material/typography":"15.0.0-canary.fc6ee6c32.0","@material/feature-targeting":"15.0.0-canary.fc6ee6c32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.fc6ee6c32.0_1673368169272_0.9567463814304882","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/banner","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.73537ab0f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"40f03c23af2c15fe1eed44a27022f6d5c6db6468","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.73537ab0f.0.tgz","fileCount":31,"integrity":"sha512-mdMN7foZJO90LZgbIzYnPYJ9tk5aTNpItsoua1Hd7hrVOo4qivAr+P1iiIsxsaNdNzZ0e/AkvVJ7VxghqzkC5A==","signatures":[{"sig":"MEQCID+BLJhGHGdyrQRPFB5Zk2tzsJhDXBKLB4/b6HU+VMbWAiBYEjvreLbDjGnuS9qW2AZ12vtl161izKOgU1S9C3GHSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvaqkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7yw//e+KSFEGjahpGEKB/BFBV7m3sXDoQiBqtl1JCBUWKtQ2zQOCC\r\nt+U0SpyuKpN89tBIFClE9o20mmJvaeAtwfIL31H+rJcgM5CK/Igrmj9ZcimM\r\npe8qTXRRFchSmsN7WFzC5vW2Qg5yWY+Wf+BtmiVKWj8zqjnzJumbsc0Oh+aR\r\n4Z31qq8g9aJWTQCzCj/S4UeEgPmw1+WHlFJHgC4TKCb8spUz9XZcT5z0+m9r\r\n5zEx9GQtUS6LPNSI3D/8XHkKzsaDM21DfQU7dtlTQNHsI1c3qfg1C3Q+55ok\r\nIcuZzn/w3Yn14Nv1XLtrWtJ99Ud2WiBs3Y3xcATL8C1nGxBqdDEw1u9MyfHF\r\nDnMmWJ8737IElRbQUMc1WiMpg57hn63dF254UhIPbbMau/WjyN6DoO4IDlLm\r\nnuieFFFLiGPQ/X33XSkPnKkTiNc/Ee54WDa8hFTxpP/0zORQvK+EZuDKXJ6W\r\nkbmpPzdH0JpehwIePJRtm4Ro6l7ZrmATm7XEJdv+TR3M4eoEMDz5Y4zpzIGh\r\n2vhAuDCGnFxijWHHqtsM9Q1FatAneO9NX8G8gotpFVSBASuJNoi11wO2slVR\r\nF6RPgtOgMaewSuJ6rZhZK39PCtXpU6t4JxzGhQ3YcHpRrtgt5LFXMM/tRZww\r\nbXmyLdBsJ+MjSHXsRecXe8kNwVTsZbBCrk8=\r\n=OTbB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cb3a480e7be3c8c7bc8f8ee0acf1ee8145f266b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/rtl":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/shape":"15.0.0-canary.73537ab0f.0","@material/theme":"15.0.0-canary.73537ab0f.0","@material/button":"15.0.0-canary.73537ab0f.0","@material/ripple":"15.0.0-canary.73537ab0f.0","@material/tokens":"15.0.0-canary.73537ab0f.0","@material/elevation":"15.0.0-canary.73537ab0f.0","@material/typography":"15.0.0-canary.73537ab0f.0","@material/feature-targeting":"15.0.0-canary.73537ab0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.73537ab0f.0_1673374372486_0.6130902781484262","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/banner","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.684e33d25.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9e6e56f0fd1f572a046ea0dfe3fafa181a5e6c84","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.684e33d25.0.tgz","fileCount":31,"integrity":"sha512-PqtGp3KWzdu58rWv/DIvSfe38m5YKOBbAAbBinSvgadBb/da+IE1t5F7YPNKE1T5lJsQBGVUYx6QBIeXm+aI/A==","signatures":[{"sig":"MEUCIBC7YkXrlyMcKLAth7Mz4Afw0BTic+7ls3GFcZtrItvuAiEAwtSPG7Xm2TeQu0C+VJXqfMgAN55eUck/x55tA8sChhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbpZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpExg/+MaUDg8qJslVuR3xGeUKh1qK3pP6Knr1Jo+0+8OKeKlYj+tcL\r\nbXmrGk/QrGmnahEMlyeVjO5yzQiCTgxIYiO0f1AviQSy8TPCLEcIVJ7d8tWs\r\n1T3jHsBRTKtEkNsgX3BA+HajburjDxM2Ngc4eo/vxqH1KXstnf+ndspcR2Lk\r\nxNtTwK9oQiKWgxRlIsirPhzszH8iIbTUb0KKS38Gg0PyeESr0Pd7mdwKU9uS\r\nSivBhJKo0xWyUDVilW3TE/f3D9CRkN4jZqtrmsrWkWGN2xOwuROt6chbZgjC\r\n33LJyv97UOSuenjXxspGJR+ic577FvJ+xOUVqsFSM9wa0xLL5dMAcYc3JhWs\r\nQAUpvS3/4OXiRGCc1NtIXTaxts/Zni7TNz8RhEtVz/zdxz5oLXUyeVQmqdnt\r\nHwn/jUh8DhCzQp8c/9zBUc14ZxW5nHnjXjJFk3yRAftxqZ4qzBP0PNO2ONUg\r\nFRilFXfjUAEP4XghUW9mXh1I4qdii6PtqwNsp7tsH43A7gpvdCJhz0aqvwx7\r\nZ/do07bZUW493WUTc8MCIWFDniOk7q3z8ONlzCIzQhd7WlcfOi0RrzPgdksY\r\n1FCF+Fb/D8QACc9XA6p6ose+P7tsjXrYFYwuqFOE6cxhl6+0kzOWh2qcaVTQ\r\noqsz5KBIfQo0KfLWQfAZ0FGcRH7OD0wmhHE=\r\n=YIxS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"518d26a1e091925c1b3a87f4d4f4dc828580a863","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/rtl":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/shape":"15.0.0-canary.684e33d25.0","@material/theme":"15.0.0-canary.684e33d25.0","@material/button":"15.0.0-canary.684e33d25.0","@material/ripple":"15.0.0-canary.684e33d25.0","@material/tokens":"15.0.0-canary.684e33d25.0","@material/elevation":"15.0.0-canary.684e33d25.0","@material/typography":"15.0.0-canary.684e33d25.0","@material/feature-targeting":"15.0.0-canary.684e33d25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.684e33d25.0_1673378393152_0.801607150749645","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/banner","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0e89aab6b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bb14dac6cf90dbbfefe0ba0477a01726e5167e06","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0e89aab6b.0.tgz","fileCount":31,"integrity":"sha512-ImMjD68aKuqqnUxrVqqhFbYTj5tZ3OMZgMNTkwt+ZOdqxkgxtEdj8LsX5Ec/hSJSmLzRwyt5AdVUrWzsOY8Iew==","signatures":[{"sig":"MEYCIQC1I2tIrTHABbrVbyiyabiz4tnn9v/JxGe0W0cyV9jrtAIhAI4W8qszXPI7/dY7/WkVO9x7vgsluu12zjCPeJlu3SjZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuGYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAOBAAnEH9v+JzQt9ERG8/QTtnwuNcu5ttCy5MjAyrs8b5kn10NWho\r\nz6Xe0jmGzj1qp04jPVP3/98KaDBFqTZzwz6NbEST6VVHV0E1+uZifT+/zVZE\r\nrSZLEIuHXwqTpI9eljqSjdXyPCAwQzat5FdBux/nQiF0Of++E0rwRADctVHY\r\nhvuyL0T9eyYQ2ZtuNTe6CfQ7Lhb5fwNv2TwzwH9fLw8PwKtARbQozsjrolwJ\r\nyW8UHPvggfo5IVznLpWQ2mIhVMdNca7Lz/15uEcZHdKNfeSGACEYGnA2bEpO\r\nGYrlVl1SEM8j7A7St7uGyDbKFQAihQWLKsvT41I5m8ybB4aKLjGBGI5ltvj6\r\n7yTCgqhvgVPUWf/Nf0E67GsUWzjBDkxERYIlkzNac2Nw7XHRZeb5MnvztDRe\r\nQ1hOgqpvpen/EKAX1M+SaloiP1kgJfhYm98GYqG7SK/mjmKrCTURcfxXwjSd\r\noVPc1ObUEYa+b0awvyQaoogvgLBmOHvd36gsX/acY6UH8ij2nGIr7hQxWyRF\r\nKhJSzqbNzPBrZGgVpIWTA8pgnBc2TqfweUOsJNwgO5j4P9wtyaXXyOVqsUpy\r\nRUE9RonXgmWLZEX690C4I2QeDYIccPreJ2qRh8lagZDHeA+XyA/NEutW6b/p\r\nnAmNRswdEVxXP6inWOQp+qgD8RLkNw9akVg=\r\n=oscE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e4a9f0d636d7f4d6c0fbbf49a7016627715eb3b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/rtl":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/shape":"15.0.0-canary.0e89aab6b.0","@material/theme":"15.0.0-canary.0e89aab6b.0","@material/button":"15.0.0-canary.0e89aab6b.0","@material/ripple":"15.0.0-canary.0e89aab6b.0","@material/tokens":"15.0.0-canary.0e89aab6b.0","@material/elevation":"15.0.0-canary.0e89aab6b.0","@material/typography":"15.0.0-canary.0e89aab6b.0","@material/feature-targeting":"15.0.0-canary.0e89aab6b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0e89aab6b.0_1673453976265_0.030235601955900027","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/banner","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b0103d10a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3dab7c5df3a5cd2ca8877448612efc84745e21b4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b0103d10a.0.tgz","fileCount":31,"integrity":"sha512-B4jSuMQqM5wCGLT+QJGQ2RHI0VdU4LYqU7RZ0/G6Xhv+eSx1lEzaqZDp05+4N2C2GiK7lAKKn3oYk+Trgr6Q5Q==","signatures":[{"sig":"MEYCIQD16PN6JrTIvi4XpGoaFClmMzVBYv4sFHiRz50K7B9mTQIhANoQGt93HEw6Qg7UsVT9lvA09nWPCzWHk6X0mHLvpyTN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwqBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzBQ/8DXxiGGX9l5ig5mLWKMwaUq7RsF6nh4B6OGISymm4D3XjQ7sv\r\nwrJFHz75ZFhp24fbJJakYx9yXkFyVhCnrv7c/2LS5jJfZnFpXXxRWLGlNv9s\r\nAKp0rj9K/WoQEq/TbLT537a1knqY3v6XXZwrC2C7lxrzs+t4SzrIAuEeGhqe\r\noX7KNniaCZG1ifSQTtgpOTh+lIO0Bjs8UlM1sTIfXAE7O8aG7EMxKF8Pzkjb\r\ng4BMw+TQYVZ9Y8JMTGFDLphRQkTypprbK2SrYB34LL2B/vpmgb5JbIepH0Oa\r\nHf35gm+pe/laICkaIizDrOrceUSQuAzyc7RTXtwVXNINYBHXWQSo1gfh8tRi\r\nhHjm2moniYSvzfiwepm4efXu03cA1jE4XmbVYUgVg+ZtejEfgZqdWBH3AE3p\r\ngYcC8JsZgVRoAKfQoaP8KavEE9h5FfBQE3EOm0fribKbZRKcbbEVQ6MW+y1c\r\n8nfE8YUxV5oUi2VpcM02HDULRAXmt3BtqFMulX/AoloJz7L+6A6mU4dWLVr/\r\n1k7vD3SWjGxbSvSm4dOVH4lEOCboVcMCB6xLvYVqMXEBVl43QLVwYl4AOuSu\r\n2q3BqLY7erIXuOHgZ/l1vRbx6T8td/vPb9XJQpzf5CL+jPhKVs8scf9RoWM4\r\nklFzgTB35VF2UVjVyB9FtR2zCidFzpDszOE=\r\n=VmLe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0e133b89a4afcc8020dbafdd4d22c734080d2d17","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/rtl":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/shape":"15.0.0-canary.b0103d10a.0","@material/theme":"15.0.0-canary.b0103d10a.0","@material/button":"15.0.0-canary.b0103d10a.0","@material/ripple":"15.0.0-canary.b0103d10a.0","@material/tokens":"15.0.0-canary.b0103d10a.0","@material/elevation":"15.0.0-canary.b0103d10a.0","@material/typography":"15.0.0-canary.b0103d10a.0","@material/feature-targeting":"15.0.0-canary.b0103d10a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b0103d10a.0_1673464449551_0.3167388014812753","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/banner","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.50e7a5312.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d4e46a421bf16ef7df88d35675bfd3a006772de5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.50e7a5312.0.tgz","fileCount":31,"integrity":"sha512-8J8sBRv1OPrK+wT8i3X149cKyna3DdOfm+aENYC15U1gfXAGQKUVNctUoWWe82S/VI4mYCFpbAUj/jEI5nvYFA==","signatures":[{"sig":"MEUCIQDnMDsaxDuEocrS6teO8gupDqJQm0SHXjqzohhrO/mTLQIgLJ1+/Nd8dhG+6+Gfy3NyHN4jNe6h8j+ZwgbY6Cm8QXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyJFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2oA//WGXBb02G1xb8m8IcqrZ8Mk4dGwJBkN8Z+kCOavQ2ST2ngojK\r\nr/Af4bMd5znEv71cnfqnS64a2i+lZArCWdtepBl0+madbwjipTANCkGffyI1\r\nMdRFcsntml4r2idrESxmlMlboVzjkEOAp0vSDmgwd9j12Q/GmVGDKWZV3Aei\r\nTVveAtjuLtjlEFnTyi5mqZDfW0ELQn0zDN+CJAGLMOjZ2+duNtbCzFoKEkMr\r\nhwM4MZBC2sIymxK0iEBDH2QMUSL2xWZ5fBte/z5VHwUf08Zd43r6Yl6LP/sx\r\n4gZZsRrBNxOneAQC/mx1VQju46B15b0iSugk/KQFm00kXzICjZz7G02Okt75\r\nZXShfLqkYj98/1ptTbiEUIJ92kzBi4cqgfz2KNLy8YbiCCf1cDqVUGSMR89k\r\nqE9g+mW3W5hH5ShT9VZRRUa/wRzusp9m1zv8aoDfoJ4CfmVNK6ho7nKRH8H7\r\n/Jo5pU+iZgt2KUu+6mI+MdZ70Q1HAgwabe3oDI2YQrAzjcG9HxDzyJNfBp0R\r\nFqjQp0fPtZIx9IN5UKV+3qgzwgzLg98GYaB3jMKq0MAx16R+Ox5SbDDAMx/c\r\nz/VTK6GHOpnryCqG54imz+FlyHEUNDne26PfdgkJbYB4pCNf1xp5nXpCOGvl\r\nZi4wB/9AgNzIFuKwwBOCAlkrAxSStEV5ClM=\r\n=wG16\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2d4b8df3edcb9b5e9fd8d8b6645dc9519d92f376","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/rtl":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/shape":"15.0.0-canary.50e7a5312.0","@material/theme":"15.0.0-canary.50e7a5312.0","@material/button":"15.0.0-canary.50e7a5312.0","@material/ripple":"15.0.0-canary.50e7a5312.0","@material/tokens":"15.0.0-canary.50e7a5312.0","@material/elevation":"15.0.0-canary.50e7a5312.0","@material/typography":"15.0.0-canary.50e7a5312.0","@material/feature-targeting":"15.0.0-canary.50e7a5312.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.50e7a5312.0_1673470533624_0.49466634627013684","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/banner","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.202823f54.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e420bcb83699051251333aece3956317132b2731","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.202823f54.0.tgz","fileCount":31,"integrity":"sha512-g6UxpDEAN376UhsSRD31B1BXbeXA9+jmZfvCUs6A1WQL+sNyGSy+29bskOqkse46uadXPvqDXqelscuhsZfX4A==","signatures":[{"sig":"MEUCIBUFMzkxjOsi92cnmBRaQXLVY9TfcTXOSwXVmIOoxVUuAiEA804xd+oC2iLYU2a0I/V4UkZmVDbhHtoi9dtRvSuaoVk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvywAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCSA/+P45mALW2/9iujP2OVSwdAXqFzgr5j7N643Qg3IUP+Qq1ecXm\r\njUu7FIs4JeO7oxHYXnDXUOpIeeaHtuceWJvf9askk5Tu0e6se5nylNhf5UNn\r\nB4TQtFFiCeVSAMMKkZsAKjzHeiRbZIXlSiCXA33oyGCabh9EZPcAuC9OcxTt\r\nRNokTkUCqcGa0OrJyKYW3FlTzgeMnjTQqyCfMQkyN0YKLpJSL77Fqp0BXGJI\r\n+u4nEfW9LGePfNPmPnjaXytmDwDFSokiipoYVVqe5uae4wnWmNhgWUEb4WVw\r\nP8/KSZdlLZZX0V0CSgKRod08UjTJdUttm3w0gQFp8LFi0yJwRxCkiBEZmivp\r\nCyz787rHZywHGGfDBxEbOJDEBBzBa5LOPHHJNAyUZ4b363HLMBR9IOwARfm3\r\nCSxT02gHG1DreTWJM+LvoKcgfVgCI1IGN0qT46RTXE+qZ33Vnr8DsGiqdZrw\r\n1nyQx8vdvbSAyxU4u/mooLsleybeC3QHxOQxXm7kNyX0umDgX4M+MmeTXdq8\r\nH5OqB8b9o1mTgZHVQaijQvpcdVBU6TPt+//lBIMmqBTMFeQQr3bbya3S3y7t\r\n7xc4j9YwzP0AxgGQfhGJLT7zrdsv+FB+gy8j2UqIWi7VHfLqbuZMBy0pWgEY\r\n4KSTE2ufcq+T8Dic+DIHKYYgvGIiw7gd2nk=\r\n=CrkF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6a4dbcb0b4c7d96a85ebe59a5ff66d2469e177a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/rtl":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/shape":"15.0.0-canary.202823f54.0","@material/theme":"15.0.0-canary.202823f54.0","@material/button":"15.0.0-canary.202823f54.0","@material/ripple":"15.0.0-canary.202823f54.0","@material/tokens":"15.0.0-canary.202823f54.0","@material/elevation":"15.0.0-canary.202823f54.0","@material/typography":"15.0.0-canary.202823f54.0","@material/feature-targeting":"15.0.0-canary.202823f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.202823f54.0_1673473023830_0.7759209798026581","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/banner","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.199fe2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d2aa2cd37d9ec3715aa8ed9c0cd6b8164f7250d0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.199fe2a2a.0.tgz","fileCount":31,"integrity":"sha512-NBIpDm0SAc2H9HLQGrmEni0G1vul1y263+r71Hae48jQdkWMo4i8xERuHHZLdUQk7gP6hjS4oTqqrmPggg41kA==","signatures":[{"sig":"MEYCIQDNC1URB5fwe+nz+SjrKmZ3BYtr4BaLEgQm3qMJSP6DOwIhANe1z9zk9rX3gNmewECst6JOFtt7Iz74JRBxJtErso8A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzCxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBSxAAo7YdlloFs0i66oeE+h0O+OZq5ShtiXBl8hNiSzyNqdWLZGy/\r\nY6SW04rFLjQN64wF8aPbdz+JPeSXoUm/Ho/U8BXJaPv0fEgy+fz0Q+pl1TYu\r\nmz3bRPUTNPntR89bMYsgDk5Z45Wxbh2mVuRML6XJP8sJPSudU4+96unMitZW\r\neu31wgi1UKWAN5Z5UVwj2mAmiKIdqpCwmSG3ccLCV2R6Oh1waXUT7ScjzEtp\r\ngLl2Zf2Ew2wNjOfw+TAM6dGjyCQtDTPjuAXDHQejICzVScRgBCxrkiU/aG+q\r\nia6NlG9SmgwKwPsVL+SDcmvt/X2a2XALHlTh/CCsgXkz2kRKFBNMWIiuI4j7\r\ng0hHztGMPsrSlD1BAfjcGFhad/3bjEUc6umx10of1+Nh19bHFwcz3NpCCYNx\r\n0dP5jcUpT+P9HGl+eOLgTpE/Plw8Xu0Cktcs7ag0fF9u9qwb8UnBGQs9HYpg\r\nFqF1OkZ+3q8mRnpozbbI2kfp4XkQxIF4s1hbELRrovg7Od4K3wm2CHRcL98i\r\ndoxGDezbNdQPwrk14MblirCYahWXiJQAKqoZdMciUupzPq6TWq20xJn7gdGt\r\nBBLa6SB1tf9Bw+bDoy7CXjuK9B46RSZNV4kwA1qOsX53SiSc22K1Ziijv4zp\r\nj90m4DIv6BY16ma56+99HtXtai0tK8VYpXg=\r\n=zGni\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"eb39fefbc3ca102a52db83ad19b42f1a2b52ecd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/rtl":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/shape":"15.0.0-canary.199fe2a2a.0","@material/theme":"15.0.0-canary.199fe2a2a.0","@material/button":"15.0.0-canary.199fe2a2a.0","@material/ripple":"15.0.0-canary.199fe2a2a.0","@material/tokens":"15.0.0-canary.199fe2a2a.0","@material/elevation":"15.0.0-canary.199fe2a2a.0","@material/typography":"15.0.0-canary.199fe2a2a.0","@material/feature-targeting":"15.0.0-canary.199fe2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.199fe2a2a.0_1673474224971_0.6296291969385561","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/banner","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8c0786d6f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3a45bd05327eed2ec280a598adecfe08d46054f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8c0786d6f.0.tgz","fileCount":31,"integrity":"sha512-Pt0d5kx/Hchb2NGBauWkKXWsQO82odFdEmTA88gJMHGp3PYbmdSraxPLG/MXW5NrP7cUoFuuYeU7fkTrmLwL9g==","signatures":[{"sig":"MEQCIG0dPrLvRmJYScJx/vFtZPda8O6ABNNhE75NFmWawrE1AiA4EnbKyETOUSY0HP5FDAqpXB7sQFPIjZeu8/iNs4v3XQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBs7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrGhAAlE0KRMllMI0JdxAG034KD2Ap6s0n9vBEUDMPjNvAfwnuc+Vv\r\nQtFhYEUm/0pSYnt6J6sidP9epYiiZoCXvRvNGx9oRdF2noCdSNKsJarTKLYD\r\ntlzEOZfFbIJaQdalgYbX42a58v+G4L1q5n110qhlzbNritf0fOj4dFlFTYIC\r\nQpMqqVaIOCSxiih9COfKrjeYYt14Le8vf99uK6y7vU2QOfOKOu/FtolO7G4r\r\nmEQznydil3ayrk7QCIv2sLeut25eEbGg3kiJ3XB+BzyS1GSbD0EyVahkFblY\r\nsUIrU38dLpxkZlgrWu8F7B14Uvg/0tnyqtQubbARMrk2v6CKCvTq44s182OL\r\n7I1i7sSAzHuiwVi77cHRXrHgnlLRABydUS7RsnSTzZs839ntTw9N/NTFfl2T\r\nfGFhc2gr0kbHE+Yrhz/TuurKiNNlxKpNFAazOSvdRkfdfH3zA7dzJeaHCExe\r\nQi+oTQZM8JzZPQin3XaNyknd3ITvotJggmMFjeuoj/6B6A6ZtqYcD2oFsDcE\r\nNPYWLUm371EbRLfuDmm2EbaX1+ER2WSw37rjMBLvhj22m9f/R8+tz5uya40Z\r\nf4+Qh3zXJ2/wtrB9gGOwP9YbJsJTqdIWu2OBE1q3nK5gFUJ8bszpgs+tr5Hx\r\n5UnIfad8JPEDrUij7apNw65JHZMHRzeiruk=\r\n=cnjV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9016794346c3c3cab2cf31154ef6a35eb5598994","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/rtl":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/shape":"15.0.0-canary.8c0786d6f.0","@material/theme":"15.0.0-canary.8c0786d6f.0","@material/button":"15.0.0-canary.8c0786d6f.0","@material/ripple":"15.0.0-canary.8c0786d6f.0","@material/tokens":"15.0.0-canary.8c0786d6f.0","@material/elevation":"15.0.0-canary.8c0786d6f.0","@material/typography":"15.0.0-canary.8c0786d6f.0","@material/feature-targeting":"15.0.0-canary.8c0786d6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8c0786d6f.0_1673534267222_0.9876865316330037","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/banner","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8a74f7c6d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d90ad9bf76c8314eec31cc0c7c60298710b01445","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":31,"integrity":"sha512-0YQQfLxH0qm+tOaVOgE6lIrUbScmMB8KNdKbZQdvPj02Wax9alFo3Z4RqTMpYrav/iG2Uld9hDOdFUtVtK2QrA==","signatures":[{"sig":"MEYCIQCwaM6cZrjhlZU8XVsbweizVamJ9FFX7rdiRPEx5q7yLQIhAMav0T+/JLKkdEXTvPTh0WM7pqaONY/Nrql8J8GUYJ7X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvZGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYkw/9F05412zFsbm5ZXRFj+fzXVTJi3GAexLza6hALu2IzBRGPdSQ\r\nKnfQzOmZT3YAQELJZxTdUzQkU+NyY2twN0ZRjS4A+LAbLs3zwmq8NUXX5Jk/\r\nBvzO2F4rG9w3OKvjwoKXV9roqeNnZ0X6js910xCFgnpRutWM8pLCni3NKY1f\r\nkDTdgGE9hmGnMSNRLkTy4wWadkZk0A9v5gy7Yvw4BScDIgXlohb9UU9uMR8f\r\nglYivzmzLUSjX2PeYmCoLjslgFxnIwtUoZg+F6wPy16a0PkNBCkVOlNeMbZ/\r\nMl3lCWOKUKTP2mVr/CGEUYK2MhzDttyiU75+Sm262GKS+Zn35skdgQNeLi3j\r\nGgOJG4tLvHbV3RkmLp9K4qdDiRm0RYMHDHW/plqzwUxbHW65fDxH0t1Ptlpd\r\nnKgn7grLUYtWd9XzOgcd8LI0Wr4FRPYnJfTBOAnamWX4gv5dl7P9lBqbYgB5\r\nzs4bplcr7cwO14WuyiR9hxUbxmML3hY4PAiwkUGr0Ga+quDWk4xyUYThjh0g\r\nrUJDRbBoatgl5hhhTywVhG8yMssVUjZh14SaF+hkwFMHpmjFhSfedE/4Gqxf\r\nG+vG7R19dSI7cwDhJcQXa8uJ6Pq+rhHwCLKDK0ABjL7ABi8O46e0ypl0TaJu\r\nqQwK/GrWYju0MNsIWYdvHgpzVbTg/QyqtSM=\r\n=PeQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9c676a1e4329c32508a9e7110198a336dc704f58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/rtl":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/shape":"15.0.0-canary.8a74f7c6d.0","@material/theme":"15.0.0-canary.8a74f7c6d.0","@material/button":"15.0.0-canary.8a74f7c6d.0","@material/ripple":"15.0.0-canary.8a74f7c6d.0","@material/tokens":"15.0.0-canary.8a74f7c6d.0","@material/elevation":"15.0.0-canary.8a74f7c6d.0","@material/typography":"15.0.0-canary.8a74f7c6d.0","@material/feature-targeting":"15.0.0-canary.8a74f7c6d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8a74f7c6d.0_1673983558687_0.12461969922380445","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/banner","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b4687fdc1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f5e16f880c8dd2285b95c1357af4f94438c61dda","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b4687fdc1.0.tgz","fileCount":31,"integrity":"sha512-l8gdlCzVKCL6tICc58YFI9WQauzjUwOE/fPHaGbHlPLwOhochzRoviSpcb2vTwFMl2Wyo5WlJbdeINeaxRLSew==","signatures":[{"sig":"MEUCICxlAN7wcLOSToszrnaMNj1JZE34VvTOeD3z/R0PSwApAiEAoB7lbgRKdlELOlxR0K4X+YKQvJJRMtjBfxsnoMhMKEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ8kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWtRAAoUbPDLpuOzGCTjyCRvq7YF7xw9oipMflYwTAcZOUSlhyBamJ\r\npE0LHr+WXrvWbiUT3CzwZm7W2qYEwd/MuBnE8hJ5JbEX4DEuVMZtjk5L5Uyz\r\nMj1Y3Ama8D0wkX13TkZ8W6a2OdAkPPsVy1GVABGLtIkv2aMGFZETa5Bnd+Wo\r\nJQOvlmx6PENeoX18eCttlmNn+Bo2Dtr9iN+Ep2p/HwVS0JZAwh22xpsxapF5\r\nSImbufcpFh8TKQ9xOcfqL4VafDWm1aKRqYVkAaTCmXYk9369Ka2OS6sPqyRT\r\nk2l5KzbCasoB6Ws7I9nb12zoLuwM+rD9NZc1sicEWuNGOng0cCWXFNLpeBk3\r\nZ5YG2oye4roy6zb8GfFIC1Rwrc9H6/8Ua02bpthWrWv+EJuEQkjsKF8xRP0m\r\nra5JgUSqP5e0hf/042lmj1RTGoq5zVMNWcGCNDoaWTlhjDPHC+6L3fRcv7Z+\r\n+551ZK8AyDXVS3vt15XbKYGVQA4YFy7C4fRSi9cmzvwKqIq3BeVNnpMtbIBh\r\nrmG0huM2BWcRC/oJJhMTg/SL+f3sLt007q33FSjPK5jzLJnF3lFDRHhe9Vob\r\n3IICPGneyhkOds2o53MAVpmZvaVXHS10/SBu4VXMxYv6iBFxhWnQDnCI6FTf\r\nCoNWT9MakTdBpG0OG3gMZLJr3EoIRgRB1z4=\r\n=5481\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c9ec43c7d66a73ecf591f982a42a582e639a50b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/rtl":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/shape":"15.0.0-canary.b4687fdc1.0","@material/theme":"15.0.0-canary.b4687fdc1.0","@material/button":"15.0.0-canary.b4687fdc1.0","@material/ripple":"15.0.0-canary.b4687fdc1.0","@material/tokens":"15.0.0-canary.b4687fdc1.0","@material/elevation":"15.0.0-canary.b4687fdc1.0","@material/typography":"15.0.0-canary.b4687fdc1.0","@material/feature-targeting":"15.0.0-canary.b4687fdc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b4687fdc1.0_1674157860140_0.951299956840878","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/banner","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b836b9892.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"480a0d396cad0291c80e922247b8cd99e611cf67","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b836b9892.0.tgz","fileCount":31,"integrity":"sha512-ySgXCclEuFyqpngYgTned/41jul9NqIh81d/JnoAgktVfvThZr/6TZ833U6/63EfcexGvpiuYgaB/QA9puJowg==","signatures":[{"sig":"MEYCIQDe/EXUCJJhvoMadJOWbact6IfCxzaIuBnGQIeKAqJqsgIhAKPX8jwulPKIosaDKwyzpo0mnlLDJY7rDwJiJBnSsscr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F5gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwJBAAnhQYdGQ0I0vWCzvV4r+7OEI+3l+A9NxCwbHD67RUYHmoeZq9\r\nl+V7FWaZdci53jasRJTvLosAlFugGnv9hzFOLRTtVztd72kLhjrC/60kZph6\r\nduw/o7IAMedPaB5Ll1fU2LldfMNnGqIq4+Ki0MRw/XY3KW1YLclJUz5z6XBT\r\naRIZ836Lyr1QGHiqAKFlAfVduq9imkuuaPBWeg8wiqFLob1UT4eMBetuKVpp\r\nAaYObGevewTt4lemXTW/RpZWc0d7SAn6892hfNwhf9r88t5dRPyyyFKJrFIt\r\nDW+F0HHakbGBlU9nB2iqEXd9EYpZNWRAETaoAXhALf8iSOxFnGwUIDp3uqQp\r\n0KYCYFE+bTmfBMSBGx2Y13DGYmZFW3yeD9PF12r3sQxLtL9TcnOiZTwG45PD\r\nfyE3oqIv6GceGxChxKv9g+0FgQqVwtC+1wD7SDKZPmiJMY+yq9BAHZgkI9JB\r\n7TQ92QeNQZcxSlzK5rLS1VL3OFhPOfnkr2l49wgY4n7dlk5/73QaC8FBnhBH\r\npw9qBPwyFnRHxISx59Rz+EbhMhkz3Pnn/NmTKXgaEAJxQcZDEFKsNVwyegf7\r\ntdc8OWT6lPa2+XVInGsSWewoyfmhAnQHTpquahvllEt67IpHE3bf/aHps1mS\r\nd+pOX9gy1AifLkN0qyFmlHET4gpa31BjBNo=\r\n=r0nO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3a9a0b2e64227ef1f8979cd5b82be3767b100551","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/rtl":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/shape":"15.0.0-canary.b836b9892.0","@material/theme":"15.0.0-canary.b836b9892.0","@material/button":"15.0.0-canary.b836b9892.0","@material/ripple":"15.0.0-canary.b836b9892.0","@material/tokens":"15.0.0-canary.b836b9892.0","@material/elevation":"15.0.0-canary.b836b9892.0","@material/typography":"15.0.0-canary.b836b9892.0","@material/feature-targeting":"15.0.0-canary.b836b9892.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b836b9892.0_1674600032156_0.8307673334178878","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/banner","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e8912fd37.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9c12d0ae3279b2e4f7d53c0109dc9262d7ffce73","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e8912fd37.0.tgz","fileCount":31,"integrity":"sha512-F+lvTiEe/bfk3H3N+4zqGEER/BXobpvk34sJirSCa9v9D7x3HMowSigd3BoruJU5k6SX+ZkoWZCSOSZcYr4VSQ==","signatures":[{"sig":"MEQCIA7GXCu/g1hOWfKUqBpd5lDWtj6ACdKX+JtT3IOyYaMJAiBZBltuwmWcgm9j0srqaGwuiFNJY+y09CFAk68aL6r4CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sbsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9VQ//VZb2MLB26PmOOXh9HoncXmhUmRZNT+hMCH6kiyg8wKGThuh0\r\ng4zCOg6axKA+nY0/Fm8H45F9y0CnJZSq0q5XNLw0WkNgUm3JuDVXznK4JF7+\r\nV39UvggFiWz+S9IwSOTxXTeRFOv9wZk4k64RzKkXkYVnqEx7uGJMkS/fDaWm\r\n1rfeutrR6Q+8lLWJRcc1A5Jh6A8Qjq6lLsOtULJ1Ja0GD8Ran6CYljMKCnYl\r\nBQkw+sjZBKXbEodHPeu0suytjOcBBbPK6qVDqxIOebnQiEz02BsWwrIzTAmB\r\ns7IwAQdBQvA8AqY4sDdma3dyjJBpVUThtBO6vu8MlCSxGU0D4IAXZiuxU0U4\r\nS7QdexZsKkfeMmkrBCG9r3zF13iq/HIR3XJlxLizz93sh3opGItRiibmy7hw\r\nRiNcM9yFZ+YBAMI1f4OpezsTkXerSZ5YorAA3C9NLwLXXEbEHRTlzOdZdRfD\r\nLR1eztKDEhwzOo0E0Pe7Z2mIZPzhZThzJ2/OitCFuySzFXPSQwcXy9rhUS+T\r\n4Mo0B/x60cQm9QpowKq9jWUkd5tKwuOlFFsHXVrhfuw69SrTn5sx+gHjlCNk\r\nLkgjzS3XcpmHOsSm0d+w2lqBjefuOcIT8y4gE/lQFqslg3GqH8Hdcm4tr8Nz\r\n1ygRN1VDSswlxMmW5yZeCbwVBKwLkHZZnkI=\r\n=qdrr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"72b44fe55689bb591aeaddf242920ba73a6e5bb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/rtl":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/shape":"15.0.0-canary.e8912fd37.0","@material/theme":"15.0.0-canary.e8912fd37.0","@material/button":"15.0.0-canary.e8912fd37.0","@material/ripple":"15.0.0-canary.e8912fd37.0","@material/tokens":"15.0.0-canary.e8912fd37.0","@material/elevation":"15.0.0-canary.e8912fd37.0","@material/typography":"15.0.0-canary.e8912fd37.0","@material/feature-targeting":"15.0.0-canary.e8912fd37.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e8912fd37.0_1674757868527_0.9675841611686775","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/banner","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.16fbd30ff.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bfdc5fd4a147dea0955d1bcf0fb1ce3fb0412a0f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.16fbd30ff.0.tgz","fileCount":31,"integrity":"sha512-XpcrAZfSrRk8WeQqqUjA6MPvFdeWNP1DUz+6xOZj0wHbj+2gpbtprZe3sS8Yb9ObFAHYtR2OCbrA53NBjDZFig==","signatures":[{"sig":"MEUCIC/ZenLJ8aDR0YfupOawRPzKKZ2Sjk+3jiodBswNN452AiEAvcJRiH0tVD2MefHU4nyJD7+G1Pdx1l+YNvyYe41L6Aw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0sgqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRbA/8C7ubkpwWFHJy/6a7zFayb4e8LeTsSU8jdD29sTuWkD9VQuXa\r\n8nin4CiksUZHT6RZb4e5cUL+EcC/6TMb4EjxTvFgb328BYHq4Np8drPsvyJI\r\nJ1IPy0cfmptyltKq1/3AHRL+VUC83ZgzYBk5q+qyBFG4ODapzvvwHXUtLLqx\r\ntNe6zHEsQAzQ1Beuo5uTx3F42YdEo/hI+CZxBZhNVDahNLLjMLjoK4ycJEck\r\nlur2zlH9y45keoW87lLJ4nvJavM/i1IjepbpBBpeO57Yv/54n9cLZmTuE2Ay\r\nywMinUca2A1hcjE0466Nvrn7BUyso+HeM6CxZ5uTzD6dFB4M6CV3lFzYIDLC\r\nMS6sFsbqfUgQfX8cduFyUr5ourfwiZlMvGs8C59PxLt9VuTUocLIvkBWXcyA\r\nGv+bUlAQAHP9Gj3u2zfoiRQ4mLdDRKVfbZwR2kZF/AjjviiWt3B9lmy7Ihe8\r\n0EXeDnw0wZc6dAKeW26DOZkvdI+LGtg3MozHK6iHv8VbdT7a9PuObLF1eJ1j\r\nFFdsB/0pEkMZjDZ1bVg2anVSvSo9+s69HZWf5Ocoqv4a4lUeY8Cxqwb/fhhc\r\nmTMr+UCUT34ReFypJ+72QoefGZbBTcvgFldOVL6udv8Kgkz9+MBfZKBj1LGC\r\nHEVfkIyyqTqOV+dzJv5/e0bH57obTZEzZdw=\r\n=8uuf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f4c39ff05bbd1045563670b4ea50b0be51a91d01","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/rtl":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/shape":"15.0.0-canary.16fbd30ff.0","@material/theme":"15.0.0-canary.16fbd30ff.0","@material/button":"15.0.0-canary.16fbd30ff.0","@material/ripple":"15.0.0-canary.16fbd30ff.0","@material/tokens":"15.0.0-canary.16fbd30ff.0","@material/elevation":"15.0.0-canary.16fbd30ff.0","@material/typography":"15.0.0-canary.16fbd30ff.0","@material/feature-targeting":"15.0.0-canary.16fbd30ff.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.16fbd30ff.0_1674758186015_0.9043792090748315","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/banner","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.033ae083a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88161f47555d4a7973fb413cdaf0e5b172814def","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.033ae083a.0.tgz","fileCount":31,"integrity":"sha512-P5HSTV5QWbkq0aO8UE6RV4XWqbtvKpQpISl0yheBEI9bvqo1QF81y4WwZ9FfzeQ2xt5+rSp6yIJgM27cG/K4vQ==","signatures":[{"sig":"MEUCIGPHVszlTFDgulNSvVRsosSmLYNi9jpeCQzO8gdCRs1KAiEAxpQrzD7RS+plCEDrWh34A7mr3csD3tUKiErLuoIzyj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tROACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrm/A//btyaEo8JsAGhpMdyd2dlziQ7hv5A/xQSWEQK/WrBdIGihOcs\r\nsy38AaZpUXMTdFun+zh16GBfPUvtDdM5mUaLAsZgnJBFnCF93NzDQcQurSCX\r\n+tCB7mTfWarAXsnyEvEWqVE8yyr0bEQQ5sQ9Onz8tRHabFU79wylMPMVmzDt\r\nSu8Fi9YiX313X18TiqNkn/j5NFcbd/rYVtR9Li3CgSkQtQMsV/8F8ORzvKjH\r\nDakK1iec4czC0kxBIp9S1v30EvQQ0Y8OEFVK3FpBt1XGAy1k5/tMRa48nb6/\r\ntaqffhvwVvRGe2T5+FPDqGdjdTQmKS+Nag6YqPOE71jxP5H5PbYjsq/nDe+/\r\nNb5qqU+lrl6tx4mANFHzv8GfVEvTjrK7Z43ZPI2nZPTN0bXGEPb5zjFSvm8e\r\ny3/70WBCqz9b29f/vXNnwTacUPH3Kzof7Od145Dilliwk6+vsjOIFSbS253r\r\n8VgOqksCHL1vG1AburIW2QVhPrC3KTBJkHmHooFuLfy33yKcXY08U7bclG8b\r\nB2tGjiaEUS3pTw1P4Gev4zcOUvJSfHqApcbr9+ScO3sVWvwZTpp8j7bDu/oa\r\nEnexqqfjztki7Ll2QJxKDGzkRKChAbLbMomF1pj/Gd0IOAu+yx/pqekQUHcR\r\nx3JZ96CVojIebS0LYNyj5080hB19UQDxzPk=\r\n=lVOu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"89ca938c110806d9150a3889a7d25689661c2fdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/rtl":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/shape":"15.0.0-canary.033ae083a.0","@material/theme":"15.0.0-canary.033ae083a.0","@material/button":"15.0.0-canary.033ae083a.0","@material/ripple":"15.0.0-canary.033ae083a.0","@material/tokens":"15.0.0-canary.033ae083a.0","@material/elevation":"15.0.0-canary.033ae083a.0","@material/typography":"15.0.0-canary.033ae083a.0","@material/feature-targeting":"15.0.0-canary.033ae083a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.033ae083a.0_1674761294522_0.2996183543550972","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/banner","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3a705fa1d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"00feed5666a7ea9454272342950c39aec492ff98","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3a705fa1d.0.tgz","fileCount":31,"integrity":"sha512-VfcJ3H9C6a2W8pwnk2Vn1BrdT1A91zMujkud/4XxjX3onT+kQUtDkXS7Z97k5cllRtJZv22ZMluZz7Al82IUvA==","signatures":[{"sig":"MEYCIQCJ/wrZmanDIYQkNfi97XMRgRECJE5AlRaV8ZyPevpRdAIhAO2PuzJyrBFe9Toc1/dLnbd+Woo7lsBw8MFMIn3MV+2J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FPhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3UQ//VTSxO93dRFwSCc9EKhVmR5sPUstncgeFyZkjtFTcBOC7plzX\r\nqHR4tBSP3wz/BIVF8L6YonjGeoOzc9mwkRgtQGifgVtrHrCFd1itnx1Ls8md\r\nspmsnT6KH6Q2JfX3y1GQb78ETJteU+9fHZuFLYG70bhVYF2PbE4y8FaH3etG\r\ns+Hqz0Wtd+sBfZ4AAabZv8WJJE8caLMyDwjmn1SnhpDQotPb5NcjniXs2yl2\r\nLRl706sPXRNpX/bQokan9sNFm1mnUCWEifQRFZpTBH7Kvvm3++FKQ2B7nACp\r\nDpboVXqjDpMK4a+KH4Huh2An0YUtxW9i1SUgkCBl7ki8aV4C7AEJPAGeA48J\r\nC5j1D097NRYs0q/LbHykEE2jDEST2GQreiD9hf1RkRA1v4v5u+CMZzjwzg61\r\ne1WKWOLX7//0YUrxRriy/bjI+AsJ/nKdQvpXktyYgdEhE/koojAlo0Q3E5AV\r\ne/l6QRZASSvt1w4KIqp42UFxwZw4nfwveWjHTKFXuq6Z19hdIIlWE6/s9QIU\r\nOMGPahfPCPQ5PvsKW/B4IliQI5D4zvfNtY9aDTKn0b5eUe4wrEBG/LhtNMQ4\r\ng5htNHU9zbxze6LPGgf5c0su95kxzdXgjTRAZT5HLcLTKE/WvDCsZ/oV5VZU\r\nbxghMMzZVsZ29mnEt2BY6fs+/xDhSTi+kF8=\r\n=d1dz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7e0f3737f51c1319f66762d8021d6aea33391733","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/rtl":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/shape":"15.0.0-canary.3a705fa1d.0","@material/theme":"15.0.0-canary.3a705fa1d.0","@material/button":"15.0.0-canary.3a705fa1d.0","@material/ripple":"15.0.0-canary.3a705fa1d.0","@material/tokens":"15.0.0-canary.3a705fa1d.0","@material/elevation":"15.0.0-canary.3a705fa1d.0","@material/typography":"15.0.0-canary.3a705fa1d.0","@material/feature-targeting":"15.0.0-canary.3a705fa1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3a705fa1d.0_1674859489474_0.151102291872095","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/banner","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d6bea2ff2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ab9b3582c8d079723ee48eec35929e7336cdf706","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":31,"integrity":"sha512-MFgXRI2MS7sx4vKZj2DogfRjKx+MzzfwV8l1gqfe7z+KTpd/FUXDMM3EhuRrYnwJFLVfJC7B2O+fEuYfWY6thA==","signatures":[{"sig":"MEYCIQCLmqln62X2Ou5nbPUP8vzfSk3n6XWUxYWtE3U5XfA5DAIhAKGA0OP013EtF7y8wqmeHGTlSYDExb9nmqf3I20Bj//v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TRMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq/BAAlWSqbwUFYc0HPcRFzA7FxZXqbYx5jcmRj4hUGpJ5pnf88wNJ\r\n+HCY4RjSLJtncR0C+bPQZMgYVdcJNonMS9QAhBXw1l9utanIb5Hc6jmmidFp\r\nbZ0oYWBXODbPa+hSw3rdNEFrQYpkQCooYWqhw5EJtJnzkVHhzJDdNlG8dk+X\r\nEsYgCU/IiaRhDkpNhnqt57a9++f9EHavXkarW2PXSfTwXEAIFI3HpMBxcsBN\r\nGgz0aSJ+ceC/FMikJCxmzlrkbhf/wBsU3FR1JyIft8F1AWefArCuAD4i1RyA\r\ncEDDlYoCOVmWxbDh2Gb3nXnokkZTQ64qIRJjxdapx4FRrPTYifiD9ltWkGpI\r\nPex52PW1YoN6OSl8Rmj3lpSu9CXdBGZLg67WsvdA940fYtzJyRRnqAYPSDAl\r\nu4HiHcrqJHpy6x/dm4sSy0AzGd10uSbesPtbpozaoDnyBe2XA7nujxd9GKGR\r\nTWoziC3Gt6nrQxeXpofoZ9aoBgcgeK110c7bQtmnoQFy8UypytUXG+fALKGO\r\nDZFdTJPy+WuclfX2sOx58CwUKwK1CuFHWxJ331Y1XLNEX6zHn2JFdD9qRPu+\r\ni08y3KI7pmF86StF9MSwCZkyEs2Cs7NJW7ZBetw1M7os1dcKXDYBkhALKjyr\r\ny4+YjgXYDlKaX1IXaE+q3MINBidCFT5qMi8=\r\n=ZRTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e4210a9f21a7e6ee007d475d5bd7e229dd7bbc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/rtl":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/shape":"15.0.0-canary.d6bea2ff2.0","@material/theme":"15.0.0-canary.d6bea2ff2.0","@material/button":"15.0.0-canary.d6bea2ff2.0","@material/ripple":"15.0.0-canary.d6bea2ff2.0","@material/tokens":"15.0.0-canary.d6bea2ff2.0","@material/elevation":"15.0.0-canary.d6bea2ff2.0","@material/typography":"15.0.0-canary.d6bea2ff2.0","@material/feature-targeting":"15.0.0-canary.d6bea2ff2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d6bea2ff2.0_1675179084227_0.9470744284950456","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/banner","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0c94182c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4ecce6d2c99d2d28ad3e33ba30992d7d4f33ebe6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0c94182c8.0.tgz","fileCount":31,"integrity":"sha512-Qb0z1sRfo+RzvzbNXqWqQxJTsBJW4QCZdy7wjGLR2gS/oPnraZMLrWrkp9e+zLGbodhaPqOuiUDE+PDW2wjWNQ==","signatures":[{"sig":"MEUCIQDvEqRJnRtXPp8gr8j980+gtLkzhJfDIuxFEWzYyVH/gwIgPhbK+kKpwNSvDj1HJpx0cyNpWHo7HpIN/g3Qri2XpLg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qU7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDnQ//ZWhqfnoyllX1SxFn/Loz0VH73R7qxBoXteQnkpbVSG5qd4bg\r\nBfq+095WX3Pk0fWAU6CRcn39BXOJ3QxIwAlDneLnUAdZHk9CsXGPgxCO/mf9\r\nHeHTvbp/i6ReTVoBtXtV8VEhRpo9IemohCFCIMrXz8dycO8gISaG4XsMOhtC\r\nLPlXY5Amsd3mDbk3VJpU5+UbQqQOM4vLW1aLHGa+cT2g4FRg032NeZWJ1Ky6\r\nYRpHtKN0KPoa8RrJPR7iHUVC+K8HVnj+CMkoe2IuYtxR4nfy3Cv8Mj3lvGla\r\nfLd0ZEko61heeqyS26B5oJNacZN98QcV/YKKnIN770cDBbxQUQlXPmXPYOO0\r\noVNf6ASc+u8RBXUUoRMUd7E2Ok0MGryOTgvtAhf5JXtN7ODJYkYvGjr9F3iq\r\nMVPG4OBnqY/HzEpWOE397qYOiZQLfzs8fpAMY7oDgkN1FXjw0roLLWHksE6d\r\n0/K5HBdIMw5n9D739A39sPHef76xAmHggVZo1T+6MCtsNPsoC1MiAQ6oXkOk\r\nyXRa0NF2txe+v8+OQ8aIJhlNuloE+CRkiXsd4BhP9jBvqaGbp5ivbEl0YV44\r\nVdRiocifa4QJkEBybUqUk+EhjIgv5BwB0r7NmpVKysUobOlHoHJuHdDH4EcY\r\nPtOADJ+F4+HMhp6mQ/5fowmcPZ2YuBGzMmM=\r\n=XTAD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9e58d1edf6370fb6c26f762d83ca31f928149e41","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/rtl":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/shape":"15.0.0-canary.0c94182c8.0","@material/theme":"15.0.0-canary.0c94182c8.0","@material/button":"15.0.0-canary.0c94182c8.0","@material/ripple":"15.0.0-canary.0c94182c8.0","@material/tokens":"15.0.0-canary.0c94182c8.0","@material/elevation":"15.0.0-canary.0c94182c8.0","@material/typography":"15.0.0-canary.0c94182c8.0","@material/feature-targeting":"15.0.0-canary.0c94182c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0c94182c8.0_1675273531302_0.5257521276376498","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/banner","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.15b221540.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"785c11a95968d8bb8e9f430cfead4c19cf96b5b7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.15b221540.0.tgz","fileCount":31,"integrity":"sha512-MS96zjgBAEY8PrElhZBojpLvqwImTKDwm6UbYBiAm90hzBlZo2fU5Efm1PHXUpu4fOouZFtdw/fwHwPisGDHvA==","signatures":[{"sig":"MEUCIChK5HYN3QW4EKBz7A+3C37euuYmJj2TABSWdM2ygcXKAiEAkMxG3Ye1iQ4tn1qUo4ItSHLRRGceGQv/ZTIvKwpBFQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qc2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7uw//QQ5MbQI4fxwgxA5hRXQOw1C/lakQTAjoLFAn7Lb/N8WESJRr\r\nwWSf5bROYTLPKvAZvs4olBMBKHBLouWxiKXvomeV9xbIb/ezPAOROIopp9Sz\r\n05F3JyGpzLml1xRugiGB7570mkctD53kj15zRCUOQefxzyAA4FFPWQ+zCcam\r\nYqexQhT/Hj9G1bWyiHoIJFmz4HodZqXwLbwjEBlKa1V39OHa4O9ahgNBtOw0\r\ndHKLq39MSgE4Zqrof+xhGNKlKKPFd2NcudfiZ3PBanUT2ZyC+QXjHxml1Kof\r\nFpQQozlxiH85LzMIu9ntlwF/SExe9vuWrFfB6QW2ok4cnDXs3X4hhGFk77AW\r\n4CTILyK1kRtudyp3i2Rzihwl6zYDgXpqm0qowIL6ZeTADALNJPAbxmdSuyoS\r\nOsxvywUe5fblMfF6+jiIa8/ZhQ9R8N/St14a9lpt8FFOMSkHEO8QZy1nA+G9\r\nEwOJrPrDH5ZF0uNzZYIRzjAD+lUsayyECsuBKiZdhY/pdqN+z1cFSRZ8V+x7\r\n/5W4LNJRI9P0wbW25kpCZvgf/E5cwIUNKRCmwWjkyPRMtREV+Wt2LXpM5eQL\r\n9SbQrvQ1iFp7RTHOjRNesL9UvilPw9sFAbqLFVPzdx2zROX1CF1okLsU0bA1\r\nJroTp3CDABuKFj4KIRvMaGVCxBTgu16A6sc=\r\n=/yam\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a4bc6d32435d33a7b99197f32b85eb0b730acd30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/rtl":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/shape":"15.0.0-canary.15b221540.0","@material/theme":"15.0.0-canary.15b221540.0","@material/button":"15.0.0-canary.15b221540.0","@material/ripple":"15.0.0-canary.15b221540.0","@material/tokens":"15.0.0-canary.15b221540.0","@material/elevation":"15.0.0-canary.15b221540.0","@material/typography":"15.0.0-canary.15b221540.0","@material/feature-targeting":"15.0.0-canary.15b221540.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.15b221540.0_1675274038648_0.40087134634226373","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/banner","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6a4b3f834.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ec412cf0ba1cc53dad46d560e6f69028862995bd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6a4b3f834.0.tgz","fileCount":31,"integrity":"sha512-C9KVkpyDhcU16o2lwps1hBEqFNdQs5WHe6zYMfTdz6JfbHBD1vAB/KskTHkmMBauLjLxMqdjW2hFJXdRDRRrTA==","signatures":[{"sig":"MEUCIQCpUU8VQshKOKsDFzQ573KnI5zp8/f1+HRUWj/TFW5ISgIgN6YoJI/qkWwkX1c+tRP8u9S4nLfcQl38ligpwHK3bNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rakACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplcRAAkvgqPvuQMrsk26IYjlLePokf3CllTlgoUnLQkPOQRURJ7izT\r\nww0icxkxWsFCm+8ujrZ9AIuZe9yB+Q1ti1fdbdPrYmct7OYrJ2xcFbBmAl0g\r\nNY7JAVRgeIUa7a6+zz1YPDAlGD+L4GreCzomvi0stUqUtMvBpVTM564JL/hB\r\ni6nwnnwCw5VteAdJ6tkGQgFbL+2QFOaB3I/3VZoN+16chC++5Zjd23aCsvuU\r\nLXulDukRuq/CQmk48Xq77f6+Oep0V9O2mZKWQP67gb/temdS0MJMQegqLKQc\r\nJVPk7qelVLSU8FqDjyB4RBNS80t451k6Ew6iVmLhR9dqoT3KAAJuopyZbIyQ\r\nTihZXl/jeF9VmGYtpEF0BEleyVPS4mbHXuyIXTVmK/c4M8uNMO1llmtoxI1k\r\n9igRNsoRvTwnRFI11nv7IDpbG1YmOlWrqkLFK43Pt/uVFIFj0UjN/ZQQpHKE\r\ncvRjbt6WCcp7lK93unS4mnCRYKYSg5CJkOTsgvQ2Vr4Te6rtrV6GvrDuPqHy\r\ncY2S3yy3HU1UcpaB6XCJFYd6RPLkU0cKJvhYEGXLH1WdK9qAMk9gjV1TEmo6\r\nWlrlU0/rlP1kGsxbIoLKrGUKRUZsKZ3OiT9a4ZYjcGtunRp+lWwGeHGecsAm\r\nc84nnbHyZNKBWW5bXyWK3r8g0WLd6U27tpM=\r\n=493W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b1f2d06637869496d98898f4cdf709ebbd279ed4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/rtl":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/shape":"15.0.0-canary.6a4b3f834.0","@material/theme":"15.0.0-canary.6a4b3f834.0","@material/button":"15.0.0-canary.6a4b3f834.0","@material/ripple":"15.0.0-canary.6a4b3f834.0","@material/tokens":"15.0.0-canary.6a4b3f834.0","@material/elevation":"15.0.0-canary.6a4b3f834.0","@material/typography":"15.0.0-canary.6a4b3f834.0","@material/feature-targeting":"15.0.0-canary.6a4b3f834.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6a4b3f834.0_1675277988452_0.6994695431494564","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/banner","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b177b40e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8ce66bfc3459ac699e3b9edd521793b7220b56a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b177b40e2.0.tgz","fileCount":31,"integrity":"sha512-PmsdPXlAHeWpILDCPVAPvYAc9mDie2PoBWHR+qrFiJJyT3qczbUun3+sYG7dqxebOMffioIBrWddA0bhCwPoQw==","signatures":[{"sig":"MEQCIGB5bjobCRpH8u1UOjIHSs1EIq2e5zGYfM90LA/mYEetAiAlO2Y/10A79ohxBwmjZd6Az9qafQQKQLGHMOwKyYC9/A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y+GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSlA/+LjZjslq0b+oevKU7vpTJd5mAg782WcmZboYrTM/dAY6AUKhA\r\nVXoLEo+5umlpg5BrmVq3sEi/WqNYfNb5nVzTcwkKx1GJphjsbHGjfYvTIDZp\r\nUjtTacwI7wQg4Y8HhEZBQEbKa0/J0k4+9uNHckO7r+nBfShJA4wJLBWJSArf\r\npaKL9DIKbuww996uh5cArXzDC3ddmKYY5eDHtyJTvbne0EX3SE95zsvcqz1O\r\nxNh1Qcc3s3FmUHW2X9LBojItV3ORefALao9CH+z6H3nOm/nKxnB9+GE/9IRz\r\n4OEsqvRt5Qh6dOAp8tTdfomjJp7uvYNGoXnKmEdQNNRKxlptGo3f64DuZN/Y\r\nioZI99hd7IBAgk3F6DcBA+BpEs9uLhO886u+GeY0PdHssSX7GSYfEyagVq8s\r\nG4257ZeXcogMXfSkB7soWYKZ1avFMEATALRRhYj7h6adH0jqL3KYbEcG0Quk\r\nfpX67VCU0eo3X0k0W8GnjVrMIgExDy61Z7caE8KJwAxfgHrrebAI5L3R/kQp\r\nPXPxPZMttYXJPQfp2XGdJS9uXv1Hn2CdNdThZ+Fwhgr4b8Hq8/vkkxRI4XzZ\r\n22iTEbRg1O7/nfiYagPZM13r9WnCVX4A3H/xrCfhibIogk0JsCBXKFQeJHMR\r\nKXv4WN64/BP55JIW0dbtwwt1tNXDg6Iz8CI=\r\n=l2X4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e3b49a7dc72f9c88710ba68c63d4ddce56a58fe7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/rtl":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/shape":"15.0.0-canary.b177b40e2.0","@material/theme":"15.0.0-canary.b177b40e2.0","@material/button":"15.0.0-canary.b177b40e2.0","@material/ripple":"15.0.0-canary.b177b40e2.0","@material/tokens":"15.0.0-canary.b177b40e2.0","@material/elevation":"15.0.0-canary.b177b40e2.0","@material/typography":"15.0.0-canary.b177b40e2.0","@material/feature-targeting":"15.0.0-canary.b177b40e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b177b40e2.0_1675308934651_0.17332144645371672","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/banner","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d9f821042.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"29e54ec03e372dbc89c0d7c7985811805f0fd092","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d9f821042.0.tgz","fileCount":31,"integrity":"sha512-ZbTUpIDoHNbnxA2FfdSxEsAOr1ZS/ob8Q9vYd7HLUTzG67f1Q2JnOJxPm1Bcp9FxQw71rRI+06s38RMLiScaMg==","signatures":[{"sig":"MEUCIQDYcWTPZ+yHYOd86o3gM1HxcGezl8dyvvOsMC5jRNMvNAIgYH040okEdTI+Umty/dks1+LM/aidXSOcjykewetdOEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/VdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOvBAAgv9n7pXwnr6p00OUuSgUSIhusa+3wQC3gMNXfrFOaAHi35ze\r\nqOs5npgBCkimv3Pf38uI65SXxeBw3QM90rmm7ohOFS+SzS1N8+JsuroQaypX\r\nl8pxFNINnm1iAZ5ptY1Foc0aerj2eXFQx2ADR7ISMzojBbU+6r3wGfewbgKF\r\ng/j5IxPh1zh+HcyWw6p/zfilnCa+/AZwfjnSs0VryrBgh//VU3DYi1IKrMUA\r\n4t5Y3Hu7IGF5nL2pP4vR2tOFthKNxM5UC+QIy0CKC2i9j7Hnrv+ck0kpt+m5\r\nIq0zOAjlXfEtby/cO6cQ1+3BbC+b3QyVLG33Jf4GHCtYgSKdWoCy5WOL+CFM\r\nM76BbMeIW8HI8vXEMeHaGKJvVJrQSb2Ta3GrwzJUEG/68v412oQ5u8UrTYrS\r\n/92MZNeF3d4diytStmGh3DATtDxqVvBguk5s3Qo8fN4t20ZSje0d9PSfwYUD\r\npop3UShOiqCdgWqO6D4Xfc14psxHpKPTHOnjpShJD8SaYir98PKBHhD0C7x5\r\nnv+oDomHSDC9IkoRHHxGJBHmXGEUJm5ELJuyhfhx54nnyVEmxiZTYmpRuYTd\r\ndry1fijwVUdGTfjVOQ2scsOgTQo0S1z/FTBDtt0TDPC/4pCoBMa9JppoSYgJ\r\nSyrw9wserNqhTOP118r/GpwqymL7X9qt2EE=\r\n=4yea\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9748fa2e1dd5886715f422f644830717544192ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/rtl":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/shape":"15.0.0-canary.d9f821042.0","@material/theme":"15.0.0-canary.d9f821042.0","@material/button":"15.0.0-canary.d9f821042.0","@material/ripple":"15.0.0-canary.d9f821042.0","@material/tokens":"15.0.0-canary.d9f821042.0","@material/elevation":"15.0.0-canary.d9f821042.0","@material/typography":"15.0.0-canary.d9f821042.0","@material/feature-targeting":"15.0.0-canary.d9f821042.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d9f821042.0_1675359581329_0.8721182137970467","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/banner","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.47c7deb19.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4c2a862d8244cecfd0a3967549d01954dac02468","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.47c7deb19.0.tgz","fileCount":31,"integrity":"sha512-Q8oNKcO244o6WUNCuTYWDBj2zVOabyMXhulte2kT1bBeNg1Ny9uJE3m20/SBYvTkult7fvwtDW2iX04bnILVFQ==","signatures":[{"sig":"MEYCIQDJRrjLZFzkjCaaL0woDUUzObS1QP8BtZ40nhTKcFTirgIhAIIfydgLvbbO9KNt6DWFd+0RMVspRFq9wSBn1CoeN4/5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M92ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2mw//V4uBh/LDnB4kK4d+C7oRi9KZwaItqrdNMHAtsahOEaVS3GfH\r\nw//Et44FTEFvAs+cD3c9vd2NKZ+GCfeuU9XtiJDEYI7kKYoxGwPh8F0fG4Q1\r\nWvRlGeUd7m+fRbh10Qr9kKzw7DBs4Qxfpz6ZjAhCyqhp9EeDbeGdPFuCiqJg\r\nNK7FlSbmYFYcPjFm1q738D5xVjlqNfWIMIW/eWYBibEuDUwKyBxJDiYCNsS3\r\ndKUDIZpp2M9Od0MRb1gDcuxA6PL/UVeAO5tm7sZEMs+Eu5TSsFb64WgW6Bzm\r\nSF8YPCxDBbqrgeK71FavA/sBcFPDjjgBOaOFPrk/D4+rvmmqKnE3XnEgh/PD\r\nUaCXggnrsW3aB5/VoyfSf6I0emMgY4hqRgzO5IHnyYd8+CyNK3s56yIJg6Dj\r\nNzt24qADf2sHYQG2XQS94GyaGZRBfRX3zuNdhDNwKgWUb6pCAMyWq1M5S2dH\r\nOmtylpnR+CN85lrMKoe25lYfgWwIocOa6Ybya2YooGmKjK/iL28knEOW5NTa\r\nueVFLk+K7YllVrreIW3e/kdkZiJbVnfApM3FSCC/+kYIovzbAUHrBE3rv/oi\r\nX1ItmTctJECKg9qdQ+Ylje/1xSpSNmbf7LscVN+goxNfJlInXCgBOvcAL7eu\r\nJygH6sNb9X4WS7+LrWNz0jG/Dff6YwXp0VQ=\r\n=ViJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d5a6886a0dce343fed87311107975111f62309bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/rtl":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/shape":"15.0.0-canary.47c7deb19.0","@material/theme":"15.0.0-canary.47c7deb19.0","@material/button":"15.0.0-canary.47c7deb19.0","@material/ripple":"15.0.0-canary.47c7deb19.0","@material/tokens":"15.0.0-canary.47c7deb19.0","@material/elevation":"15.0.0-canary.47c7deb19.0","@material/typography":"15.0.0-canary.47c7deb19.0","@material/feature-targeting":"15.0.0-canary.47c7deb19.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.47c7deb19.0_1675415413885_0.13176477326318392","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/banner","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a16dbd1a6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dcdd77f99c158878b3cbe6dba15fd4865afb9295","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":31,"integrity":"sha512-Wl9oO8rwTD+coq2cT2hua42GyAW5fT4bDji/baBb1ORY8FO24S4OmKeKHZX5atUktpX++zQw3juPrDZDr3W82g==","signatures":[{"sig":"MEYCIQD0Jvli9jStVkDEdtuVcjaV+rErTJIzHM1J+0t53kbquAIhALuDhQbX2VgHGb/MZsN/m6Iilb7WMWGo3TNoILQh5gtv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fgUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrK3Q//Rr9mU7/4ehqiTT8h58vsji8iSHCs4/LNBrQw+iulKVlc/hD7\r\nZIeh4P4bE3EySW33OLbBK0pXJIAwvu/aQBQ2pQtlLm+mJIFzt9qI5vGcRnQQ\r\n49g8QDy8kyFTOtrW0Zv21/8qW3JnOPnasl6q5i9+SEXhffHD1hOvh/8dw79r\r\nZuSNM5D7kgx5llORHCf1CekAWQSqWqe+1A8cU1KK2+jHPUPYnnw6fm86QDC4\r\nroUThDgHapyUaUqvbsCv+XV3FlVPfDYF5I8SeH1b8RtKXVtxJohOuwGoOL4d\r\nDyk+qIX5n6qSwipmfQVV4cXE0ZdyVJ4l8Xh8eW1/25GVhrDPhrKqj8Ulaudg\r\niAN7wgs9sjAhu8DLEwdt0fSQJYGaWUxBKl8fNh0mJAAZ9MemACN2mTQHMdgy\r\n+SpfKsvY5zFkRNifMKIZFn+b6uwmsKZjfrB7EzDUvMauyIgYs8Am3P5+4Npd\r\n0+dhtSzhPCIe+YEjvccw8PgXWlsBWuofOh1F6fe86gFeC92A4TrhzMtxHbt3\r\nC7bf4FvjxHjri19QAx7rt2KXWXS59mtjqSdjPVJJPYLQ0SApVEbGNDvLf64O\r\nioNdRilElYJNawaRzijm4ijGBw/53pl7/OhFzxfdeKO7vPGveRfhMVnJpsP/\r\nzooY+JMl3p7tZGNE995oOKjgWkab7D90Wp8=\r\n=4hPD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6b1923aa24f460ae50c61296787e46f524bcf15c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/rtl":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/shape":"15.0.0-canary.a16dbd1a6.0","@material/theme":"15.0.0-canary.a16dbd1a6.0","@material/button":"15.0.0-canary.a16dbd1a6.0","@material/ripple":"15.0.0-canary.a16dbd1a6.0","@material/tokens":"15.0.0-canary.a16dbd1a6.0","@material/elevation":"15.0.0-canary.a16dbd1a6.0","@material/typography":"15.0.0-canary.a16dbd1a6.0","@material/feature-targeting":"15.0.0-canary.a16dbd1a6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a16dbd1a6.0_1675491347914_0.5346443620447974","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/banner","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.93416f87a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d1e98de59e5ab3c9c3e136f6730710263eabe84e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.93416f87a.0.tgz","fileCount":31,"integrity":"sha512-ecI4Vf6FiV74IDfKCgZmtNecbW/faT882l0U1QpQ9zFA9peFtbfXBOuuLRJ407YljJRt9JBewn5slN9F0CAydg==","signatures":[{"sig":"MEYCIQDUukp/5sL+Nnh1qw1dsecuokV7Sk/rs8bFN+Q+VJkPFwIhAOi4J8CHny4E/Lqu4um9kpKbGxxCdJQ5ibl3YhWrSjKd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lFRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplHhAAlXcPIMGqLHwJV6HBrWl1k+BxjfyihFCo1Npv7gVUpj8stpkH\r\nqQazVgYZ7EfhahwI1S7amHieXVz5PPlvPJepthl6LN7qmoeA+q/Ay+R+ji34\r\nDInPOZ1hK2dY3okqcDbFGT/cs598kHSG9c4VWlJpIyz4qSDr2canGeVcDlxd\r\nsdSfnlzfHh0Ghmt8DB6awcN/4+BoAytoVXwcInIN4FCAwEpeDDH7Lh3cPkuZ\r\nvwYw6W9zFIpEHzZozA22cY50QkQ66Ia2vKIZARwcOhjZUmV6W4Kpol2A9BsK\r\n+zwQzqjEfdmy6prxdiaUz7etFP8WMwHuFgpFA0U+yGcfPzez7kjFigWyi0eo\r\n1W1lvAvlVEUjVuwcTr7pSlrXNRtAFrF7OoiS0uc7uwq40KTCraEIib8hAVpy\r\nxCopBb/dv2ZHKT7fRN7DiPWHCSRltcUxBo5UC7PHw+2hg6vjsT5i4Oe6hA9Q\r\n7Le9A4iTygH6NZNuF56eQQazFss9ZIFv9O6T/+Bs65GkFL4lcPNgafXUtR3K\r\nmtQTSH+am8J3o5AB09fKoBsqJloBtW3El0Yf88JgQ3xXj0iG8iTjExB5og4r\r\nl1uY0kgPx1eI7zSDZFR61/1F6WuEupAmsSnnZBFyj9cTaKN2xI93GyQJrSYI\r\nqqGtQGC53OQg+DBpeJ6mnFZHJeFJ1+CGRvw=\r\n=jBPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b9f82375a462288f01ce4e4efe6047a3fdd9f9a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/rtl":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/shape":"15.0.0-canary.93416f87a.0","@material/theme":"15.0.0-canary.93416f87a.0","@material/button":"15.0.0-canary.93416f87a.0","@material/ripple":"15.0.0-canary.93416f87a.0","@material/tokens":"15.0.0-canary.93416f87a.0","@material/elevation":"15.0.0-canary.93416f87a.0","@material/typography":"15.0.0-canary.93416f87a.0","@material/feature-targeting":"15.0.0-canary.93416f87a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.93416f87a.0_1675776337525_0.7100011599623886","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/banner","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.49b8e7442.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f87435ec8c0a489dfcc78b848bc2146c10a125f8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.49b8e7442.0.tgz","fileCount":31,"integrity":"sha512-GQM+51HPYt2VK5GVeUkXHXh5tA5P0d4iaStcGaesvKrEh8Ric/YwOGAf8eZdOlB6UKn30dLe3Q4C9SrA95yzcQ==","signatures":[{"sig":"MEYCIQDiNLK+SbYd5mmaZfwkI74tV1F4KkKrH2tWtWGDvZxSuwIhAMSna7JnNW8C7yuZOm4RtnO2kiqR3QmXZyh/WgbZJAJQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tp+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu/hAAomnZjo/spIi8clHR3dsqU91KfNxGoMiEJkwcNTXhgeso4QMi\r\nnxZcsiU/ldz+PfCnMSK3v1TeNcMqYd8lEh9T296PEm8BAtcXoJZfgDntuQZm\r\neHBfuvf84N2w3V0mBizOAN4GetvIvUW3OkdHl2O55v9K0bqSvolWqmbzf5sG\r\nRi6SB5I+6Y5OzKqaaFUnFFx/3AFqcVEGhUFquyNYqWBmp9K6YfWZno/4nkr7\r\n1gfQNUtbxjlyar4YSp+DLuiYkIY0AVtP/fSfeMjLD+P1dLEm/mtg6c3uMZCQ\r\n/Rxb6Rf2DkuXaKN00wXDcmH/qxqQv8K3DD54735knEr9REEd/LouvtpFbUj9\r\nbJQmqHFh79aFnNsvxyZ6fFY4lBtDws/mzY0yx7B2PeoBVcPx45wntug5LjVR\r\nMeJ7EKhNeSzZuz1wbQBKjb0ntMokMk/Nzo9cfMtVpMplZCb75Y96m1/qW57/\r\niGqVPHXcW//+maner9yp4z6UtybPrGwGHkfoWLkIrQva1jQ3iuVyAHTdCUdO\r\nmS2FCQkQjMe/FSibC5lT27E2xmYVOvg0vedGj6J1A6/0/biAMitTHmOgsVce\r\nOc7gxPIBhHKZNsPwNikpelIqyXFn5Bk8iHAY6LAepT2dsIX1BqwGtzL60wbw\r\necue8BGqYKhYDK+r7tgdamMANLAHvXzOieo=\r\n=t6cc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0ab5eaa3ea130a4b79ba5511e4e46e1f99b9e662","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/rtl":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/shape":"15.0.0-canary.49b8e7442.0","@material/theme":"15.0.0-canary.49b8e7442.0","@material/button":"15.0.0-canary.49b8e7442.0","@material/ripple":"15.0.0-canary.49b8e7442.0","@material/tokens":"15.0.0-canary.49b8e7442.0","@material/elevation":"15.0.0-canary.49b8e7442.0","@material/typography":"15.0.0-canary.49b8e7442.0","@material/feature-targeting":"15.0.0-canary.49b8e7442.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.49b8e7442.0_1675811454092_0.7050093626347633","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/banner","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.de38de758.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5fc0175b72f3da7c18d806990353bbfb6238feba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.de38de758.0.tgz","fileCount":31,"integrity":"sha512-nBU5zhldGaPgxcQHQKzbFatg43Lwaj+QyCqVIij/I5+WwsMVz5+oozptBMu6y6WoN6JWldcbRy7GA4BPwB84Qw==","signatures":[{"sig":"MEQCICEVHxmYLvLGDgeiu203HePc1698jDy2xjSs8UKqCXh7AiAwju21Ss0wBXPLAx2cM+6R5pnY9zZ33u/NcMNnOLAdDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RSzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9oA//ZagWDMyG7GUMjoMahmy8AlvYMbB8JE2IcGidAz4owmozLAP4\r\ngk+uzVmXQjRNUHHEb/r95WQpo5c9Xz/6/VfXzBYn5Prhx7pkjLuoTE0vz3b4\r\nvAFjqd5xoIPQm4bUYxl9J0W0yiBP8boIuSlIuDbc92t30aJqip3XwspEVBh8\r\nBFIDQ8aGVtZJ+wCWSvTfqQzM3Zg8qkdDz/FrZfy0a/3rcLmN20RHN8o/IdpX\r\nNEGzC6IyPZ1etYyGBYNijaosiNm3heUDErcz3Jkrb2qfZrVpXvnnEguYlmIn\r\ngIAPl2m0IuW/OJp8xtHr5ung6FnuOSyMYDcs5XrExaQyyI/xZPVmcmc62V9D\r\ndyZgInqqiBD3nHak67+APLR4mSgR9AxnKs19WHWGUSuNGH8qg8dpMFdqznS2\r\nbq0YUPIpsZdAZ0wITSPK0hAb/T+pSJDW8sn7YJtQ6A8ktEOLzYXGt+mfjb7p\r\nT5t5NRDm5uPeKU2zkFaS+37kiySme0g8M9iX+vrDlK7FriBMfq0yKPhumoru\r\nlUBcEXl7+t/l84bFIDXVFmul7l2TtTuPY6lJIONhriXjPg2QAWXcrch8y8Q7\r\nE9MdXe+WPXj5OhdyjN+Md13nNkvclPO7NLU+frAMqfAyg9f8a+d21+Lf5eNo\r\nSxpqrIvp4gXvxWVxjpXSrBQGZDz7PiUZA0E=\r\n=yOSL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"72df173af8eee38e00bf9af0ca5a77d5b780763e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/rtl":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/shape":"15.0.0-canary.de38de758.0","@material/theme":"15.0.0-canary.de38de758.0","@material/button":"15.0.0-canary.de38de758.0","@material/ripple":"15.0.0-canary.de38de758.0","@material/tokens":"15.0.0-canary.de38de758.0","@material/elevation":"15.0.0-canary.de38de758.0","@material/typography":"15.0.0-canary.de38de758.0","@material/feature-targeting":"15.0.0-canary.de38de758.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.de38de758.0_1675957426823_0.5858150015309773","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/banner","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4d62de70c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32b7c9ac225d3bd0c9ee947051da045878de4b5c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4d62de70c.0.tgz","fileCount":31,"integrity":"sha512-JDTkXilnHzs+0eEfBYLk0XX5qWUl+Tv22Rk8f/aU6j5cMi5bBxLTHj9vfbauT/MIifPntQpKBuA5zBFH5BJ1vQ==","signatures":[{"sig":"MEYCIQCDev4oQmqJR4uDYs+aqA/Xz5/LsXOwwwWxNeu+/JZLoAIhAJ9SxH6kE77rmjqaFzoJASvH+SBEjWe4ykJKvHabLIZK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W3lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9Cg//d+k3mzKDDl8jshtgbNuKN5W/Qbf+CLHX/9CFpORs+yByCiir\r\nTkyUZxpDscs2vcvYEI0kYcvfVELmak1R/zgWDDB+1YGp3YuCsXkNX2eheV6/\r\nD1EwtBULcul73TPoi0CrZgktGeROByWopNwjlz7Hqnl6W0ix1hgwjeLBfL+I\r\niM5dx5PEMORc9H3zZ2mYp4VGB+dwqv1WUeTIXJ3pVbxs+kQ9hbsiVYZ5jgFO\r\nlul3dLRj7AAFTwyXnixW6W61QubnYJ9dZrS7OMx8YjDBlB+yT0MqsaXxHM3q\r\n2UUuFhpAcWXnaEADKtzcO7tsS2xKzfXQ1/cT+pRO2ODaRxyhVnp5QdEtv3zH\r\nFOUE6QBOlgjtko6yF2OPR2vp3fcHDDyUJka/+CcDXm1rFWlvfOrmkXrDetuR\r\nHCHjvCXtLRXEt5mcqvxuaRwTJMUevqH31/peA/6hEv50seRm5ay2sZMXb5vY\r\n+9491b6rya0JrS/HL6jZFecpCAYrld3T9cYZ8PbPb/zRGE9ddDMwi5T5YUJ/\r\nOUkivlTXH+6wrfxqfYHGAZOblEP1V/U+V8PDVlpLBnLFghu3KahqDqtOLUDz\r\n3iag0m7IoCkMzwKXWcM+PIUpPbOSoUbOAJmoo4rLPbI94cMd+t5l+0rxqukm\r\nrLLRN7gvVie5F5TfmRDhPeyQXyprPWTtQw4=\r\n=WZDG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d2081b5045fc9871ff56b0d31ddacd235e2316d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/rtl":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/shape":"15.0.0-canary.4d62de70c.0","@material/theme":"15.0.0-canary.4d62de70c.0","@material/button":"15.0.0-canary.4d62de70c.0","@material/ripple":"15.0.0-canary.4d62de70c.0","@material/tokens":"15.0.0-canary.4d62de70c.0","@material/elevation":"15.0.0-canary.4d62de70c.0","@material/typography":"15.0.0-canary.4d62de70c.0","@material/feature-targeting":"15.0.0-canary.4d62de70c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4d62de70c.0_1675980260890_0.41556464152229333","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/banner","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6fcd8d418.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"58a39c6da7d9ca3a4968ac79661933ca8ff2243f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6fcd8d418.0.tgz","fileCount":31,"integrity":"sha512-uayYw0O9hPOqXP43sOW990t0TDuMx4S184XOUX9BcarH36tp9tmz1XnlLp+HCJxD0in1oMKS84QfNlQ6lgB/pg==","signatures":[{"sig":"MEYCIQCPGASwtNhkSHF/O4v6hSDDSe8D39ceL9sFHhk8rYgFmgIhANC9poCMTwWCts5KpE/MKcDpBiLzOewpU5ZAdHULVSgI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iQpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEmw//aoGqsCihMuE/YnperFYmED/ttLKnbK8s8SPo5DxXrRjCcbTm\r\nS/7o6s802+gxLwRNMm/XXyP/ER57BLEYWtCpky2XbGtc/DKGAeljN6AuYGFI\r\nGTNOGMUTqSDMhDqcK5yX12dz9hM0iL8RdL/PeLhK5Bl+Y/h4LWIkZFxyy7Ba\r\nfZaGErA5HIW8Ahvzzqwwzox9AFbJfgUpoaFyGp65W/Zd6eBYQwrlFFbkeGXa\r\nuqYD8EJLmmw1reHYP5twusIkBO2t88xSY7085HCIyUuKwSMesQ/kL19lUhcL\r\n5DDA0uKt9xVRu/bHzEhXHoJnnLKy1ApAKgJoCpre6X+8f8rIOAdNtbsU9GWc\r\nLANnPXakLz2npI57MA/Z8J/gt/QQ0W2Xrhng1ARQ4+lJbq5FBAfM+yYBJaHC\r\nYEHE6Ks1vhzr+OMj89JXKoJ8UgorE6xv/KYiDVLWKFf7sFLdURmAC5uUn/Vn\r\nKLf6dAZFA1DtLA4Tf3nu6JBziBX+dzWVghOOxTtCfYOLaX5tmjyXICjnd8sO\r\nWOcqDq6+k+/eYNMfedHAtKmuMaYRiFLPDDkfN/nNMNFpUkQC0vgvIe3pCWF2\r\nkkJdeVK2r5keoRs3nTFkFF4AzkXgIUaU7FBgBNccLVLHL/N5B7zBO1TSQoa+\r\n+vLgdxMwznxe+kubQ1MNyQgeP4tb6TI/ttY=\r\n=KUeS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"39b4fd2a38e7ab9611f614a59dd1694de0b94cb9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/rtl":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/shape":"15.0.0-canary.6fcd8d418.0","@material/theme":"15.0.0-canary.6fcd8d418.0","@material/button":"15.0.0-canary.6fcd8d418.0","@material/ripple":"15.0.0-canary.6fcd8d418.0","@material/tokens":"15.0.0-canary.6fcd8d418.0","@material/elevation":"15.0.0-canary.6fcd8d418.0","@material/typography":"15.0.0-canary.6fcd8d418.0","@material/feature-targeting":"15.0.0-canary.6fcd8d418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6fcd8d418.0_1676289064861_0.30738183006442465","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/banner","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.066d9439b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a556fb865eb5704dd40f9772718efec8329652fc","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.066d9439b.0.tgz","fileCount":31,"integrity":"sha512-i2dnvndRaIallgEgVDxHmgqXvPi3EUCqdAIx5vFrV+zUeXcBdx6JhWgoGg1FJrNO1pycwOiS6JkfOfqjWcpoMw==","signatures":[{"sig":"MEUCIQCG5nA2NphCUqlrcUDkaH/9OrFnkTqY4SAO4W1bbH1IwQIgOfQPZ5AWRxNVgyuK2y1DlYJs4GHtgpc96M2kUFzAOHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TmSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmovdQ/9Fzkix58fzEUVPr7LGpQyjk71137E0gdGmIvEwq8iKfNdMmTk\r\ngUMM+cSfXZ2hy9qNLuiVR6HQfayn6ZA5zIIgFV74GZGg+PyXBU5ZHwVBZZ8A\r\nBmfMzQ7wm1NcmqF+MEkJ4wCELj+vgSBmVWrDbTNQt4ZwwuU/ux0bZzo51N4u\r\nOqGXtiarH0Bv/VRL4Kq65LRs/80Ld+Pqh8fO22fadFDKQXUr0Imixm9E6wd+\r\nKXXb2AZJkGYTWrcDrmq/Qc6ATATfyuz6unTCQduUD+4IeVOoNfQ+9GoQqcOn\r\nuJZyg7X7ofA+M2yP2WP0Gtpi9X00ubkU9IP96orqyhM57IXRHsPOm1qZ1+gs\r\nUZrjE3UWs+gUf5WErFTKLnaAHppLneUYVeq0bSpp1/uXoHIwe4o3EhwXcCy1\r\nrkkIBAP8KkFbIu/VgLLURNcNc6+/RJS1M4a+LevA/vd7Jv9uVW0B7QK2GPuf\r\nljKsaDJ2Q9y8r1EF6FOk5/VqeDTu2ttB9Su3vaJCax3xiAqZ4i8JTeVcPxD0\r\nhD43jBkGca/olqhxCJicYjMKt+tOEnXl4wH2G3cPCGbthMc6IjH6uDsTrSfX\r\nqM5PWntVUVCJAm/MXasjT2/UjV5IDHFa/kvJOs2EfjIyvaAx9Q9JNkmpTz0h\r\nB5JEweHvThFEAvF7gd5fgPKZtSgUuvmT604=\r\n=fu3U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cfeee3e63b3e6330deff033d8054adb710498810","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/rtl":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/shape":"15.0.0-canary.066d9439b.0","@material/theme":"15.0.0-canary.066d9439b.0","@material/button":"15.0.0-canary.066d9439b.0","@material/ripple":"15.0.0-canary.066d9439b.0","@material/tokens":"15.0.0-canary.066d9439b.0","@material/elevation":"15.0.0-canary.066d9439b.0","@material/typography":"15.0.0-canary.066d9439b.0","@material/feature-targeting":"15.0.0-canary.066d9439b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.066d9439b.0_1676491154338_0.3872425161516959","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/banner","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7ab32468c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e9576eb21ff5e7aba0d648a36a6ae86548b04206","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7ab32468c.0.tgz","fileCount":31,"integrity":"sha512-dnNbOO7x/V2w3zGtZIGIaVrij9kAeCdEf7twYvtWhR++3E/Nx+dT1Zc27+i3SAsqyITcgsqXqc5aqjNIwhTBug==","signatures":[{"sig":"MEYCIQDlq2h1q+/eRpEIeVVAw9i5xY/7UVlMANetiUpolxH/9gIhAJYxXJd/vewPYG5YaHJEusn6YPrrTTjMmoTmS4jFtkCU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q7wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvyg//UF69sox++lHVKPO48WWN1DdC1G0tdj874Gi/sPxyAwPBOXcR\r\nICTcXjQsPq3vFz0Yg1cxYekRmRaFLNL6BH0Yfu4/75IKHFSxSAlbN0Fl95Cp\r\nItF03m14JmzmhdR3zGMp0eEqnT6EpjSHw8RqJQowgIiZ/yhvWT7NfWZOnHB8\r\np6zhVClI0SxFq1iQlRqyvd57v3qsFpJh4O2zCRQD9euMHUAVa+icpdcz8NnX\r\nZ2b26PMwfxXH5U8VldBRiMN2GNvLq1+3U+l6AS+kEEap/1IyPUCHkdOI3CWu\r\nS8KtrWHIcED4ak4SR8eyo3iMg0gVUuxo9wQUyinMg3FBl826I7gR1Sncs7hX\r\nvBb9XC/6l+1MIqbKeWCW2pfXKCB0qkPo8HmPc73f6SJB2fRdIJ3/K3bPbtrq\r\npXGmjjZwdxuuf4fIYsCOHL2G9Y39CyTpDWbSJ4uaakyKNEFV8cElhZoV2oKt\r\n59C84zgPTYxmR0Ad7SyRUhoHuzLY7AE6rOMGPshw7lu6omMaSveL+qKUZjxj\r\nVzzaMDICJjs0OmJ2wXU4QoYuhly/MKt3vquj9D1tZ+82Ww5FCR909zukM/5m\r\nxvYogL4fNmPw4iX1O0dpjuPL7u1ENImNjE7VorqjiRhBCeR2RJx+KUCu2XbZ\r\nTxqQ0pjAj/CSSvol0MMuivtsQ3Th7TORghg=\r\n=HvFV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"08b12f363223d69b2eae5d2719e9ff0da773381a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/rtl":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/shape":"15.0.0-canary.7ab32468c.0","@material/theme":"15.0.0-canary.7ab32468c.0","@material/button":"15.0.0-canary.7ab32468c.0","@material/ripple":"15.0.0-canary.7ab32468c.0","@material/tokens":"15.0.0-canary.7ab32468c.0","@material/elevation":"15.0.0-canary.7ab32468c.0","@material/typography":"15.0.0-canary.7ab32468c.0","@material/feature-targeting":"15.0.0-canary.7ab32468c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7ab32468c.0_1677004528573_0.5705818577379331","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/banner","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.fa27ba61d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ff5d76e03c38d4e2c7e1603c3011b26a90da369b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.fa27ba61d.0.tgz","fileCount":31,"integrity":"sha512-hXGsojUG05Hnkqili9+UxTmfqB0AQxeN02ys8Qw9nqc0ErZpH+rxB0m/gGbyGDP+sHFggwmSiDXLtQfhE9CNGw==","signatures":[{"sig":"MEUCIA5njs4+Nt84s2Z7M8JG+TR8S/NVnYbvTNMQYNV2hF/SAiEApktcek0K7gxrLl3Uwd6GJBleF+LYpLc9RNVliplyVqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NiEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoegw//caqga9ECM9JfgndVJmAryjKpDnpKxwuDoIX238NpWvg1WR8G\r\nNjx2aWc7QCdOUNMmB6yYaZ5HekBqcv4WXiAlYjGc0pDjR1iX9X3AKz++i7hW\r\nhlVEs+8v89cTwg1c0gqsQOdvI9JAFEWQWeo+4caAYANbUvppaSm4QLpwrflK\r\nDLWMJjcGR/03KQRk8OkYM/GQS08jEkFa8fGpltYbnAOAOFwLs/YjKifc3USd\r\nw9jlFyI0fq/4fSWIEp6QJI69mkFuQVAYy87C8lW/JgEELyy9eEVc+1k3aoT3\r\nxOPQJO7lLWd5KCKVfYxr/UBxNbBuBLRIQ+FFG9Kqf/vbktcueWmE1JgV3HGO\r\nN3UVUptYdoVj1Ds4hg6c/tKmCYwiuRbR1sPz/mZbrFU8yoUkezfPW73vowNs\r\nvBisfX3E3CYsXRHxrx21LTSvrCUMHKi0jH3uNkvxrxduvZtCQsmEugFmMFTm\r\nVPaP1jCtuhbWSum5mkbGlicl5ytavXKY3II9399nj2gSm94cX6ujW7MOQkf3\r\nxtmjyfyQHHli8TvJzN+td5IXS+3NrraALrO4en9O9c3WHY3ujuWEmTdfnPv9\r\nNoS40lmlRtuehTFyypzRozruLpyecfhuEjwNeBV/nEoFvAckE5jg5EHMFdcQ\r\n26epAl0ebwvPPxCmyRWZiyQNcHd6rZnyi6k=\r\n=wmED\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ed40c112543fe3ecfc009ace11a6f0c3f82fa26a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/rtl":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/shape":"15.0.0-canary.fa27ba61d.0","@material/theme":"15.0.0-canary.fa27ba61d.0","@material/button":"15.0.0-canary.fa27ba61d.0","@material/ripple":"15.0.0-canary.fa27ba61d.0","@material/tokens":"15.0.0-canary.fa27ba61d.0","@material/elevation":"15.0.0-canary.fa27ba61d.0","@material/typography":"15.0.0-canary.fa27ba61d.0","@material/feature-targeting":"15.0.0-canary.fa27ba61d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.fa27ba61d.0_1677514884071_0.4386180250837106","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/banner","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.311ab4d4a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c48b4a7ebd41f29b8314563c6719a89f2da9cdd9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.311ab4d4a.0.tgz","fileCount":31,"integrity":"sha512-2V+c0Zk/Dr8cIe5iDnAnJTAYwKWhvacXfDYDX8Xt9r5/gWI/4PBGIb0KEEHJeEKAwdyUe4hkEEApocQyzvLF+g==","signatures":[{"sig":"MEUCIFIhPv5EBqRss/Miup/9gBn4ZG7AVXZUbCKVNioVtV1ZAiEAmMiS7NglADhXHnpP4T/kp7xPmoWJPjf9KjGgn26lKLo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N2FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmosQg//asALoIQU1SFxe4XSsjq7k6yM90D95Ps0fGShwGQplRReth5X\r\n+KTI6tzg5tfwE1uI/TFcsdS2hPtqsRMT5VGqgBmnm10B3aiWwswt9I4iKTxF\r\n95uJqjZysoZFLy/xDAsb8zS01d6cN63W33/oXOnR1LDpq973kj7HJLHMM5ih\r\nG7bu0kGIWPyDA2JaqGaV/OOg9EPSSdw5/5rvY4KDlolPhz8Q9rBu7ZEzIfo/\r\nvhpFzUrQGymcuXKVNLnDmgii+hBzw7s0iPA0ixlktN5+VAD/1Lwh6Ob/SuIM\r\ndK+2Hb3/6tsAE+L85pTTY7w1fb8eHeCycXARn5Qe4B2jOqJ80XlHpqdRF3tX\r\nb2JBWIGMpOg0z563yvut9ynLcE4tWkjTbeVNo7qKkByjAe6DoTx+U3LmGrKQ\r\nXLjCi/bPSwKSqz8rpj4iizsnF3Xsuz+3GYqOHpH5h31M40B/cJg1EHO37K1k\r\nmk3slQWFxUaPiVJdADeyjI5Lt6DA0HEN+PK2Gst4S2Zh70ABGiFm3WQDHKmU\r\nQ69dSDqjb2ZsHVvIw7+b6smbu3o1ggsx7yakq9q9rPLr6etHqc+KwmcLdUai\r\n8dgS2QRFbmMfyNVYSW9D+W8jyKP/07BJu7nDTmLeMyqIS0gaWE4I2jqzC7rf\r\n6u6umOwY8Gryfic5VpHoywnnk/3Y8hDLRtg=\r\n=kIN/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"07f8d2f7bb4b2f30e60a6bd8739befd9d17bfbfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/rtl":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/shape":"15.0.0-canary.311ab4d4a.0","@material/theme":"15.0.0-canary.311ab4d4a.0","@material/button":"15.0.0-canary.311ab4d4a.0","@material/ripple":"15.0.0-canary.311ab4d4a.0","@material/tokens":"15.0.0-canary.311ab4d4a.0","@material/elevation":"15.0.0-canary.311ab4d4a.0","@material/typography":"15.0.0-canary.311ab4d4a.0","@material/feature-targeting":"15.0.0-canary.311ab4d4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.311ab4d4a.0_1677516164831_0.7945740420187892","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/banner","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5cb8e2174.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ac346226b0815a52e551c3b4cc2a6031ce97e8eb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5cb8e2174.0.tgz","fileCount":31,"integrity":"sha512-m0mqFDVx2p0MFjSMi9ITp24O/77/JDV4NTKUZfkMdWYi0U0Jl58pRAx5OBTyd37YaOQpktpu/ay5Ai7m35TJNw==","signatures":[{"sig":"MEUCIHNTqLFJF28X9wOAS/lJuqVwOq37qnW02EKKSkcVSFzfAiEA6Gh7g7h/tLVYbFSlDZJNK2jexD6f6BFJ61UYhllcByQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/38yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJ5A//W1F/F+nn+pqND1CrDMoA6Far8yYtISsJ3KiRbgo8rjPzzddl\r\nXT6xT7zkimztZak96gmftyePfi4LpyHk/nZ0cyDrgV2YjeWGEHagnfWi+YbE\r\nlCnHxiex4guXhMT9TkpF1DUwJP8NMBLIubYbBZlvnfFMz0Db/VtqvUMQn5N4\r\no59nj2rhGBmlJjEtrFfk0SfBCg4zx0Yl4upbMg3M8pdZgChYrEjhd1Ehu4l1\r\n6v+seZk6KjLNwhMilC+8ZpfyxBp+MPYTV1lR8Itd1oFzml3h+2E29VI6miki\r\nxb7qPMK8rt8/LuC/GnjgUgeGAUG9SnMerzUTFYFBvKCR0hQ6U7uXtkokA4Pq\r\nja+TMo1A4vLZgueLx2/sjDb/U4DxUJzwfN03gAMcld4B4VT9mU/Vq90MGZGt\r\np2QvJ7CPFNqFl4QymW+GZv4hIi9NFcws+UU/1OKE6zO4/2RFT6FZsChE2giD\r\nRsvqCZFFORc2QcVS42uODBeRPFfFUrn8wov/HCa+3muKRiRy+sLnAchnB8qv\r\ncGbGsHyoJQ5NHdpbJdYrUn6roTrcdVZe7uqm49C2DlqN46Bp2emZJPmt9KAM\r\nupjUrqY3QGVhn35/shDuoEWko1nyBGJ8xSX5tHptdjCQyOrAYY8AHKlgBL0D\r\nJsoWjrtIJVbKB/P2FQit1zi6Dwqe5gn5maU=\r\n=Tuou\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d57edaa5a3a3079c48ef7c804f0a642bbb682478","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/rtl":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/shape":"15.0.0-canary.5cb8e2174.0","@material/theme":"15.0.0-canary.5cb8e2174.0","@material/button":"15.0.0-canary.5cb8e2174.0","@material/ripple":"15.0.0-canary.5cb8e2174.0","@material/tokens":"15.0.0-canary.5cb8e2174.0","@material/elevation":"15.0.0-canary.5cb8e2174.0","@material/typography":"15.0.0-canary.5cb8e2174.0","@material/feature-targeting":"15.0.0-canary.5cb8e2174.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5cb8e2174.0_1677688626003_0.6476138544925016","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/banner","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f32339937.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"54c5a9d9191898ece80b596b66697bbb95a963b0","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f32339937.0.tgz","fileCount":31,"integrity":"sha512-ow1zHMiauq1ABrlJcpKeoPH0JpU/NotcpmCEMiebP/0F/9f2whLtWg1Ip4X5GHtS5cw4MI6U4uFOC9BfXpfttA==","signatures":[{"sig":"MEUCIQCtr/TJwa0VLgwv1XaTBQp4+Ea9hr5v45R+zueOMoJVCAIgD1ZkxY+L9cQ28XzEVMkX6wyQCry4xzmSzDtFR2t6QE4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgPqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpapw/+J795OlDEmXmTeE9CVtQlRBHqIdfB0G908pb4BksjSbWdZ2Sk\r\nkyOYC3cigsgbfHaczOEdIo/rOgIFwrLe4NxDfEpTFwYX0nDxAFEkb4hxDe2G\r\nJQDE8WHp6ibOpOswf+0g/cDSsEmZ7x0uFzY7EYRtp1mGApd+ePPVPXab17q4\r\neoXq1eLSZIh+od4G+Er3+FbcbEUQ0aPmPEBPb90WQp0S3tcsjPs9JXj6x+K7\r\n/9E1D9Vfitm4Ybn7umVPlTOqpu5UyFyir4b7+tANb98V2gRGaqWMT+BuRwPn\r\ndRHze7DBFniHErkaXHR3gb4IKA+pWpIB1hY2rLO8ajRzbWuQT70xpRjAZxK/\r\nvRKT5uce1FWB1tTP8xdPpYPmrnF/O17fv7VaiXwZT2t95+OCAVaP5r26YYuk\r\n7OBDmyGomfWI7aJOhL9TIykXBrCGpQ8KHamk61eopVkuneGNvyyjTw5cA8Kh\r\n3teQQwio+kTO92Qmhw1GwbxCImVVJ9q2H5q4x/rOV+sWxRR2SA7c43r8EJSG\r\nETz1BQcAxY7YsRDUbQgNs0Ri6/KpwvMICN3JQeTPjuqe0sq/N+IJ6wcYlssm\r\nG3i24NVOf1jvQDF7zhlggaE6QXFK304kelDJElMcdTBjgCgXjWvOfb18O/lM\r\nS+l9MrghQP81wNEDD2SdFZ4ICOAW/be2mow=\r\n=UsXT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b6c5103b89138f008c28f70d93e0d3faed285061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/rtl":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/shape":"15.0.0-canary.f32339937.0","@material/theme":"15.0.0-canary.f32339937.0","@material/button":"15.0.0-canary.f32339937.0","@material/ripple":"15.0.0-canary.f32339937.0","@material/tokens":"15.0.0-canary.f32339937.0","@material/elevation":"15.0.0-canary.f32339937.0","@material/typography":"15.0.0-canary.f32339937.0","@material/feature-targeting":"15.0.0-canary.f32339937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f32339937.0_1678115818425_0.26903962351999433","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/banner","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7644d63d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf7d4e9ef3a6531dacdd096e933fbd48581804e4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7644d63d5.0.tgz","fileCount":31,"integrity":"sha512-BzkbNe1rlw7SS7wTrl99nbTespGmOPyici9JULzaJeqUz07QtURAmC4DAyRZxyp/amgjGufQDTKEpHyoctVErQ==","signatures":[{"sig":"MEYCIQC45ONYs6Oh96DzfsyHOIfTXGvb9nNf1uX7yCO+vIZ5nAIhAILRnRZhun2mEe1M2DU5KIpZMhkls8ru1qEoRS8Na0yD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmkdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqu3A//XDF4+7MYo7hiIvgtfKbT1EwBLq1fOtrkY4Dqb/ZsZmpMw7CH\r\nGYHUPPfzsrOLHzDsNqcrsKEj+ldLlL5fGIs0RvnE1fOLxVLU0Eqm3uqDQOQA\r\nkTMQDJjHZB/BryA6ACwNk1Y8jqtSV3N806sm/f9xam39aENBEYZ5KUOt7f1l\r\nO/h86gG/ivu80YtDJVCgwsOdq/tCr9B8juu/XHve7luj65XNS7z0UoB6hvMh\r\ns5xBbT0ljS2RImThyfh7Zaz8JNjgY8hAwLE/JPCOybab2IkDnG8hnP3476Xo\r\nRR42TGDHCP5mgTsdW1pRl3cQwHN3awYg4QaMfPHCe48H+2YeN5VITNRL666w\r\nmT4iJmOPdW8nSdQvbuVDavdcpVjUlkseJUqXnQMl8mwU5lGQKomqEH23LJ+l\r\nybtJ/KwEVB93ilqjJSZETkV3lpib8MRFhfP+8Q6hb3PuRxYWSkwxze9aQkWC\r\n1/GUGg0bKcsIKk/WfseSC9GVcOwWsOHWNMH8YKyy2jku3QOqsPtXBSytG6+o\r\ngUWFxpSZU3nPvXL50puNAEV33KJYPofYeQiPcv0o+gcxL+Z36EibIaZypu3Q\r\nCNETf4A4b6b2qbnjDBHnKLwFw+3HHJ8yFxKl+mgAJNqeHPpbYC13kcQ4lesC\r\nPkn1J6medhqin3UF3JmNb4WCbPbMsxprwhE=\r\n=OW/F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a0332d9af18b36becfa025c452efffd11be59943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/rtl":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/shape":"15.0.0-canary.7644d63d5.0","@material/theme":"15.0.0-canary.7644d63d5.0","@material/button":"15.0.0-canary.7644d63d5.0","@material/ripple":"15.0.0-canary.7644d63d5.0","@material/tokens":"15.0.0-canary.7644d63d5.0","@material/elevation":"15.0.0-canary.7644d63d5.0","@material/typography":"15.0.0-canary.7644d63d5.0","@material/feature-targeting":"15.0.0-canary.7644d63d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7644d63d5.0_1678141724720_0.2214889352501881","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/banner","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d96330c08.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a130da20f1d7856ea1b48bcfe276e9d1dda173ee","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d96330c08.0.tgz","fileCount":31,"integrity":"sha512-6n5lFQgMoMH4Sa49haEOhORKy6uAnp+CgTO913BFLrPkIppBOa/lgkqEsNF8EzJSqbwudyCTLcs5sWNJICTuAw==","signatures":[{"sig":"MEUCIQDg9qB0PflHEb1FAZfDjCnuGM4k02JtpLAolowFNzAFEAIgFR4ckBOl4epRjwfq3tOt/e1+9dFygcjKFqot8gIpZ4o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHTLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXgA//avmd+M1keseMZWGKclmUGMQDb4jCdMsve59qzzBWCfFpY/+K\r\nDCVQk1Mq5cYdOakIw1v+tDFivG7kRE+C99mkUPXb9dysyQhzahym/ZkK4922\r\n8sXRPyQwbGrinlflphbc9xfPsvgQhNc7mWXd3nsG9lKNZUYFa31J+zQdRBOF\r\nDxvL3dAvnIXh23sh696G3KqHkDLnc04G9E/u5F8fLYthgj2WY6ZFmB9OWeKr\r\nglXfdXhOXxfow/UfqzKMG2gQ+mQVaU78WtVuYaWPKSKvr4vD97f9HbJ/eHaJ\r\n341dHiPqgehSFIQrQ3r8g2NxlEfkw+fkkJieIXRR0Na+kfrMMz6o4cqiUelD\r\nFYxzxpjBSvMDTkfNDT0ab8JdCZXcBvpCSSPcUlo3dgsefmgk9YmEwjPtUtHg\r\nb7G7FAnR9WVxEiHt7rIqZ93dS0Wt8fwixTw7K2PTPXOjUSOmSDZqegN64YWT\r\nxxEcw2GQo6FboZ7je1s02taCam7P3RMfQ9nyI5gBU7EHJWp5lWxcggDdtdmf\r\nEYuP0n2Wrke0SJmRM+byp0yot8kXUP/jiEYSN2BFXtVMrT2beEQ0T/vxmUBD\r\nHCUUJ4rgogWcOnn2/B6BkGlan2lfwGKPjvGzpyh9r/kaEF9CtHeu8e0va8pX\r\n5WlMy9dFf4XBWPJGG1+jmPVHmkyfBKLuylE=\r\n=MazS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6a6d53aa84a0c0a10bb15c3cfb596881140bddb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/rtl":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/shape":"15.0.0-canary.d96330c08.0","@material/theme":"15.0.0-canary.d96330c08.0","@material/button":"15.0.0-canary.d96330c08.0","@material/ripple":"15.0.0-canary.d96330c08.0","@material/tokens":"15.0.0-canary.d96330c08.0","@material/elevation":"15.0.0-canary.d96330c08.0","@material/typography":"15.0.0-canary.d96330c08.0","@material/feature-targeting":"15.0.0-canary.d96330c08.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d96330c08.0_1678275787032_0.1535323205037018","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/banner","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c99cae77c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"67f035df3875e077efb0f4a5241eecf757942c66","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c99cae77c.0.tgz","fileCount":31,"integrity":"sha512-ItrxzguVlhjV/A04eCuVViif/6Y5vS8UW9DaWAnOAS79D90xlKrrsz0nRlVOIn6Yv89BDasFFDuAlVIuouuO+g==","signatures":[{"sig":"MEYCIQCuoFSX1sKo6s0Yr3xu2Ij7dM/QZ3Yk2YylcAMw0e9Y9AIhAMseombTn9R83Ih7SHZBVqHaKe+VysfIVveExWScacQW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR3KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4sA//SNdiM71l0uAWR063TVn0llhLa+HuikziwZGhHyQYPNZ8GWD7\r\n6pR1mblmQKFFAeqlFSHxEq7ig47cXdlEEawCtQbc8yPpbHqnJKJPAddAJi4l\r\nmoFOqJVZUZR0qul32Ay/izHssF6VQCYa/0p4ZzAVfTX8Wi05QVv6aN/QzKzO\r\nIaH93JHIhA3MGzTTvk5enqNGttAfMaZdVecLAkaErM45U8bjQy/bobdtZBwn\r\ny4nJh/BQ+P4beyl3yS70HNd3oOcZ0SmLaT+GTeqb8z1K7P9ibyiJikMHgGJs\r\nxMdv54nHhnjQ5JSUQc+hG40kMjwD4mTY3onFQzujsI4ftmee33+V64ps+hv7\r\nrEqeSC6WovdhXu+Npx3vO8E5lYlM3F2dxudfRpu1kXu/Y42sir63yzrfPAJf\r\n+FToLQmBqzqQL6wupVMAKw0U2rM7W88ItOwgO6HI4sz1dxExwtAI4W6bOzgB\r\nBbJEWYJ+75Lu8ZHyZuOeLdnGXk65IiEP0zHJIUOwH8ESNm2N9taAbaL1BJmk\r\nBZmTskEo5pwFyWvmW2yZncy4WH8tQghRM8Oksunz7jQFlTV1Rt6EM2xOgKGY\r\nUfVEuodtiL69LaVYDfXWcE1Mw4yK7XJjZUZcsxs4vjr5KRwaoGAYnn2nl5+p\r\nGB+JCkTwz8FCH8wk3VgsRaiRHvm+KgDbEks=\r\n=+fTB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5b6a7c1a1c133381bad395ae040de00c64b62e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/rtl":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/shape":"15.0.0-canary.c99cae77c.0","@material/theme":"15.0.0-canary.c99cae77c.0","@material/button":"15.0.0-canary.c99cae77c.0","@material/ripple":"15.0.0-canary.c99cae77c.0","@material/tokens":"15.0.0-canary.c99cae77c.0","@material/elevation":"15.0.0-canary.c99cae77c.0","@material/typography":"15.0.0-canary.c99cae77c.0","@material/feature-targeting":"15.0.0-canary.c99cae77c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c99cae77c.0_1678319049835_0.11486881913138669","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/banner","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6023b1cd3.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"34dd4de7750423135ba9fceffcf0a0efa4d4c9b7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6023b1cd3.0.tgz","fileCount":31,"integrity":"sha512-XuNJCTAnCZd+0NNBDXEnSPXdLeGyBu4ySdOS7mEHesf/u/+eSfGq0Mf8t5EV8jkcn2xplczd+n1SfWhdxYlZSQ==","signatures":[{"sig":"MEUCIQCnaG89R+Aq2dvUb+z+E+Wb+AO48EUXQYo/red7FvJUwAIgEMaPHVwa8FGW9UdoofOSYS63kmc17k2+UyJfG50NifQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCezYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyHg/+PPJQWfxvo+zQFlBvwJao1crBkkiI8VFxlQ2ADpsI895R/Mj7\r\nTQsqzTEV4D0t3q+aQk5MgaTF8LPYOk/S67iTcvOQrvclbCgHFhY33QppMSfQ\r\nBrAdo17O7CQmuDzyPtq377wyguOnrKtnzgT+T7kdwhmhgYvm9xcP9sQYfe1Y\r\n77QtYLmAStasMvOfguUyogBMxnhZbtRJc542We2B/NXepdXg011fYE6cEESE\r\nzQR9qelTVJo3vKD6VCz0z6atWtnkYsdOdXr5zLYoVaGFDRVegWM8DOOuvkF7\r\nSbwxzIC5B8dcYl5nbKbHkWMZU8+ysnT22u9aR14LzBaEawP5uAB/QvdaSY8V\r\n3LI4WHtCx92JLBmBhA/DrnPsKV69yBJu9lHDZXdS4rZv4z/oZKvblZInz2rh\r\nQKh9mjB4tOafuQRO/8bv0WymH5QgOSvqMOqj8tW/KfG73Mb4H3RYkoT5nedm\r\nPnux8M7YAmoOq0KzhNr5FzsxfR95RgM7wa8wP8+UXOIX2YRcgAU/3HS87QIz\r\nQ5APBnk+cT6gW4W7Z3Q9uz7v6Wjldw1E+/Ch47imZfGma5ZWf9cT9jY71wzr\r\nubzTBIhoLFUU983HXfl0/EzaB2UvKt0kTzQe+H6k+IOP5ePe4wIEtB7W9iB7\r\ntYA/B0cE+BzI6lJRKOhDLOxRGiakqr2E54o=\r\n=yVPf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4d11f175faeacd8e5fe534611afbad84efceae77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/rtl":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/shape":"15.0.0-canary.6023b1cd3.0","@material/theme":"15.0.0-canary.6023b1cd3.0","@material/button":"15.0.0-canary.6023b1cd3.0","@material/ripple":"15.0.0-canary.6023b1cd3.0","@material/tokens":"15.0.0-canary.6023b1cd3.0","@material/elevation":"15.0.0-canary.6023b1cd3.0","@material/typography":"15.0.0-canary.6023b1cd3.0","@material/feature-targeting":"15.0.0-canary.6023b1cd3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6023b1cd3.0_1678372056236_0.9082797241318141","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/banner","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.274610c77.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cf64ddc1bb59ece1ec813dac3548f50c5333c5ff","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.274610c77.0.tgz","fileCount":31,"integrity":"sha512-rwP9CwOX92Y5+/8TovCjlXlylgcIe7J9h5MsurOBboDIJEgLNHRqW0bIceYsNehvQ389BDrinppYmwkPsil2bA==","signatures":[{"sig":"MEYCIQD5rxB3JjjQ7yWeBNO8/rThfxHzoTV35/+4RHt3xUQfKAIhAMtV66NpCWVH4JGpJTPL0JtXMNAQXUj/xnhO6joubtLQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfR0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMlA//ajiBHw9JIYUEttak7TOXGFI0vtbek72UGtoWqXOF278vVmpp\r\n+RNYsoRlnVF1+qW6pH2coTyM+6V4gyH0MjiEjv9iXcv1KEwcCfBShpwWod9/\r\naFs2IxNLW361Eb8gDcVBBnJVp3s0hP+A/cn4m4vgZ2FY9tsUf138rXGYwRj8\r\n31Wz3OnbDKrwhJOxbGk9Hi4sZ+yt7REwWMXKy/gQNkF5GBByM4Et8BgBjuQB\r\nnumSzGGQEWYArBbtP4Y+Fh7xfLQXH9LBeygPd+xBhpLDyArm6GCDYC2uo9lu\r\n4ZpIdwEkFd7sGSdU2afBSxwqtN0GV1gwoVGnAglQcmyWIOmtkVHZgspzsfBm\r\n5hXf9h1qAWpD5OsDPLc203DlIrWYcSkRJfpspgP5yorTLdHf/FwnPhCsWIEa\r\nhNVrD3ei6BYy29sOSjrGm9n17pD/daga6fkyNMe9r2DCoWa/KqCkQopOiast\r\nfIq1ORfuNZhCkBB1VVg0bu3YZFPc3t1osJpTjXh85jDwwpTcPym5c/4DL7Fq\r\nIDkEhvcfbs1hMMr1vzSsjyK4bMTi2V/1QPTrV4VnUT2sEfdHC6FdWEiIk+So\r\n+lX3cSwheV4OLNlTqSqgwyBsDuHfle6P3StFInJviBtoC2CIGADp4QQk0xI2\r\nSNc7U3s07THT8x/b7l3YUaRyTlOW0R92Qd0=\r\n=zvFe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7a2b02c682ee73deba431503de1a6f1fef211c10","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/rtl":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/shape":"15.0.0-canary.274610c77.0","@material/theme":"15.0.0-canary.274610c77.0","@material/button":"15.0.0-canary.274610c77.0","@material/ripple":"15.0.0-canary.274610c77.0","@material/tokens":"15.0.0-canary.274610c77.0","@material/elevation":"15.0.0-canary.274610c77.0","@material/typography":"15.0.0-canary.274610c77.0","@material/feature-targeting":"15.0.0-canary.274610c77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.274610c77.0_1678374003786_0.7713296187478238","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/banner","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a274583b9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef35e3a4afa7cb2b00197c7635339bc2856dede3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a274583b9.0.tgz","fileCount":31,"integrity":"sha512-qPdUH5+Y2j/xVPVHOnoNfhqhlqMFUsD9KeLvZ6uLoohrJiSBmcAJtwuDVoV8xWO1sA3v8A1S12FSP45r67dLtw==","signatures":[{"sig":"MEQCIBwYw+shaoY5u4H15b7pmW2KjPvThmtoA8adPtuBhuo+AiBP86X8fPgqidIfFpbGkI89ZpnBTNkPKHrnhJPGhUrZvg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjlRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlJBAAk8158d+wlh0cYMaU7iVjibISgw7U6CFfs8N3VK7HJ/GkNw3L\r\nAw3VOsqcoytsAjhV7t4XaVrHkEkgbX/vF78IEq9FRdWwX0qLZkRIZxsvTpy5\r\nUkH49jc4K9ZCl2i1pSYXnP2iA/XhM0u0JLXiSZJtBemNTKhrFgvh5h/Oj8OT\r\nsgQ1VHmk4V21CwE9uUkmd4X0MYF/xsAUqrW/plv8A1i+Z2WeKi8Ep87DytZQ\r\nJ3znLY6BJjjEtyCv+WFTqePj0+jIYwfj4zaWSL2TXnsN+6//1JtMZo6S3g7T\r\nfp3N51A+oh2qB77W6stdtIOO56Y3fuTanjX4VBgNUSHoAgszkHaBD01mOObx\r\nWgmIwihth32y/kubH0Q9TZYHGExkjSkGEqlu45wWwI/sqh2s+8KB1oOQTaJ5\r\n4hmT/O9QqqNJXjoHBkIk91PhRImKXWbitbuf1eN3b4KfFHYB8m2GwK1hfcge\r\nULQjyyzD1lWnCZbPmllinHY2KjAQZrIuqOwNSjlFppTW1Dwqarb8iF1Q+oy+\r\n8o3AxxkC58rJOki2FEbXn6p3LuMZjvLSlOypBzW50CTd1ryEHWV7lz1414cE\r\nSyehEwztoJ5aONHj5+mAuvePnFQHkUnvT6HxPsz65OaywRUhdHinTSxtamM3\r\nvEazXP+GHqGtszyfFs2DFwCMK8WbnwzgbHk=\r\n=l8Rt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7a7c8184214014c45d0ba8b4723714d1fe91f266","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/rtl":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/shape":"15.0.0-canary.a274583b9.0","@material/theme":"15.0.0-canary.a274583b9.0","@material/button":"15.0.0-canary.a274583b9.0","@material/ripple":"15.0.0-canary.a274583b9.0","@material/tokens":"15.0.0-canary.a274583b9.0","@material/elevation":"15.0.0-canary.a274583b9.0","@material/typography":"15.0.0-canary.a274583b9.0","@material/feature-targeting":"15.0.0-canary.a274583b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a274583b9.0_1678391633745_0.6803331079272401","host":"s3://npm-registry-packages"}},"15.0.0-canary.da22ca960.0":{"name":"@material/banner","version":"15.0.0-canary.da22ca960.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.da22ca960.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"92841a359f48e6ebe5cdd6048ae5a42ba956ae7e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.da22ca960.0.tgz","fileCount":31,"integrity":"sha512-/QbTli0Sq/OXlJ7ZiP0LTqr7qdZWaXXtb615U5G4kp7Ei9klZVbOd2iyivN9gV0P3j9n8vFM1q2XV707Mdg1rQ==","signatures":[{"sig":"MEUCIEbFHTt9JSCbbNsWEKz8qeSWxKCoec5GHmdhd4kI2I1JAiEA4Ep9bYApB3DR6GyHJyv1amG3JPQPWZPtCGRdMUNOo7Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCj9ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpffQ//UvoGnoqDI2MyQk0yI+nXvXuNRTD3Xk47eCiftF98tDf9814O\r\nF9uO3YOiRtL3sQt7rwP4Ke1PQSFWZfpWlT3KpXJIWWwW18jo87VrN8Tbb+dR\r\nG2rbexfMUpmnG9E+vv1vatBjcNokuow9WK3CX/ekGScEExutkW2+6vsYGPvU\r\nI3k05MpJyDHhKJyaBTGOj8X065ug2XCMtYuehlCNieE2HI7OphU1OPRdStYs\r\nUvUYUCrv7F8danxgZEB+z02laNOE2EvhNqg4tdMTmFRK6Lwq21Zb+eOZJdiB\r\nKpoameCnxz2hBvEiDhjqFOjwgbVoL9rza8GCuFkkl1Uurj0SsFvmUPenuTwU\r\nE9EaaPx4PNIZNxw2f/2WujcsvvALEeKMYuVtErdnlfRj3vNKMaVK0guWqtQf\r\ng3rNFe7n98uKM7/QkCu1a3rb4+LFXOycyZ4zgCFPbNiET2mk3nUZz6IkzkYM\r\nbv+Ik9zT3wk06SiX+DMmP4O9rgd2J8ikNtdVRs42CEg0c7zTUKKoIb8+pf4E\r\nJiIHxEJeXxIh7Bo0WqtPadp8eIs2P5rAPVZyWrunTUa6PiX+znDHpemrzTlH\r\nngXKshX5+DVeekAEGLIsFdWMEV5CqocA/xfBq2hxld3akOAvTvEygatsCyRL\r\ntMHSLquWpXLv4kTa/JSLkTAkhTBwdpC/Jfc=\r\n=DPCl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1b58f37865efc4ba8ba06e1190cef502dee9f902","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da22ca960.0","@material/rtl":"15.0.0-canary.da22ca960.0","@material/base":"15.0.0-canary.da22ca960.0","@material/shape":"15.0.0-canary.da22ca960.0","@material/theme":"15.0.0-canary.da22ca960.0","@material/button":"15.0.0-canary.da22ca960.0","@material/ripple":"15.0.0-canary.da22ca960.0","@material/tokens":"15.0.0-canary.da22ca960.0","@material/elevation":"15.0.0-canary.da22ca960.0","@material/typography":"15.0.0-canary.da22ca960.0","@material/feature-targeting":"15.0.0-canary.da22ca960.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.da22ca960.0_1678393177302_0.053283626912833615","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/banner","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.304a94e8b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b06dacee41d3b1f45be8d0919d8b3790ea7bb737","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.304a94e8b.0.tgz","fileCount":31,"integrity":"sha512-D0eTpx28ApsF7COnf/QiTEuJrch6o9iRZ+3HSEJ4DxJjj2z7p7jv5ZQWcelPCXSL1eL4bt3IAXfJPW+znhbBWA==","signatures":[{"sig":"MEUCIETbisWgi1NMqhuwaPHJUCJlEOh+K5eTR/6gCL780IErAiEAlv+3AiPlgW55NjZ8XNzrGqy6A0uKN3L+e84fRMBm5aE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkWVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdfw/+P9H+T26ioxnxtkvlw6jOcZFkznTXeFkViU9EaPIW/RKLPb7M\r\n72pTdqxrpVoEn6rLG05kB6H2CAi8w2iZYvyLH6XBkZUIkyeLBSz5bzos4YMY\r\nWevwtnQAbKpTnLPlD6+SkgtOpPMbAZpEE3+DAnVWa2PbXRK6blb9KIOBByMY\r\nfDTmohTgcKY9OHAOhUu1R5odE5mM8RRwlBZ/uDRi5iTqsEYnJX+AwnqTpG7K\r\nOmkyK7x1jvE72mC43m59GqO/D4IYoPWdmuSUz9pKQ9lTVZhN4zvcQ/UAyarY\r\n8lBOrtVoz1qYtskuI/YxtNDQIuAJu3ujEaG/N0AgkkzlezVSBojyvMpXtjXc\r\nt+RqYid2Z2UD4fXRwnkI3vh1HwtM2hoSJ9zESA0O7EWwm0i7Ndj/VdSWchVv\r\nJISXuliFw/ekDY8/duYokilVtt0fNKLazvQA3Y4psM4J7NEurrwKfZEBo1rd\r\nCgsLWfeRbloM/EiYo6MPX1OG9Tjs3BcCcw3LYIyk9Jgc1aEQGsN1ZEDHiLOY\r\nX9xMnTNBhLCCm+3QWVfv5MT8JJULbRpcWPVUYPsufiwqLIAvDQU7Pn4NijzJ\r\nHhmAMCma6zVhD5yPW1sf5u7NGfU4WcEUxK4ML4b37sMIw/ulJ139XlesAfC4\r\nf6UmoEEHHGE96iqFRcETlyr/l0sC1K5nXB8=\r\n=at9b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e7550e10d6a01c606a6dd78c58c4ee6e44c3f062","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/rtl":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/shape":"15.0.0-canary.304a94e8b.0","@material/theme":"15.0.0-canary.304a94e8b.0","@material/button":"15.0.0-canary.304a94e8b.0","@material/ripple":"15.0.0-canary.304a94e8b.0","@material/tokens":"15.0.0-canary.304a94e8b.0","@material/elevation":"15.0.0-canary.304a94e8b.0","@material/typography":"15.0.0-canary.304a94e8b.0","@material/feature-targeting":"15.0.0-canary.304a94e8b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.304a94e8b.0_1678394773266_0.14663313792431376","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/banner","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6c265915c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"af37fe69b2c37ca1b0bef5df094ef39224e8cab6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6c265915c.0.tgz","fileCount":31,"integrity":"sha512-Wcu3VhHq9fJa8hLeD9EavSsofVJIws3N4XPvSaAolO/7CZmYoiyo349tSR7/WSKIdwbFOfymg5iywfUvCSzsSA==","signatures":[{"sig":"MEQCIByOHGQndmuUuOb7ltjPM3NhrWPXAsPBFJ5qXdX2PBlVAiBlS85Gc+EpMSaqyRqslmSSTHvYvfAap8pdxHxXZ/t8ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClQwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvVg/7Bpfx/ChYw+GXDyLJCJAHVQKvf/3rhWKVbfWtrzea5Ol9JHVR\r\nDGEtt59izbWPL5c6tE3lsor1AV2lrXu1LVrEyhGpWo4kd/ylXGEnFwD6Hhic\r\nXxX162zQfu5CED7NH8Pn8Eqs2batRUVKmCd6oeBxSwBJGZCZcWHi+TzYW4zc\r\nJfFUqDVHuyOxMp9JAOA4uoqabZhiIw9h+NCeTliAYsUeGjp7JVeNtiIUlVfx\r\nrHAlzQAn00gEG9v6jHE0OXmxbvoE967owqna0nahnQU6WwAaq5DRrhHDP37/\r\nJ+ihcA6EG+5O/eWTTR54ostecPfN9gBJiOHdjuUwDhCob12FPqEQe/JNIvlZ\r\ngGn98Vkg5JrYEc8bzmZO7Ec7dtK/dUZ3rNF+ksI2pZAC9CMDOZkG4fMcY/92\r\nNxviIn7HlxdZcn5yC+ZrUBsIWlQcB8TkOP+8Jq4mR3l6zsFKBBsjPuhHY5U3\r\nccSyHwksFP/GNKUGX+/HzKz32v25vnwprWNCw4MOndl4hga3sQ1SbiqQv4aG\r\n1t4heeLLIvxPzCdfVDipS8k7kwFGi+QICD+95gKs8LKeN9TGnty3gKQYV+gp\r\nb8CQmsCiuJmwO1Q05fVrh8/nBmBl+1m2/pqBoQG6qiNgmzEAMJbEFc5Qqgnl\r\nJcvl9eMjVaNorgRfVVqt2dYdzZMVkF86PQA=\r\n=UIxO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2226d2e658d88eace91ac63729977eb6bd7a9af9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/rtl":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/shape":"15.0.0-canary.6c265915c.0","@material/theme":"15.0.0-canary.6c265915c.0","@material/button":"15.0.0-canary.6c265915c.0","@material/ripple":"15.0.0-canary.6c265915c.0","@material/tokens":"15.0.0-canary.6c265915c.0","@material/elevation":"15.0.0-canary.6c265915c.0","@material/typography":"15.0.0-canary.6c265915c.0","@material/feature-targeting":"15.0.0-canary.6c265915c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6c265915c.0_1678398511851_0.0973519819708415","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/banner","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.de5224633.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"dfb9a25e734d760e0f0de74a9af6ce19c1347117","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.de5224633.0.tgz","fileCount":31,"integrity":"sha512-F3VRW8bmGs7eH81Bx4b0s0oeNrE0HcSqPPyf7RLEm4Qa0l92oXZ82SKPmkIsgbDVdBnyTqsYDruvKuonM9K8aQ==","signatures":[{"sig":"MEQCICgUNo+3YRzB16cBYknd0Rj2kGrTjfjXaPc7b4tDyz3zAiBuhi+IDyu5aUyVUf9ZLSEKTdZ+snRQ9J1wyjN/phwRjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnJKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp22w//UXz2+1YV1IxTQhDTUU3a++nXWq7YihteKup2XXMZAh37pXU9\r\nKhgWrfJCauC8JA70rHA15ZXMx4zaJPMTmdyfY8iWGJjAR/Z3mHKnQWOV/Zh2\r\nMS2yU8zrqhILhWHOIG1l1ldBZvtFq+yp5brFQFbq7KGP65SmjmYhWT/7fRmQ\r\ntSg2HmPtk4YM+922UUl6MC32ic7h65UMpgn09GtyL+NP4wlLrCDafW+c6rR5\r\nZbpH8cu7ArAyEY+923V3pJNM28ar9NDxqdah5DEclr5mLAMuztKU+49/4Aot\r\n1AfVthFCueLrs0L4jZUkPdYIDx713G635yJu6xIYIF6ZI2X3M9QTv7f8dPwT\r\nWedoYRVu8FU95hKQ8HqHNB5aMZVpAs7lYvGQdEcMxEwsO6sppxqrSpcWrCMp\r\nPUOQO+Lnq0vM+hghDc0jYGbgmOHByTzWYShc1FL4OEJRAA9XbJVQf7lJJVX5\r\nYqMlxaciNJQezQELNtOQ+nnZtpbrdwoQgniW5ASf6PsvjJ6Q9eWXqh8lgSP/\r\nRCB/c72QKvLcLAZnW3qL0rXBOiJy946A1hc2LU2QZ5xPB7ofi/8y45e4PrPq\r\nd4C4LI143BmyLOIOEEb3galogy6QWNNGSc9YCIi7l24l4nWO6LOcCv8nBWKD\r\nxlYLbuGL09e66buu/4UuhX3znjsBEqV0sM0=\r\n=l/NP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"994c620135276cf7948cc54b286c6c306c3ac01b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/rtl":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/shape":"15.0.0-canary.de5224633.0","@material/theme":"15.0.0-canary.de5224633.0","@material/button":"15.0.0-canary.de5224633.0","@material/ripple":"15.0.0-canary.de5224633.0","@material/tokens":"15.0.0-canary.de5224633.0","@material/elevation":"15.0.0-canary.de5224633.0","@material/typography":"15.0.0-canary.de5224633.0","@material/feature-targeting":"15.0.0-canary.de5224633.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.de5224633.0_1678406218675_0.6249658464435977","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/banner","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8879557e6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eab27dd3ed849a12ff266a45d0e69a11e8c761b4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8879557e6.0.tgz","fileCount":31,"integrity":"sha512-/y0nSWTlepUaMqFoN8Uf748H45rxIyZ8IzfgARjlWX05+iIpRyYM5FYVaXMmkZ2F6XOHM0mKH0qfwEN7Kw1wPw==","signatures":[{"sig":"MEUCIQCPl/NSyAH3aZQesilxi0GBLYRbVKxhFhovHLbEsofi8wIgJWCqqml82dzPJTszgXrDex0xelY1NS6mFyKVaAjBJCY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzoEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXDA//eHNRHaIJx5t4NKfjD7serV71o5qQBhI7c/hYw4JuRX509hmy\r\nHin1LENgdsAmg3EdKKmKBg0gf5jJyAflARJI2mbMh+Qdqg9j2ZudrsSHY9SZ\r\nS/xDM/URr5q+/LpA3ZmJWRBA0UJxMo/He0cG4fM5erVKB2MgK7xvBbPUnmYW\r\n4+ICGO66Y1feo/pMFEPMeze8Ulo0BCwZURACBOB36nae84rWR3ngPIv4AOZw\r\naaO1j9iLSPf4uNMpzdrUqcEspzocPwZuuKJw+6odVPXW509Os1QrPvvXzzkB\r\nfx8pb7ul0URDSunsDsLuihTSFWDZyJChLHr1Jba7DZTUsOcLOVwVpAFXwMjQ\r\nAGp95SU6s/r0sHRNABuHz/UAXUuQaz+f4C0DNglKkwRJy4qaO7GrBf7zuX24\r\ng6K8B50NxMPLAWnhEc4RbtRT+ZVOVGQtP1nQkxGOja5xRX3bf4854uwJHl/b\r\nXZFhJtfTXOxGHf9Vu6DznjLSOxhaE6gIA2ljKLQH911u8uewEm2PJwM0eMEi\r\njsb5UBbSCChd1TE/pW8fTisBG+67vZqXg+T8t25DE3C1LW0+Y8Ortp7HNUZP\r\nlMsHiCyHAY8eHhj/hamOdcw3YU/xa1lVZYzVMiTbvLFzudabiSp+jXknTfi1\r\nDovGOj5UeQPgJEaG3bMBElTwt+SC8gWkoSo=\r\n=MMuw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"28f7c223e2bb4a686b970a425d14b1d1edd70546","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/rtl":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/shape":"15.0.0-canary.8879557e6.0","@material/theme":"15.0.0-canary.8879557e6.0","@material/button":"15.0.0-canary.8879557e6.0","@material/ripple":"15.0.0-canary.8879557e6.0","@material/tokens":"15.0.0-canary.8879557e6.0","@material/elevation":"15.0.0-canary.8879557e6.0","@material/typography":"15.0.0-canary.8879557e6.0","@material/feature-targeting":"15.0.0-canary.8879557e6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8879557e6.0_1678457348726_0.7141377249065151","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/banner","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.23073a303.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abb819e93e4b11fc950a6abadc6c588f88586738","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.23073a303.0.tgz","fileCount":31,"integrity":"sha512-6ZIF6twD9BH5QQqWYmXZbbhJ5F1yNBu/tsMVSM4GrhFBTHmzjeGPmBqo9g8y396SNlrpCC7IuDWw9YXwvFzzdg==","signatures":[{"sig":"MEUCIQDufw0KVmzqNIrPlkKftKuict8etdy85bAniTroMr4TzwIgev0W3LxygIuevTzZoUz5ArpE91ywKB1Qd4Dlbx2vG28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzuwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIDA//YO63CKO2lo89VYmfnj2WGt3ASX9zj/az322NR6VVE6OFK0Bo\r\nzUPDpTUwP4xrAxpSVmR7UAKxV+I9GiZwQ/OALg0BmaMIHwekyJcmoOZUwz3x\r\nh5a13u39bysAS7EJuuHqOX1maHY54odFYjDjCfzec8agzHfIZKoJgWMbBHcx\r\nO+ZjJns3Aa9xb5q6tfR5paE7Ir5nKqp4+ObvNYBYdsaQT0RCEdJId3vXaPhh\r\nk5zN7Kar48m9t0exzZQFCm508jc2WVOVi7XoZeYIfuLvJASEr7otjzn2HF7Z\r\n1PtmZzed3o98vRstLEj1EdwICpb8ol9WLkdQXKEMjcRXlHRPSB27xvFfesu+\r\njRj/nTo/7lpS56e8Xu8eQDgR2AIBVBdCq/vMubP62K6Y8PPgvqHOe95NGBJd\r\n9KE/O1G79Pgd78KdH95yhaxZEzWyiyw8utDhJNtNcr3TFGfTBFnRkG9Xw8AL\r\nF3wocFhJh3/omAdgLEV9BcY/7BHtD4O+bn33qPHumLAjxOpup2ia9urF3v+x\r\n5pW3R1yYFRCgsfDLvVxDtrRCpfTjUDehRCcar+xV5x4FvhZLuYRRpYCxF4eG\r\nNRqXrJGX/zzNoGrx6uh/4PHia2cHM/0bVYk7S/6dFN/In3qK/JfpUHcKSBJH\r\n4SOZaNQVmJlx6VlgpHOZGJTsPtKlKTFoUO8=\r\n=FHup\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2d7826e2ebf1c1fde12f47b603e66ec0df229a8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/rtl":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/shape":"15.0.0-canary.23073a303.0","@material/theme":"15.0.0-canary.23073a303.0","@material/button":"15.0.0-canary.23073a303.0","@material/ripple":"15.0.0-canary.23073a303.0","@material/tokens":"15.0.0-canary.23073a303.0","@material/elevation":"15.0.0-canary.23073a303.0","@material/typography":"15.0.0-canary.23073a303.0","@material/feature-targeting":"15.0.0-canary.23073a303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.23073a303.0_1678457776452_0.6829217850059022","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/banner","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.51c7d4014.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6686d754683e45ddae740d3cb149ef04e60f3e2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.51c7d4014.0.tgz","fileCount":31,"integrity":"sha512-B4HKyZ+SHf/KW2YjofY1ujCQZBfNL4CwLGAqNTeBIFWY7jN1tNxxbP29mV5tETcmky1hndriiuyD60treSakpw==","signatures":[{"sig":"MEYCIQDp3GNJy7LelOJKTz+dxFmI23LwG0GFLjfDJufhYtZ6FQIhAJeHA7XIRclhkXBz5aRJvCJDYO+0OGaBe20S0cqK3IO0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC19oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJHhAAmAztojhHeok+N9qrQNoDeADOmzNrRTdEQ6k862vCv5spBfhO\r\ncTvmewBx5SH7Hi09dBDagaDlJs5I1QUwF6F7gMsK7fAAdZvy+JuW75Kp6Tse\r\n4dMvEKvMfCj9SrTukWArvoEdLDlrFAiIIRoIlMr2BJknzhMoFwVVWCqwtxpx\r\nDsKlXwryb1mRjILcpvCRs4IHTj9OxItjbFm6Gvst+jJY7zDFeacSCLQRgrId\r\nENihJIoveOMTf9wdX21Z7dbN/4w+FmYtM9jbrPG/kQ6khCkPCudved1xJSA7\r\nWFik8Mb32oKxqRNwU0zi1lWeAVQThaGhrf/TEF2+fu7/MpUKRmvbmWPrw9ni\r\nqjsKm22ET38khV/v2YP1YAg00Qh2/nMsnPrbMw+ozym4i8Gy5/3QXgkjkY9I\r\nVvY7nggWTdsUNBv79evnUc3n8IfuwjX1+eyKAcr5exnN1vgNi7sjhaxHVlrF\r\nhBBRP/r1F+tOHWqAE1Z9dvaTwiikhdsyb0VoRSw/pkWMq2XH3ZdFi4x5eplM\r\nqAqJ84R3ktK2Gyduh9uv1OXbHnQdPfiH+7/KZuL9z6VlNA5RCL/VDzk5HMvt\r\nTyQKb93ax2yrYLHD41MuLzK6MfNf/VWGixy3+p7eePLahQqcJO4nmVWLhvo2\r\nACMVmoNV25Rh7iaQHJ2pV0hGjLAdKqdSs4c=\r\n=euns\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0485e6059d69163f12d83408c09b1d41f6cb8dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/rtl":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/shape":"15.0.0-canary.51c7d4014.0","@material/theme":"15.0.0-canary.51c7d4014.0","@material/button":"15.0.0-canary.51c7d4014.0","@material/ripple":"15.0.0-canary.51c7d4014.0","@material/tokens":"15.0.0-canary.51c7d4014.0","@material/elevation":"15.0.0-canary.51c7d4014.0","@material/typography":"15.0.0-canary.51c7d4014.0","@material/feature-targeting":"15.0.0-canary.51c7d4014.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.51c7d4014.0_1678466919793_0.9923824375890189","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/banner","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1175a5be0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ddce26da412c35024a6d3949b3a1a067716ec9b9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1175a5be0.0.tgz","fileCount":31,"integrity":"sha512-E6sW7d2+TrXJBbPTbK/iJYrw0w5zDjsgUSQX1Nm2X/IFMG8MWCtoDGW/c7C0mRYRDwqOjB3S+7giu3l/Elnmpg==","signatures":[{"sig":"MEUCIChtHOQ93IHmkHYjCrELaRvOf5bsPHE9s+aQ7iy/jDDIAiEAry3PwfaURct/SQ9aYDyEcjOx8X1BLxyYJFEx+9VS+jY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5fKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo5BQ//YbTMVQuYYYg+JrBrOpSUuKuakmrGLatNTeHD8PELWrSunc82\r\nYxOiZ/Qz0F7dYItI63ElWZVhA35U3H5/MU/+2loHpt9vfDQXZndR7QppBOUp\r\nVz6H2fxy72tihVI0y+Yb/207CtK8YXxgmhHGGivDRatu+kAwcXohXWbVnHp7\r\neszamDHoWwuzLcJbgTqVGgsHJVWLf25wnBjyvOE22a637H1cRz4ibmwamWrN\r\nIeLa2t4fV/5JaW5QS2lVxn+yOQHQo1PyHndtwg1zuDoLNqAKajZ1RR/gWmQT\r\nIClJIQYDXLZPRCiOXZcAnnXuxXYN8GkBiEw9WQNkSdqG/1X3FGYojeU2lF9i\r\nUt5mai8AU0swqYW9s4MzhWyEtiWx6f1xa6mm7RvhkC5fG6/xKrR2WY14pdSO\r\n1mdZjqQgOYhLRTcFcbkGEG2wlROn5W9REy/usXN9zsODNA8K1UG5TLN/zRqG\r\nKlYItWxX69yKU40G4G4PKEguf8BjXkRNqXcOEsWehR74/NPFqcJgdVuhRAHu\r\n3RpodGVoPD+Qy5/1AytaiZoIKdz8HS3O/DipXggX5goEiUWkkBlUQZx7TbHz\r\nF58PZh+QUFY4W9AKWOe6x307ClafepSRCcIGXS4gIzC6XOTkjw9IMyXL8awU\r\nsSOR+ywPGCm6O9a2SwPM5zuU/EdFpB3T0eY=\r\n=PbXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1fcae3e4ba7c60c6a51ee8e61b01e26a324b1ab2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/rtl":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/shape":"15.0.0-canary.1175a5be0.0","@material/theme":"15.0.0-canary.1175a5be0.0","@material/button":"15.0.0-canary.1175a5be0.0","@material/ripple":"15.0.0-canary.1175a5be0.0","@material/tokens":"15.0.0-canary.1175a5be0.0","@material/elevation":"15.0.0-canary.1175a5be0.0","@material/typography":"15.0.0-canary.1175a5be0.0","@material/feature-targeting":"15.0.0-canary.1175a5be0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1175a5be0.0_1678481354639_0.6512765385094248","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/banner","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7adf3af80.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a7f430b4ea1de3a82ce6e9ba6faebf610e223ac8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7adf3af80.0.tgz","fileCount":31,"integrity":"sha512-qH0XOjyyKMsQoEFPNdH/tMk7JaCSfrWIjidzdKgqzGGlEroam0szRJiRLfWQ1rtyZaqzSyCOjJmsJZg+rtg/jw==","signatures":[{"sig":"MEUCIFrOjYr5DD00WTJtK4DO+A3D+EaVEVM1IBi9rZRj4+i9AiEA1IXXwPPuY9LcdvYoJhcFaKMql8gbCzxhrP/sCGedFv0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9izACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrrug//XEVumxH3t6l7BcEtApgTR3hoSQmFkm+gjOTLumzX9YYe9MAm\r\nVifms39HfilWj0i1fUySaehSMl2xtINKTr/aIgeJhnXC6SeGhevCIF6jjZ5S\r\nc+U8EjiKWExCAreXM8+3PIxaLJrGeaR49ZR+1WM0JYBBk+4Mx9y3ljJlIFQ3\r\njH94vqDbGS0divNGgk/RKCCrcQXoF2lf8NSMXqWYSazSPNmbq0V0Ca+nsD0B\r\nVY+jzGur/F0KOXZ7o7U6isMUx9cD+Y3ewPGBuyiHiwHAWLYNNTYLTJ7yD8gb\r\nbtdbS9Yl0Da3xVYWEI6K5KLoN+p5iF7Wh3j23vQELfAbyt2cAxcsNK4gEou9\r\n4dn5GVALpEwPU1/FqH2ym+gs+Ew0IfKJcDqLXndxFjsAKZnu3OmoDnQlvF4a\r\nEQSR0BXI9FYF/v4RucGJpqtpyaaPpZDv94Ir2BQ+mvDjRQAjYxnckC/STwt4\r\nFswlYBIIPexszQOZ6bt/aLGPqctMLAC09p9ucdl9EKoGlPfB1eLhV9zl+cmA\r\nLM0Zj+tb7bM7czQqgV1WGDP46e6uMN449QhUIZzCjCMwuMIrwnT9jNTbd60T\r\nays6a/UG3vE+gjLg6rj2bCYRMHwC2Np9+MiNAIGSyOrD1SwPjZm2VmDlWnv8\r\nLaTm8lFzMF/08lOD78SlWNlAOyPZUVuzwCY=\r\n=ded1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"57b0835838a903c8ac3ba6c8edf79add958481d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/rtl":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/shape":"15.0.0-canary.7adf3af80.0","@material/theme":"15.0.0-canary.7adf3af80.0","@material/button":"15.0.0-canary.7adf3af80.0","@material/ripple":"15.0.0-canary.7adf3af80.0","@material/tokens":"15.0.0-canary.7adf3af80.0","@material/elevation":"15.0.0-canary.7adf3af80.0","@material/typography":"15.0.0-canary.7adf3af80.0","@material/feature-targeting":"15.0.0-canary.7adf3af80.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7adf3af80.0_1678497971314_0.21549679209348227","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/banner","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.82554d770.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a23cba26fa4112bfee7da35f1b7655971ef33e2a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.82554d770.0.tgz","fileCount":31,"integrity":"sha512-SEd2ohy8WdeT2i1dLswLYohgKIMkcvNuItdAJvdaSKU94WebNI2OFn76jeTD9xP9xmwJO07bnFj/8iiI86BiYw==","signatures":[{"sig":"MEUCIA5Mg2xYOXku1I0SKXHrOlvrYoyPop7d+WBXN+iFKSsnAiEAufgWBkG95q1ttIUnte54emUaeeCVXgZBfW7etVsE3yU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9uSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrJg/9G7b5WdLlcz2dL8qH6wbTG+UztSN+Mc7a5oQqa3TGNOHtozwK\r\n9j3M4xQR8w4kAvvpw8Y3dKMSEE209d3rBTyaHLIxziMduWUesqdaOVlc/PWz\r\nvuzeD0Lcgm6wfLQ6Vr2liHqJ5yLf+s7hBPJMIKF+3MewUVcZ18jG1/Cx+c54\r\nglRAeNMQg8KWfMLVXcl9zjgS+fLLwMA85hk5+SzXGOD5uNMjjE7Rk+12V9Uf\r\nXejSKWPvwKtPTA6iAE+DQ77JCBpNBmBuLj/5D1f8nw5owFaDd4YqP03ewHpx\r\nY+kwTUhnCdgQAgTVQdc38rGBgLaZG4kqwA1lfL+/neCFP7V9ff83BHI1qJuk\r\nuv+FrvS7ciYo21wl13V/0Debb9zHVtAqu5gnkOtpuBoXLNU+NHrbbwEyekKv\r\nZo238UAM1GEZmr0vmmdxulgIkaUA/hI7odQnLpr2uJ7DbemaL8jsSFgdFsHF\r\nghX+Cr+qIcb3sHZbotUIZUmgn3kbfi6GXdu2pYkCyzScTuHIhMyC7urT4mhy\r\nu+deZ99MDluDNtaNNpaH2+kvTtMBtpTWEHA92zfmfNs636//qekmgmCUO2i1\r\nFQb1Vk8Ll0mwNby/Gt5pMTZ95LyRqsW+u0IXxDeb4mm82fh9cDYv0mUB52h9\r\n9baj/daADz88Wd9bwfx4zYmMDdQzpznqris=\r\n=T/q+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"500cec655918e97ee1edc3c86ebccdac24a28f56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/rtl":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/shape":"15.0.0-canary.82554d770.0","@material/theme":"15.0.0-canary.82554d770.0","@material/button":"15.0.0-canary.82554d770.0","@material/ripple":"15.0.0-canary.82554d770.0","@material/tokens":"15.0.0-canary.82554d770.0","@material/elevation":"15.0.0-canary.82554d770.0","@material/typography":"15.0.0-canary.82554d770.0","@material/feature-targeting":"15.0.0-canary.82554d770.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.82554d770.0_1678498706519_0.47075661643154887","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/banner","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.93fc524b7.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bec779034a39291b32eeb679f5a263423223e91d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.93fc524b7.0.tgz","fileCount":31,"integrity":"sha512-aoM30Xxm0DzG2O1yn4UTlAoZAFMkM8m5IOaJUCkqOo6hzmSn5AVAk4SAj9KCZWOFeuCT2DI38Nno7OfMWQiRuQ==","signatures":[{"sig":"MEUCICLaZVYPScTepKYwD32jWTz63jD25urr59YmDSEr/kNiAiEAk3nirm0XmeFcXGeD0HV4Ma51Ho+IdIn6gN6Ca1Bqygo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuFtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9iQ/+NYqiqGAtj1bcpKR938mZNmXiG0SRr38yq1MeSHf8Mt5gpSa2\r\nniOo09a1jyR/FDly3TOEyQyIxu03xoxLoivNPIRBE29bkIh9A5uDal2dYNOy\r\n69oEgKEUy+V2DF+JBkZFU50OT494va4rBpErJI95qAdpAR2KnjCHT2hPvS7y\r\nJ7zkcApsVFjn2nJD2v46WXqRNt5msh/3La0FcjbLnHlNjJQvmAF+SfJAjNu9\r\nxHKXRi/ixptgq8+KaGRoBjFLAwBMWvtKzlmAUIpcfBlPZeLU2nfuc2g60N0c\r\ntWM9OSDqSGvXb3nd6YkF5wKODjgLA43aBZZTqxoqojsu61hUYhV4P0l1+dMr\r\nUOrfE7kgqFNAt18kMM2cIuRyQefcMcGs0pe5eQ0jlYE88V3WPufryREZL6Zr\r\nq82vlegy7ZHC9gJM5P7JsTvcdGfXSDWU+uFmSH7R3/7TyUWkREIHciiAszua\r\n3HqsQQw3kpu0VoY/3qAf/iouKEOVYdGbfGBpcKm9ylUzjn1MoAOAfs6EdYjE\r\nGapPX3aLrtHjW88vwKcaBO2duym6DPOrWfi6hNKjUt/+xn+M1MtBdxkmclqA\r\neph7S0fUG+uq5GhJ8V7rC6uJ9THEX9Q036HedZhq8TtRK4cQzw10HaY3dway\r\nJmzO+Tu4GUkPh8Hkb4G3lN7Am4uQ7+iLUss=\r\n=z1wm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"338daa93529c874da1af6eeb4fafb935e014e096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/rtl":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/shape":"15.0.0-canary.93fc524b7.0","@material/theme":"15.0.0-canary.93fc524b7.0","@material/button":"15.0.0-canary.93fc524b7.0","@material/ripple":"15.0.0-canary.93fc524b7.0","@material/tokens":"15.0.0-canary.93fc524b7.0","@material/elevation":"15.0.0-canary.93fc524b7.0","@material/typography":"15.0.0-canary.93fc524b7.0","@material/feature-targeting":"15.0.0-canary.93fc524b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.93fc524b7.0_1678696813152_0.4513056962690474","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/banner","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.50be0fbae.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c39790a4de7a4f39ee44acf05ad5c5615c4c6855","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.50be0fbae.0.tgz","fileCount":31,"integrity":"sha512-VG087sR7UfX2aVQhLoUNmFm0u/esIlFXwaRsLhUdZjdzN1o0HWujKj97Aq0qNPaYJP4V6GpUbthdq+kBylA9Qg==","signatures":[{"sig":"MEUCIEeE+HgwV6UBHKeRxj9wx+nwWus199kjoVA6uD9zhvY+AiEApNyY3h3wzzIv4opCOqF8q9vzDjSey6FxLdlVTbLofGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2E3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrD0g/+OTCqg92EKkS5O0RfX9xYULIO3a7xIXAM329we3UvA2Cq8jcl\r\n1G2cP+nbsxolJEAbeXoxs7leaGrMilA8OXUMQ0FilSMOoeqBtt9Fc3MlC0td\r\n1sbhxSC7hhPbYv2vS2O0pUMs/9YMXG9KFJjKCtu5xti7L/rYvbZVmbCmmX81\r\n1hLdCKPEO8PToQoa3i/xWMqA2+9HuKoiwl0ckwm84uMGoqTaXGzupndJWZzS\r\nkwPRMaBgAdAhnXrn1ewx4aTo2xjHMzND7XLqIm9f9iVCuAQ2v2fmLOjtVCHq\r\nCkISSXwSdfcS9SovNtlYc6UAtc9gPcZdtqzh0bwHlAbP7QnzSQqK0cVa+DwS\r\nwnnq5e/FYDAFzqSLxvQKJtIXetjTPkLB3mYcCzD80DWPhnX5KeADKRgRL4FY\r\nAtOGrojPY4HFgV/COEwG/kkNMVp+sUUtZwYNZhnc/5KZhCJRb8p3JeHYc99h\r\nFjW2dmmbMm+QxbQPsbLJ6hnp3Wrf5uKTqclPkl4jx47DN1luSQo8sqbTb+oB\r\nMbuyPtEe2ZdUWeM7oZxyrEiy84gRr5jV4TOckc+w7Vcfa/8/G0IGvHJVb/Vr\r\nO1a04eQ2BTsOVbPcCbPEEslLiz/yvlOilhFCtVWnQ6LbLZvCsFxjqRdIi7vN\r\n8ZiGY5Zgg6WLCYSYnT5rXFs+pRziNM+G7DU=\r\n=qlqj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"405d98c2882461cee8d47ab1b16a4666ccf7129c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/rtl":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/shape":"15.0.0-canary.50be0fbae.0","@material/theme":"15.0.0-canary.50be0fbae.0","@material/button":"15.0.0-canary.50be0fbae.0","@material/ripple":"15.0.0-canary.50be0fbae.0","@material/tokens":"15.0.0-canary.50be0fbae.0","@material/elevation":"15.0.0-canary.50be0fbae.0","@material/typography":"15.0.0-canary.50be0fbae.0","@material/feature-targeting":"15.0.0-canary.50be0fbae.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.50be0fbae.0_1678729527734_0.2196513945186005","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/banner","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6b5ffccd9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"9801edd6bcbc69727f3137690988733865b78808","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":31,"integrity":"sha512-D/EzCQGqpkiDJtrf8MTnuMNnwc78bkCLHUtEcO+QTHDtUd8Kr7lLdcESKLvZEnZCQ47pcdKBQEvzenT8vbiEdg==","signatures":[{"sig":"MEUCIA8DcFHrpw8BvwzDbj58IVsU8Nx42dDZKWXR3imV5T01AiEAmiKcNQDyZueAKES+MsSCzbtRnL285inXV92rVc5xKLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2IEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplWxAAlfs1Cwb7jThrIdrNmuMhumkCQ820odhSlPPQq4FzLclA7e4/\r\ni+KpcHD2G5UIsVuAV8HW7Cpae7pVXrnf8RabhWaIss/gobuSI+P1LoXZM2aO\r\nutUc++MD59bpdWSpmWVIvsG/XKjF9R04O7KlnlN42S4F0Sc3FP52XkJZReRZ\r\nZhHGtikChUTiveitnkjCUMv1E0+zZDNl/j/jRvGudr0pvvs9KWbKQl8Fh8C8\r\n+miRc/XdwLGfVxDuQzwIijK6nfp1G+PRi6iISbBuUdMvk/njSTsEb/ZWXPTT\r\nwBQBrwI2C5hI//q5CfxPW7fPpasKg1qTa8thdPfcKp2YRSBIUYldggZECQIf\r\nkrr2Yo5+gOOxvzQbFcIPazl5YhLFh8mn67KA4MDph8/yG1FnHUqglZYUjQbe\r\nVe9pMPatqIfnr/8H0X8+pFkpatRyK4GPR1Ihqjspg9PCL3pmhY/NRUg9hQP+\r\nG8w/nYqyZ93LI8e1QxtlWxQVKvUOzNw+zxlYKpr6RnDbJ3Yubga9MqXuTtog\r\n5gRnIa0EI6EQXVm4sK/RpYjtvJVKMogeUEQykjQPOvCxXsCPM/OJy+mxMvS1\r\n8alv6H74J/KnEcpljxkKbacQi4WTP+vSARLqN3K9Ze0qXE3DhDvAAfp2vpXg\r\ngUlqkdOQDGxUX8chpt2gkiYBQ/GM7NKngk4=\r\n=aD2A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"d30761453fd80caeae042d8999af672f9c3eaa28","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/rtl":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/shape":"15.0.0-canary.6b5ffccd9.0","@material/theme":"15.0.0-canary.6b5ffccd9.0","@material/button":"15.0.0-canary.6b5ffccd9.0","@material/ripple":"15.0.0-canary.6b5ffccd9.0","@material/tokens":"15.0.0-canary.6b5ffccd9.0","@material/elevation":"15.0.0-canary.6b5ffccd9.0","@material/typography":"15.0.0-canary.6b5ffccd9.0","@material/feature-targeting":"15.0.0-canary.6b5ffccd9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6b5ffccd9.0_1678729731756_0.38029736785189217","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/banner","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1c8013f4e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f7e7615a8017ff8e4142143de4a5912e1a6f19fd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1c8013f4e.0.tgz","fileCount":31,"integrity":"sha512-x/B7JijvsT475vhnnjaCvDb0/rhIZjd1XB9+aHM7w3UaEajtg0skORIx8JnE8IAJCsj2Rri4srRMfwVP/AtSsA==","signatures":[{"sig":"MEUCIQCt8ZQyjGMs8RdlJay4bz4tXDWDwCGlrKQuXgUl7Y1USAIgX2dcxeWxXY60xzULia7NVi+Z6uQEgRSqL0pfpBJPWG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2WbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPURAAijGwmKKBReh6DKO5jQsxWB/exVF8YTZntxtjgc5sDl0oE8l0\r\nM/8+ZKlPcTmOQOyox747pYGUMutcso5zBgl7u89BO58f49eWfStGCDjG+ugl\r\n2dJZUTglCknZzh9EtDhqC4uFUptWxto66DEQ9hQqq64ZVqJUv0u+PMfoTFbQ\r\nH79mfJAAcPP1/S14j+qqiKoArnaxYYFFgkfvJTFiXcfIV4TjuydpVUNqNRCH\r\nutl2AQhBiLKV/cUccbOQGka243qXWuhTt4ZNEinuPlt3k90zqwkfyohZANwJ\r\nJ7vpTEDhoacNStH8qBZf226ueEDBPwHEIQnETzo7Cn7D4mKevaiMa/h6DONt\r\nRUcIs8J2lk4OgcPRDiORuL+hNkfouErHFLaVKaisF4nSyB7fUx3BxksInbIu\r\n3+rWHQ7qrQk2GnbsnMpZeHSEJ3NhcDvCKFwcO7QKXmcfdFguljJkYhGkxxCF\r\n+DvDTO/lpzbA+an0gUtoTvUkaXpqzipZ7YZ2uMaKCkkF0fjtI1w3XcX8+bR9\r\nAABBGuXdDKRDRkggePPceaDliVGxtzRBA2Xv/oZyPyzSQa/xjJNpiAGVDrAY\r\nUZTdwyRQvQEEIxTvlDwcT7Ulo7wo+b4ovOUnCVnbS+cTr1rGdTtSjqmapuoY\r\n9e8r+o0pQokJ+fE7y594Lb7jSlFk+HYNLOk=\r\n=zK19\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ce86f06ff0c2637e8cfa4965aa614efa6bb86046","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/rtl":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/shape":"15.0.0-canary.1c8013f4e.0","@material/theme":"15.0.0-canary.1c8013f4e.0","@material/button":"15.0.0-canary.1c8013f4e.0","@material/ripple":"15.0.0-canary.1c8013f4e.0","@material/tokens":"15.0.0-canary.1c8013f4e.0","@material/elevation":"15.0.0-canary.1c8013f4e.0","@material/typography":"15.0.0-canary.1c8013f4e.0","@material/feature-targeting":"15.0.0-canary.1c8013f4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1c8013f4e.0_1678730651196_0.2823082579585605","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/banner","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.112715df5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c90449d89c7b252262af08ca047309f66ed23a33","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.112715df5.0.tgz","fileCount":31,"integrity":"sha512-isv53u+VfnVTgt+3Dn26KCLQ4SRcqMEkI4cv/8mZZsWxDtfdimcqfQIpF9ojiSYImgVLAcfKCRn43KA3Cpg9QQ==","signatures":[{"sig":"MEUCIQD+su7/xXEHfoHjGhz5io2uvM3Mh693t5waHOSpGGIyUwIgNH8mXSRB2bEtkvsheRRa61AkAMnS+ch/T87kZCPrFGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD24gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpiGxAAgkKuTO8RmKY0rc9e+Hmjc0suR65pEx8rLH+3pWZA0nboG8B3\r\ngvWizq4uRkxUJmvn4DzyrLmyqJRQcdIRMLK877z4YL2lqVyQD9EWYG4mhAtJ\r\ni2Q8rY7LNEMKcY7450ekKKzdX4kGYFfXobg81+1wfp96zCoAJEY8fwNK98OF\r\nSaR9j6elYWQ7iF78yQeDznP97yg9ukONXo7rSfen/5NzoxJaS4kgXS+yADGf\r\na/55RdNjOO+OM78kgLsU4hWzkGKObE7nQThomAsJoCDRbPfGlJG3Z8zRuATS\r\nBMGR5TD5nJcVCl/NdNPIcSax2iVZEmUUCGsNo2JyNij368SN/7EoAU5yyHUs\r\noAxpYidO8lDv0FgUdcXwRq+soXxtD2UN1XPS7Ta66AD+dSjMzdy/RijR1sUM\r\nywT5x1PAnLM+c6J35eouqyMC96ThwV+U+fnfAhTbn5C2sqUGnlErg1YYyEHw\r\nzJj+OKrwr6p8Ul8VQ5d/i+5z2VhzeZWeFMzgJbiwCqTPb0wkF/D4fHZgQbTi\r\n5WLOerH3uhskFEAZG4+CnlQj+8F5lfa27Bm8dyt+3UiICBXmT4Up6R2cD3aQ\r\nCln1jZR+fVt9poqEUXLbpnf634cdNnrABEYTqQv18euUEwVT5OQK73EAbrAc\r\nFVbbOE7gn58W+qdfr22w0cS72gzeWM6Zzm0=\r\n=Un/A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3894873450b9dff1b92031fcd1d00ed1ec3ba9ce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/rtl":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/shape":"15.0.0-canary.112715df5.0","@material/theme":"15.0.0-canary.112715df5.0","@material/button":"15.0.0-canary.112715df5.0","@material/ripple":"15.0.0-canary.112715df5.0","@material/tokens":"15.0.0-canary.112715df5.0","@material/elevation":"15.0.0-canary.112715df5.0","@material/typography":"15.0.0-canary.112715df5.0","@material/feature-targeting":"15.0.0-canary.112715df5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.112715df5.0_1678732831782_0.6928615373896216","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/banner","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d250911f2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb8b28026d9abc9a36299bff12be16eb395f4069","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d250911f2.0.tgz","fileCount":31,"integrity":"sha512-Rn9c3khdMtlUAJINUZgOexaGIHUITSoUebWnSX1sRQ0hMDUi6emu5GJIt9pW2RQ/8OkdF7HJ58rJ1b9iXFvKTw==","signatures":[{"sig":"MEQCIEVLQStuFhBRU1hgInHF7otzvFItjVBftt+LCVtRZxRvAiB2zQoGdNBGKJ5Lmnvevam8Tf5WlOk6/E4wI8B8QHh/kQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3pjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3lA/7BMnPX0IANFsDAkJt5NZmcOyPe/Epb3FbDWPcK0bUUU2pSCXa\r\nwTwHuJW1mvxGP0OigtFwL/ezWrDEcRgVBzKBfo5xUl1WCxw+dbl9Fp7Eji+E\r\nzVURnCTzs3KB5by8Zk/KMaUxKh7W5NxAKjqrSrCVKhYVI5B0ek4IfY6MtOcz\r\nAsvCgf1xrRjH7Y9AgGjlwsnO3zn2eyl2oLE0Iw3ZGZx4m5WOKKjRMGL+AVDQ\r\nJVuO0ab3BEykkgHOUpG6+WTNK/8LnWxdLgNzbCLP4htw5irC8dvLR418SIVH\r\nKcHHNfqrHgnVJdLBvFjyD9VBnojQFepAyU0B0bY+RLoIevxnK8RRGrHYE2Nc\r\nGLn6YpDQXsFesS7tPLVMvjvv8oKgi6KxcvRB3wpREQdbMkkLNHAAHYno8Ah/\r\nhYups7NQqW95z+Fx55sIyN9nZwxcStMRN9Ttl1LqFipmtO56EuLDJWOYSgZn\r\nXl5wD6xA/0++shSjcv6kwoNLrZB1xCXv42q1uqH4BzidiBpO5N++fAAXez5/\r\nOJkUgi9qhfEhN0+RVDwIdUTSZY1END3mSp5TxYvfJRmE3y2uNzcFTifNpOwX\r\nB2Z/+CLNc0K7aNeMerplgjB22SNbVy9JE1KkaI1C5qDhuNs4tn2yEEaiV3si\r\n7VXfQsgB9/zz8WFf8DX/XgWmx9U99Ve8lpw=\r\n=adHs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7b4ac246b31922fb4beb9ed168dba262e499c271","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/rtl":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/shape":"15.0.0-canary.d250911f2.0","@material/theme":"15.0.0-canary.d250911f2.0","@material/button":"15.0.0-canary.d250911f2.0","@material/ripple":"15.0.0-canary.d250911f2.0","@material/tokens":"15.0.0-canary.d250911f2.0","@material/elevation":"15.0.0-canary.d250911f2.0","@material/typography":"15.0.0-canary.d250911f2.0","@material/feature-targeting":"15.0.0-canary.d250911f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d250911f2.0_1678735971637_0.35239855919791285","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/banner","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7cd925c12.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c850b7ad67c638f7844c7d7887fc8b3890948fa6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7cd925c12.0.tgz","fileCount":31,"integrity":"sha512-XE0SMKq4QneWOrNd2gQth+T31rCQjRADEiszxwKEudAd0G0qNcz+L+wv9KeaQLRSMpf2arknc14oBwG7fnjZyA==","signatures":[{"sig":"MEUCIQCct8rQoTYaDoIVBZlre8QgGl8QvABI5u7Tsednh7+EcQIgWxOQTFpsDcLT63Crz8+6giMeYAGsRUG06+wYCUF+51Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":788998,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3wmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7rBAAo0G2WtZ7m67OKpIrn8KRPeubH6lIebfVBCcOh1xtzAesEDb8\r\n3hyKpSLIqkwox+tr/CmiSb46dcRP/92mx8l25XAjdh4QxUBnb+cj9OqARU0l\r\nA7Dg6JR/ZGvJDj/TXgzY0n+99nWwRT1cgbwHHWy9FkfULrWLd4SHB8yKBikJ\r\n6thk2gNcLlpHgNgjF0NHijd6HqG8MqIcBLihml162gEWKQ5YGMFJpuIs8KAl\r\nRIXJmKfMMmyCTQmRzxkQVVRBcKaDvdtaQfYX9aymuxkWwXfM8crslBv+orCS\r\nXisrAfCzBBNb6HIS151N9P5mhZSlYT+3ifv60YdfO8EnTCskJA1T56XZzLzR\r\nYVyvCTLubptVMBXJhkxuXDe3NKt6s7n7kI9AIiurm6w7BPOx1hYq8fwnL3vV\r\nyzYPdD9WtxygsC13Qel+73jjd/DN6nVswPsTi7LkM3pyjQoZ5TgzbQ+FGPjo\r\nX81H2lQlpsm2ZgAcJnLYRdd24cEVVZzG56oApnVDAf0y1OaRTBL4IKBN3BYL\r\n6lFVap1XpoNNoR8syOWzbqrLZjQGveZ7y9vGEbFx1mWs7HlfTQABuacZB6DC\r\nwpu+lfB9GqOhe6qMXB4VW98i4UfX2MMzAJKaRNH4gKRJsy9OlwLzoWFsz1/h\r\nkL5zgVJMAbNwj6g9HXkl/+JyTMF2dIMon10=\r\n=GaGA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"96310a5c80e3e92695b6d6e2933e9b0c82e58a20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/rtl":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/shape":"15.0.0-canary.7cd925c12.0","@material/theme":"15.0.0-canary.7cd925c12.0","@material/button":"15.0.0-canary.7cd925c12.0","@material/ripple":"15.0.0-canary.7cd925c12.0","@material/tokens":"15.0.0-canary.7cd925c12.0","@material/elevation":"15.0.0-canary.7cd925c12.0","@material/typography":"15.0.0-canary.7cd925c12.0","@material/feature-targeting":"15.0.0-canary.7cd925c12.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7cd925c12.0_1678736421822_0.06905557016994934","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/banner","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b2ddacf73.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e57a8f5004aab87d0f18ba55af0ab156684a84bd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b2ddacf73.0.tgz","fileCount":31,"integrity":"sha512-G3C3cAf1ceegGmxojb1uX7oc6ljDfbe1tbbGoCzlRSVXzDGc+8up5IxW/uKLiUGN+8qi7t1i0437EbK5bj2uJg==","signatures":[{"sig":"MEYCIQDW9H1dFDRX6cOsgfsW5keBd79IjiskyV/+4IvU20GANQIhAPKqnfWd9pWSt2B5wsmJh+k4eP4+QmlIMyES86uCN/Qi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD30pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUkQ//aHuhzF6oduBKRF6RhMzgVLbXHPai8Aft+wwdcZFJUZs/P+Ks\r\ntZ1IiqIfrfUPrZNO9EvhTdVlCNmAoOQnoCSua+/cUvLPEq2AIGfXpIKydU1u\r\nF+AtWBrUkW9RNeh6ouH2NJv3Tb6uhbmPKDZjeM9nq7Kc7Lrb8eP19rksVHnV\r\nAMlKNFYRIlZhlg8joguJei8C/Ppz87kbJS/fCNHIf0MQf4C6lXyENeG1i7r+\r\n8E3n3IFq92626fufH0Oz0WE+NeLURhk5PSYCbhBx0yw+nxqK6wKlQrQ8zEDj\r\n/UDICXOKPb7RfgPTqRy0jj0aSYqPK4YZ1Hj2bK2LVDSlvuMMCwtR7nkuQfhR\r\nz4O7sTzLv36wKN5KhCeixotqfZxRgQaUXWilyJ1mVc6KU4qn6tFRUtERCie8\r\nEgYWrRVpEYMwTS5EAczxId9NQ1JiJTxgP5Os1+FEikiHmeOnbqGu8+4kKMrz\r\nZioNovkJioKnQ7Fsai/Q+sHyzWWoUa0l61PAe3upODUP74YT6mQTf2jRhgzr\r\nNgmYJ0OdnjL9S3ibRaNBzZBILYWOQB7dj+QQrMf0Q9LHvDI9XV5c3mVAGmZh\r\nRIE/2KdQGaU64uQbx8Kk18AtfX7IgeRp98MNwCmKduwa3T7hR5N74tJFfavi\r\nsfYTvlHx052IqR74x0UKiiUn18vMh6gT7Zw=\r\n=NE0k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"860a6f0b439760b894931fa6cb354412764bd21f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/rtl":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/shape":"15.0.0-canary.b2ddacf73.0","@material/theme":"15.0.0-canary.b2ddacf73.0","@material/button":"15.0.0-canary.b2ddacf73.0","@material/ripple":"15.0.0-canary.b2ddacf73.0","@material/tokens":"15.0.0-canary.b2ddacf73.0","@material/elevation":"15.0.0-canary.b2ddacf73.0","@material/typography":"15.0.0-canary.b2ddacf73.0","@material/feature-targeting":"15.0.0-canary.b2ddacf73.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b2ddacf73.0_1678736680969_0.9706498239304371","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/banner","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.989ae2ecc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"91149bed0db42c7a88b5fa588c7606c909040d54","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.989ae2ecc.0.tgz","fileCount":31,"integrity":"sha512-Zp+1fbEIUz4QGZReFShalRWzJP5rlN80JSZPSFVpjVgkqtyBAQf0Fqj4RkMc6PfX2mixccQGAJJaFj6DfJMkiQ==","signatures":[{"sig":"MEUCIQDMnufNgFAhOEms+lJd/v7kjtcCmv1KLj/d6wAGeptJyQIgfhINSl4T0FKCUwUPgwsH3ZEXMOaPM4I/3Ou6itJjdCE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD39UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqRrQ/9H+crhLSqdHldew3OcvscdHSPZGjvqTCYTGntLsx1BMxF5aKs\r\nfUfb4cJzrbDKJVRF+ylux6dMpKpRNQJk2NqYEqYd6OgcBtdW1VH0Zyb+kMSH\r\nlKIKkfCHZJCzMWCPr/lfELPy/ulv8HYMwAaoEVdWMPBy5fcK1Oy8ayfglCzW\r\nV9RTk6gp4JQfdw5TrBdekrkI5l1uoMeIsi7jVcY87MF7nkSRHlpkEg9JenIr\r\n4jGPu014nVSvE6Af1PiBUOVSrTaMxAFz+pUNvRk9zm9Be68o0f83w1ucj/hc\r\nAzqZLVhMQJlE3+e5j3c2YsBjgVx81d2cuYXSLlJa2Gr29W5GZwHNMJ9StVLI\r\nkCDFmfPKcLESELDwNhtYRbm8WKYuyTWYvGBzTOd0dqURx9wyHeCiRh+7X1Xm\r\nH9MYS8f7poe0gVyrI4WhaDhmKBJ9+afVYBhacZK1Y335Ng5/y177bFEERl6W\r\nRwD/jVZGg5Lbl1wDpnVXOzFEyKw5pnYYp1cACrucXRxn3n4NCbwiGunO5bBG\r\nNKD5cy0D61IcIVHlutu5sEtp6gUdLdgtWoM3U5xXXAwN9NpjPfu3+pQOKhzi\r\n4P6dCIbWG0vF7gDvditvu1v9NoxhhcN3q7vgXPbBZYsgLP+7qfRFMfb3+N17\r\nNzddp4TjC/mjISynDLS9j7yGK55ugUtXVdo=\r\n=vLaZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"52e0f05ff74ddff1d986b27e08df13644c056b63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/rtl":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/shape":"15.0.0-canary.989ae2ecc.0","@material/theme":"15.0.0-canary.989ae2ecc.0","@material/button":"15.0.0-canary.989ae2ecc.0","@material/ripple":"15.0.0-canary.989ae2ecc.0","@material/tokens":"15.0.0-canary.989ae2ecc.0","@material/elevation":"15.0.0-canary.989ae2ecc.0","@material/typography":"15.0.0-canary.989ae2ecc.0","@material/feature-targeting":"15.0.0-canary.989ae2ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.989ae2ecc.0_1678737235854_0.7041555212183956","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/banner","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.89c66483a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"87595a8026cf04c0284a598db3fee62124152025","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.89c66483a.0.tgz","fileCount":31,"integrity":"sha512-AorC1lTL0IvjUfx+aaGUxEw0blHCoau0/m/Y5YuW2GnLZj/Se6Q4Qd9xzLd/ZgP7H+6AES++gjwW0KmU538/ZQ==","signatures":[{"sig":"MEUCIQDZQ8+jyu/wbCOLQu+uetF2MwagJMARQsC/dQuox+fDhgIgR4OXaZr5nUH515as/xjN8Z5gPmdePNbnpjmhS989azM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4TkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8tw//Sd8xynBJH5RahQ+Is2YtYTMmvb2LAp3QdLujuK34tYJvoCT8\r\n09Qbt5dEpdsZsfKdlly0EOq0Ufli0E/6Id2HwlQi/t0up4ql+a4q/1tNWg7G\r\nbyOooo3nhj/ye1qEnf07pSuebgBE5W0rTyvzNen/P3YZjiLakMxkjqCixElg\r\nEa1FlcyTY9oD3qaV21MR3KsZy9ZKflUrzulW/6EppbeTA9S/zvmO0sC3W7d8\r\n+lHXjR2l4187pxo213qdAFGHSs64qzulWppUAHw7xuNCJWUi4btboMbq1lEj\r\nXth4gxTl9Qo5aVI4JYWd/FFLq0XWjFP2rNCewZXBS81JZkt42CheFvqmqZEB\r\nKkGS783xz4DPfx6JrBwgqRS2mSy4BLTVB4CaM2qZcBcHC+Ohx2mkTmo08COH\r\nSKejhnOvUaGdLzVhhKPbPL9e9cvDhS6P8VCoKegNsnIF8l2geUFIlz4Cqssh\r\nu1EsMhp9caDAS3BgBAAyjzibP/5Wm1wJsy/UfSb7TNwb7kVM+5hA1IkKgl1z\r\ny7/EGC50Cxb5uMFLEya8sUVlQh2rw7XFyyOdYMfWY2/3erKcXpWYx0267V7L\r\nfuOhLWOYBm+QP9Kj6XMz9JMoqT1pwwaa4dWV/YRM9fFaj8GVHPvuymlqhDgo\r\n24w/4+IhrxJL0YT3q+QyuGUYE+dyL2f7hwM=\r\n=dUw2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1e255ddead4716271020e03e9b0b302eacbc4153","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/rtl":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/shape":"15.0.0-canary.89c66483a.0","@material/theme":"15.0.0-canary.89c66483a.0","@material/button":"15.0.0-canary.89c66483a.0","@material/ripple":"15.0.0-canary.89c66483a.0","@material/tokens":"15.0.0-canary.89c66483a.0","@material/elevation":"15.0.0-canary.89c66483a.0","@material/typography":"15.0.0-canary.89c66483a.0","@material/feature-targeting":"15.0.0-canary.89c66483a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.89c66483a.0_1678738659893_0.6153469216902441","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/banner","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6a85742c2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"162a10dae1591ead53148f593753373523e3559c","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6a85742c2.0.tgz","fileCount":31,"integrity":"sha512-m79kiF3lWUIdo3lrUZ/4CjX0KNAfYFhr31aE3i9KT1nfgdsfyjUlcsm05uTcRXMBQD0zVkk4RgzWdbkJiOUi6Q==","signatures":[{"sig":"MEUCID6x7+Sq9dUgp0iBzu50Tq7vcvNt3Sq7gBTViGT51y/iAiEAh+EW5L39oFrVdefVcB0k2761TbJN70FljuR3iOVPphI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+CEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4yQ//WcuaQPyyLjJdJZoTnwI9f+zsn55WMJAaNB5JRD1+bSJdF+Ht\r\nL3F8g/6o6sGs+hVjjsAw5A+X2JxRWMDaQila7fa/CxO1/HblkdEGHlaU54Gr\r\nI8PpoJfEcDQG268aE9fxNlvbfP3k6toYtJm2hp3xTKO0sDqT7djdn0lDjOpf\r\n99d/HgDtgJ5rCWMqpvrrM5Ker01g9piWU7S5emO/H5MxJJC9Bo6LR0Eja31Y\r\npP1S5LPNKIC6GpQEDI4QoY7vxyZ8UGXGjPTOfbcmuh+SBWqfY5LsQANiMzFb\r\nmy5eEHWgP9yQH0uKVKbRcVaGLg+qT/w9WGp8Hq/a3GZdfB/h4jI0XqTFgwGs\r\nFU1T3j0tCjclRLOmDaXACnJcS0FZEHWSTCNNrKNIWD6vZyU9L7BOLTugxQMY\r\nJj9IfleBb2LepVo9c5fM8xuHuX21L9mLMLmr3OQTvmR4uXuislth3zJdv8MF\r\nVBAWqFhATflj1/6oVBQhTkzXPFvT9hKlZPNn4knMSxWSLk2epz9KXTW222LO\r\nbDnCb/LlXaLQbNp1Z+AFMwEKb5XYLplnexYLhXwS5PybcfPfMav62n9jTJTh\r\n8VmMXPguIqJv30aGmP/9o6ltqeSFBmCFsybP8uB2pff6rkPVHl5MqAWrMQJJ\r\nL7H8loYGhX0bDpC7/l233IaDL8LLvOc7dOE=\r\n=66eR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a2a15aaa59054337e585758eb160d9cab97224a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/rtl":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/shape":"15.0.0-canary.6a85742c2.0","@material/theme":"15.0.0-canary.6a85742c2.0","@material/button":"15.0.0-canary.6a85742c2.0","@material/ripple":"15.0.0-canary.6a85742c2.0","@material/tokens":"15.0.0-canary.6a85742c2.0","@material/elevation":"15.0.0-canary.6a85742c2.0","@material/typography":"15.0.0-canary.6a85742c2.0","@material/feature-targeting":"15.0.0-canary.6a85742c2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6a85742c2.0_1678762115986_0.03262870531047812","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/banner","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.bb6cd78d5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"64410379fe14418e03d43b31517f25be5101a4b6","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":31,"integrity":"sha512-buPqBAGeQHbWxxXyGa2Fvai61TSGF7AAInxgvGj2caPL/rFW2uWlsCtLdTyGKjt/jCZHEBadJ3bBmTQVncSDFw==","signatures":[{"sig":"MEYCIQDpUy7st+iPrl1EBp2TY6194Q2EaaFu+xhuRofeZPfrNAIhAMTBkVKE7GZqyD0cDE4IUUeufCJTRDVvP0cbqk4o3gVR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELphACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1oQ/9EBgKvkT8KSrpEh+QQuyLJnOXAhHN4q2iFFb9o9YiugoOW3uk\r\nrKYpceaDb1hpm8sL+N2w/4aVEdL6Cdegq40N1a2N/cUFJQIouXmsx9OPmxHT\r\nSblMMWdNezhL8ovA/UfEXS3HJ3zSXPAVNUpSKxzqj1F2RYM5kszUiy1YDaC3\r\n9XVQHQJrz4cif1gXOYEeCXtipEi/UbEXJFBy64Lw4ENN/Gtsn64ognuSwNxT\r\nWuwlamK+/Sz6piQTFyOjGPbzQVZXpjcjZEZtc3NaZLrVZzSYRFzwMhxzayn3\r\nbleYR+hH6PKFGEsyQ4ZClhE1cQpNZBvZ1dz+12S5qUoQsPe1aZ8C+SCvmBfo\r\njSgd0CX8TOgjxT5Y5JOQSHPgWQw2u2FjmJNnWIivbrQF+v5TQC5eOUJ3s1x0\r\njI4sOMUvAVs67cqmWFx6cfe9TPmjb58OHhkmGaxhbrTlm4NPB3hHK19HgilW\r\nvky3T+PA0YnjOHO2EZHlIRQnA+0GvRUgZZnK0L4iayveiptG43NFGz/6RDE3\r\nJm/4a4ZMaGMQJdwqBBROMlydd/y5wqlvse0P30Vm/SIS0oQ+MeQv/k1Dh8oq\r\nWtJQD4nDgvvbOT9iki9NVz5IsmZskERAVNFYwm5SHr2QqGfjEdC1aQ53ORoB\r\n9D8RfW/Seu4aVhr9P4AZXUZOol/nT5KcrN0=\r\n=bkl6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fe016d599b297e4e276ef5b37b829b25f0607b93","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/rtl":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/shape":"15.0.0-canary.bb6cd78d5.0","@material/theme":"15.0.0-canary.bb6cd78d5.0","@material/button":"15.0.0-canary.bb6cd78d5.0","@material/ripple":"15.0.0-canary.bb6cd78d5.0","@material/tokens":"15.0.0-canary.bb6cd78d5.0","@material/elevation":"15.0.0-canary.bb6cd78d5.0","@material/typography":"15.0.0-canary.bb6cd78d5.0","@material/feature-targeting":"15.0.0-canary.bb6cd78d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.bb6cd78d5.0_1678817889416_0.02678431339611187","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/banner","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5f94aa37d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"27fc993d1df5649546302370f28d93e50f034d57","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5f94aa37d.0.tgz","fileCount":31,"integrity":"sha512-cPQos1CF9B0pajF/tPyBjP34bhPuszkIsSyQbL0U06hpJFaOclU0XApnDwm94c7Y2KI8PxbsUaCklKAoVC4Vdw==","signatures":[{"sig":"MEQCIFITP9UAEYNcBU2SrD4pVWLkzvXuISTVOvlkjr3fxHn9AiB2GUnEQqbZMR4yNfa7J35Caetgx+OrQSMFPV1IugF/NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELskACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot9Q//f2LBZn7pgtL2tmMVESWYxs/2QaF7BXdIWzboCuxBGdEim5rZ\r\nIltU7wOAkMmbhmuwIL8+71Br3gWzbX6MKbARV0S5SZe88iKYpuhKiO/uOzS8\r\nAS/ArdvV6ryD8EbZWKnxy8tnO5PRwhKoYY+pBHjf7ELdt0trS5unwMbDeMPP\r\nOyJhORlD721uZQdXVq1V4L9xB0V3bOcRdcBx0OV1vlwGeLYJ3uMkbFOfoUOC\r\nwIaYMjqqAmrGAEojkqyNhvz0kMJEXs0ZzPOjINO2HV+lP4RBqMfjIpVtHCJe\r\nApNerQPgvq3sNfCYT/Rj0+4INLRorfvq8YiIlaAs0c2z8vGiAfU2VsMHPH+c\r\nTta8jqJ1Ikh9ZqhecrgpSTgF/3Rt5uDxzwb2/yaNut3x/Qdsl/GMcVwHzRW+\r\nl8hsqSYc3G7tZQI4xciAoGjDZBZr3g4AXhivm5AtW44sAgFUlxqzn0GliOhT\r\nUTJIc9DY2jaWyNGXJySZL69TE7TFYtLQs+9mmZPdom+qghOm75n3pRhMe76E\r\n6O3kBIElGbSrzYbUMUyJStx5wMhBYjjFGQFcso76Ba3vifmg7VkMnadFqVn5\r\nYxrRy6HgkY1c3eZM/8jAnc0B/iPTyBVGaucvdc1Riih0Fe+5xMegcAFJ7+UV\r\nyOrINgTTID5wyMG+8Km7PGoFiQncDSxMkfM=\r\n=lzXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"95db647ce856eab6b1eba2fb1794f3b0dbc3dd08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/rtl":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/shape":"15.0.0-canary.5f94aa37d.0","@material/theme":"15.0.0-canary.5f94aa37d.0","@material/button":"15.0.0-canary.5f94aa37d.0","@material/ripple":"15.0.0-canary.5f94aa37d.0","@material/tokens":"15.0.0-canary.5f94aa37d.0","@material/elevation":"15.0.0-canary.5f94aa37d.0","@material/typography":"15.0.0-canary.5f94aa37d.0","@material/feature-targeting":"15.0.0-canary.5f94aa37d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5f94aa37d.0_1678818083935_0.47810025991909466","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/banner","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1bd317240.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8c254e3a12abe20626ea0b1c059e55ab23ade69d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1bd317240.0.tgz","fileCount":31,"integrity":"sha512-ikCM554eKlCxjnl/03K/FrZKOrIgxlfdiyQlP+erXT7SVa9mEn5/my7LpdJ1FDJ8UZw0hSS5SpYlUH2DeRTzuQ==","signatures":[{"sig":"MEQCIE7ufJllh+kPhyVvb9w2JRIU+iZu/kLQXfu7mrtlhhMpAiANPlpdlW/zS2BJIQ/LujxEGpIVvY3NroJ79BQr6yHkAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELwNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoffA/+PnwIE7yHPcTu23PtUrOoZm9ucqpK+VcwQppO3OoPfpqqdySH\r\nwKCkQlhV6SeoJydt7rxhMEOuZ81tKfxvcnrqRh60EwHITd71hxA/BS8qc2RL\r\nOUkfgN7ZzIXp3WEegrkwITQZKVNqs/PVAZtKzInXUdwYb+auatECl/W6SGco\r\nzM0NIifL9wEDcdkjubTjh/x3qGlgVZsYds2ORtm+qivh2T63UOc9pjkQDvZS\r\nxXOuCIj79sCt8Z6ZJOSyycTNicFdDBKjU9H1DuP6f3IrSkLM3EVGGYiiFSmw\r\nLYqpApPyf7hQP43+g70GSEjfnoyjFoMTNpBbZFTw905bjlInUi7bzRVzjVMx\r\nkjzTu8Z/ADQLsig3UCMQS1M0A1fRHP7+zFd/Fz+L1sg8Uwa2z62vAZ2VLpPg\r\nxKI8JpN+NYSYA8BkBBTgVAoiM09Qi9qmKUv23cW7MNRTsw34G84I5yA1nq3o\r\nA+FK+VAONMvGniHDavEkVh2yFrTVcDpaJzX+iSZr/C8xUCiJzGMLUjeg2hwx\r\nE76jc4XhLf6zNbSv28+OUnA0lEfdJha5r00XO6wjg0CenTiCPofeHZz8kLou\r\nN9L4p1Tu3RfqebrxI3w4TBxQz9RUxcM4LLpm9jb+wBqZICXOlafTIQo316Fp\r\nnMOFdP1bcpAFJf6qitGKjGnZeCRK+r17GpE=\r\n=568N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"eef3d63106c71dffbe823b04d07e86a84dfd4d42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/rtl":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/shape":"15.0.0-canary.1bd317240.0","@material/theme":"15.0.0-canary.1bd317240.0","@material/button":"15.0.0-canary.1bd317240.0","@material/ripple":"15.0.0-canary.1bd317240.0","@material/tokens":"15.0.0-canary.1bd317240.0","@material/elevation":"15.0.0-canary.1bd317240.0","@material/typography":"15.0.0-canary.1bd317240.0","@material/feature-targeting":"15.0.0-canary.1bd317240.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1bd317240.0_1678818317202_0.575539776087306","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/banner","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d441d2a2a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e712dd237845118ce348c790af5069c737ad4cde","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d441d2a2a.0.tgz","fileCount":31,"integrity":"sha512-QXxiBam9t4xmfgMp2r3uAPaIbeuLmD7c+67+zIUCQq4TsK2tlaL2vdby7Pd8NXfhwhsqBRSL9Ut3wICvAh/OCg==","signatures":[{"sig":"MEUCIQD9Jpk5ZK1Vob7I6hgFALbfFJEMp5GeNxd3YElxp3TXZAIgFOZPY5Ju4zskRWnhNr4EZN99SzRqOFnV9CTeUlkHJ+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELyzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyIQ//VJlB54qW3HQYKrx60/RU3ln0KgicUGsT4GhrNJ1Lw4s/Sp96\r\nYrDdnOL1eyznWptGqSBPY6hyKwTg4Tc9YFyyObpZ1zik5bZCzR81kFtsdVvu\r\nMufsYw3BEaGkwQVpmt/J73lZxD3rfXVAiOFop6qeHE6vbSmSY4JiPkKaMmup\r\nNZyzoVEWaDQhkhGPNGzzaNIl9GQVkc01WORbQO0BrSYqsOMW1rYPdTuqV06m\r\ngATohVM1OZAOkbyY7m0W+BUOHukd7b/JwQj6PzndSS1knBXBJFfNCybia/Pu\r\n5sWk4XXPYL56c64EN0vwjzBD2ObqmWbSUOs8tvnP+f9pGi/eDSCM3dAQWu54\r\nRNm0gxWa8ZgHzTHGyKVqCHGDPRbP0Uk3VrkNNHFvMjFa3Pi7oyZU6V0PPKZx\r\nIA+NsyqyFRAL6KB6BMPNXf5A9hg5Ea4QXeEVSaCMHDUHGk8CaoAEvGJymTCW\r\n6BfnROLs2kfbjgenvFNOPIV8+Ps0CZty0Kr1sXg46pP9iZFd1LZ0p1FtEjNg\r\n/zt72TVqCqIxg+JPLRCmb0GVphpijeou5YamuTDH1KgkxC6JiB8ESBHVUHQT\r\nv45VlEeVTc5U4tDluREL1mIHPsKKw5T4Lsmm9usfiyGODq2a8Bjypl5vKxOH\r\nliK4+iYnFU7eG9BsIsWtzo/8bxiiFrapg5c=\r\n=w2lt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3a1d95c90b2fe34c5c04e44571f94badd66748b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/rtl":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/shape":"15.0.0-canary.d441d2a2a.0","@material/theme":"15.0.0-canary.d441d2a2a.0","@material/button":"15.0.0-canary.d441d2a2a.0","@material/ripple":"15.0.0-canary.d441d2a2a.0","@material/tokens":"15.0.0-canary.d441d2a2a.0","@material/elevation":"15.0.0-canary.d441d2a2a.0","@material/typography":"15.0.0-canary.d441d2a2a.0","@material/feature-targeting":"15.0.0-canary.d441d2a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d441d2a2a.0_1678818483145_0.5902466346291821","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/banner","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.fff4066c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1bb421d9f0d2d5d52d1a5545b633e553426938ce","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.fff4066c6.0.tgz","fileCount":31,"integrity":"sha512-z1vCkRBbYjOigBcRT0J6nIiIqg9djtc+i2ugmtc1y9GG5WTCF3MbpueewkJ8JEn/eNDzMK6tpJAn6PYPxZytJg==","signatures":[{"sig":"MEUCIEv5ITffa5cv3bNRW+akP34jifhYKbEdsjAzelhYJf1wAiEAtZ3VspEiMqreB+QRi0ibNZyBQJiRVKiSICHGzIQ/za4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNqQ//QHiMuBy7SegS138JrIgMN3BNJY4Mn4LTDAsZw+oLevt96UUH\r\nrpbQqkd9o+sQK89zSwXi0tHWoJYjYo/GpXxqpO+WD8653tc40AS8BrVpYixn\r\nwJq56ad97aa9525xeAHyaYXPiw7de7q5kQKpJMXK5x04neMKO1iYrlB8UWjs\r\nzS7Qrb8yU+NfthQ1JAgg6uPpCh+ldtit5DLyLEGO2IAQKjtEQ59/5TIEbFvT\r\nwVj6ZMarErA137tDPs3a/TEfnMYy4tESuVvaHBcTnqiwx853fGQyB9ovoCpo\r\n+PZqG1xIjTW1ac9wUOf+v5LonpKihRbAkEoe5LWK/Hrp7DffjyOIP2+EIYfO\r\nbVkYYTdGWGYysKQj2TL5xQiq5ca5a0WJ+Br0aDeVWHsNGe2loMDovHb3pOYP\r\nmQungUwEazSCxUEYIXaDyRKL1VA0qq8INE7b7iQBe8MnsxYXVH3f+pGJAIc/\r\niKute/eKISL0GyLxF5YbRngvNyeSGoAYl7HiWXBG68U/D3qzadOPGykawzM5\r\nYmsHvUc6n9REsekYQtK1lV1idOOsqcWms7gbpOWXrj57ufG+C6erqPqBzqJ0\r\nTgyjAc90CALYf/EQL7Rr0pSK174hHSDHB3OIeuH9nl9JyFCmgXfnKw6Z1q3o\r\n7u2uLpZm3al1Bf/QIOr5s6MDT8QFaHgAzMY=\r\n=OgqW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9d24b185ab8c87061ad27f4e7791690a12e10135","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/rtl":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/shape":"15.0.0-canary.fff4066c6.0","@material/theme":"15.0.0-canary.fff4066c6.0","@material/button":"15.0.0-canary.fff4066c6.0","@material/ripple":"15.0.0-canary.fff4066c6.0","@material/tokens":"15.0.0-canary.fff4066c6.0","@material/elevation":"15.0.0-canary.fff4066c6.0","@material/typography":"15.0.0-canary.fff4066c6.0","@material/feature-targeting":"15.0.0-canary.fff4066c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.fff4066c6.0_1678818520469_0.798832162528039","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/banner","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.87809c710.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a050ed96c95a92a886678f6cd682668e33b4d7e4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.87809c710.0.tgz","fileCount":31,"integrity":"sha512-BkK5WJp9gXmLyL4RAZRnsXJ4pq49tG+rKeq0k5OzKCGrjor0b1TIVE8GoUAWfgq/Yza4YzGIECktPsoM577jZg==","signatures":[{"sig":"MEUCIDlrnw3yIhFMnWZbkp0rZRIWErdC0GyILlyschDrkkxyAiEAhxXU+sUYg4iaei0tmWGI4QcOuBe7g79zQfiSzwkY5CU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMCZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUug/+PvsCErkYPMW3KiTauhXbrZJsFzr4MCRjGnLFoIHE4ukFgd5y\r\nBgiS4dW5S9VKqOv+t+OwV6RuUcxxyPitpDmi+j6302SAXwyZduRUSRLUtl2M\r\npJEK5tZSRakyYDSsc1O1CK0nh5quWYWlnc1nYKY/jHPyvk+lVzVoqBEodbCB\r\ntz/ENfH0Pi7xry+LthJo6NLcCH2OUrZWJY1k0LMh1mVvvwBlMXxMYzUh2xxI\r\nyS2quhWKA5eo1h2uc39zVubaQdknpy91kKbykho1WNVr4MqMSnHgW0HyxVk8\r\nOV9Zlp4rdgab3CS22NDdib97CMNNXBx+S3820+8P340W7SxJXe2E/5crCH9V\r\nMTV66hxOjAADKK9W+CDHmc5cgScYQuMAInsZBhtrN3uTIIeoD7XGCQi6SnUx\r\nyaPHBJSpnfO9MwlmGV5vZi0TJuUAsC5xqOP306bgHcOmtrKbGxU9Y74aFP5k\r\nMxGtcbyqQJ6dE7gfLrfK2NfhGSUBigTDmz2voJjFZuL+RfBEk3VhCcDoYEFS\r\nNE45z64WdIshocFJguiVjXiANLg9mpCOgBHxH6aJRPf3CmpyrV8uLNl5+rtC\r\nSIS4aMMuM4a35l/3d3bhUWqlEoqMW2OLkzk88ceSIILaARMLoFm3DkrTBDiv\r\nbVebg9dSAGM9bccLw035LZJx4gBED6hkjro=\r\n=53I/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ac65d4def7491c4e414883c6cab7e075c7374b4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/rtl":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/shape":"15.0.0-canary.87809c710.0","@material/theme":"15.0.0-canary.87809c710.0","@material/button":"15.0.0-canary.87809c710.0","@material/ripple":"15.0.0-canary.87809c710.0","@material/tokens":"15.0.0-canary.87809c710.0","@material/elevation":"15.0.0-canary.87809c710.0","@material/typography":"15.0.0-canary.87809c710.0","@material/feature-targeting":"15.0.0-canary.87809c710.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.87809c710.0_1678819481106_0.24292399804736897","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/banner","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.48d30012d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3c3b5f749cbd857e01c18b8e7d7cbdb368cb807","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.48d30012d.0.tgz","fileCount":31,"integrity":"sha512-Wh/brCdNLxSytImIoPMnjJVnkZoDY4EWaiiTo64tt4g2/HmJVe/VpxjfxS71NfH3tVzLv5pXCwJqj5hn8eCu8w==","signatures":[{"sig":"MEQCIGisfstZRxW0rn7nsd5kkH1hkbZ17eRHA5FzpJiH+MBMAiApiR37OVQcuXKVlynVoEFJzap76X6Yxf5MlknzAUTHzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMGcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcEhAAjN89xm0V5UJrkRwAUFLCPFGDZe7DkvarSO/OAKIFmM8AnZIg\r\nk6tCHHDbqdTOVjJajMyWmzPhIcQs9M4MsYKxZmcbzmjmDzO2uU78xIaCxEX2\r\nS7tH2S6x8N3zinTkX6RkaLcmLAiD27Pmbczi/I8Nq8KvBizFpqNSG73QjUwX\r\n7m0FxHOzfXyPcMpaO8aeFCgHL79exwkpkm08eOO/PDo2VWQCEtg2qEb8WmZL\r\ngqZqGUdGpkgO+x2+AjXRHXeVlvCh4Tey8A9lyJyKx9bG/y514Ri45nrdDzR6\r\nQ0uDiJd88zBwkmGJOzqLIsOgPgDXGUDKp6Zm0OKgfgvmQxtp4pBYmlRfLZKO\r\nPrHHVojicRaeZPpq78PsuQ+CtcvYk7e+b30P0FHrmu8SK4hytwWOfiREd722\r\nGyJcaf1DHqznhex52zyy9Q+5qAbzN2C+pl1jtuf8E8ST1JdoabBMERXZ1Bal\r\nKVQWDgTEXis/9X4EY16AuUV8LdqrKU43m/3vay134WYfkyKBCpijpeAQL3Va\r\nCwIPNchTpl7IkLYmhGup4+vPlIjSpS4WY11k0+ztDqqOvN7dB2fanM4xS9ml\r\n2MIOvBUc8JMTwXuOKTPOU47rPUnbA6FyJlRjVy9/D1dD1PhxOvmNLAg6JO+e\r\nv1e3403NT49AT94rW9whC+1n6rPzVCzjm+g=\r\n=kSco\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"f2e4b43d20ea58b52a223d31b8dcd3f813d1babf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/rtl":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/shape":"15.0.0-canary.48d30012d.0","@material/theme":"15.0.0-canary.48d30012d.0","@material/button":"15.0.0-canary.48d30012d.0","@material/ripple":"15.0.0-canary.48d30012d.0","@material/tokens":"15.0.0-canary.48d30012d.0","@material/elevation":"15.0.0-canary.48d30012d.0","@material/typography":"15.0.0-canary.48d30012d.0","@material/feature-targeting":"15.0.0-canary.48d30012d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.48d30012d.0_1678819740486_0.39043915252036965","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/banner","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.419b23cc6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"76103a2922b4982db0560b10939f4a2c214ecd13","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.419b23cc6.0.tgz","fileCount":31,"integrity":"sha512-MIbqqsNTMS+XQNuY2TM3zYcLrfEUIgh+ZXAs1h6+MPLZL+edOlX+1wKxQoci8gB2ZlyV1froWJonq37X9UHbBA==","signatures":[{"sig":"MEQCIHmKZxm0GBE7/jfjLVHXUC4NqXTl8zGW0xdLrr5c14xlAiBDGQUJfvGdCojAg+YwZR0u7rXekd6SpQlUBboH/O/ysQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMQyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4PxAAiOk/k0NOyDw5qmaxLOVWTWz+HEN4o0hvawtzyrvudZtAlDGs\r\n9EoGdBlEm1Q6oQzHDxeRAuGXpf7x4ER2gmGr9QNKE5MWgWDPLn0AjH/o5aO8\r\n8DNAd/F6A16YZXT2dm5K8tFJeRIRf28VaXEsgzUI6Hwd8f8QhZzs1OWiJC6Z\r\n9k83N9MIg3ZC5aor4w+zpsGB4nQQuv6tDD8AqYJ/MzZ7cubDB1RK4HmdLozp\r\nade1EHOyJxRSs8Pw6hh90I5TAZ1SmiL8NCzKauxfXopN+IHgtTBcP5pDT2aN\r\n2NwiIgzYXwnKUNUnsmCFYG71CdghzkQWJ6SMeL3PS5z2ZMynVjGMYub+9rTl\r\nZtXGuAjf38TkeQTyDn3ISzJOi/OtQeYI6STMgRoRjbktnZaOlHdSuRLY9da5\r\nUgw3GJZleBad3FNqU86DTvNstsC+QJUMkr26y9Nhx+sWOIBn7T9olW2YlohP\r\nD71ePrRAweC4lmK9tyzbdbmSw3rMuJq/goHXzqpv8oQwziZVMpalKEVdYhn3\r\ncXyAKE2tPV5Ae/HO1TPrziQad1Avue071NAOVe8eE+DJHyCfs7yfp35sxocC\r\nJbMmZ2jbatRGaVDkpTGnK8WMcEUClL1X9Ny8Leov2zXGR+mw6k0MPPgkP+Aa\r\nlwk61sEwgtJU9YvvtLMhRKBDN4+YTH2Doh8=\r\n=gFrn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3b1188210d22a02ba5ae948779bf92655e47aac3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/rtl":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/shape":"15.0.0-canary.419b23cc6.0","@material/theme":"15.0.0-canary.419b23cc6.0","@material/button":"15.0.0-canary.419b23cc6.0","@material/ripple":"15.0.0-canary.419b23cc6.0","@material/tokens":"15.0.0-canary.419b23cc6.0","@material/elevation":"15.0.0-canary.419b23cc6.0","@material/typography":"15.0.0-canary.419b23cc6.0","@material/feature-targeting":"15.0.0-canary.419b23cc6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.419b23cc6.0_1678820402056_0.21671914792245017","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/banner","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.bf86521f4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0be5c1c9704a926bfb50bf7432cd4f256b387a1b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.bf86521f4.0.tgz","fileCount":31,"integrity":"sha512-ASH9KbdArbS36/6vG8LB3TpEqMZp1DGdQCFOsivEPXteynhDxGupg9L6xt6aygxlRWlcpJwkRZwFA28Yueo74g==","signatures":[{"sig":"MEUCIQCHYPL4BgZjclkhVlURDIIMtIMWHHGmmS4wgZOg2ZgEpgIgEUtHNYGvvRNqnOqMI4GxHI3ehjX7i17Ev8wBze8VLXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEP/hACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqvIQ//ZueCJ6y+nIKF14Yr0Ad+6GBrHEtOORbpSZGLD9SN06jidETt\r\nV2Cch+EO2cnYSm2+2ikpe2aiiGB5e9/tegnCZv1UhnInToHUughuRAEWdZ7Y\r\n3lvF5E0pUbHzjy50UpbBNHgafodd4nCRxek5bbWWLT/N+9sSobSLgihUWoUj\r\nH+ifSqpsCWXM4mx8ffLIuXlU5dVcqbbORGzc1O6aW2/pmCpEnAxqxTioE/4s\r\n/zv5o3GqpJk0ebNsmkNbgHt41BEPWlFPzLXDuJV9xr2jgaCM+/3AkTHOKgvj\r\nFkAuBnp5Jyee97ZiIaNfFGg9BKXqplItZgI9xCfMRz+5TAuHWb4qSpwkBXQv\r\nVjhdEgRMFmJABblKnp5wiHy69s7wOM+chHxJg4oPlhTaIP5KOSIlQ+i/0H2L\r\nseYO4Hkb+RzQgfhmf24f7x1aAM9TXYc9p+BeKSSnrWCS/R4x4iIt/8I0LNYx\r\nQYxry0Oxw927AwKzRVt+72doBo5NQVqP3NxoBbfum+Vc+8RPZSmsJ+U0POVU\r\nbKFiAzHKxfTDPcCLTbDCyQCqKq2AXWC9HcMizEulNfIdQBXlxUfKsxKFMHGL\r\nnNIzh+rg9LwnakLNqtBwJYEehoDpbxpAIGGt/iG5q5fdxUZSSBeTzjwNrUUm\r\n4kxhVPZ4HyIMxP2+8ErtdGmFXBS1scpRN0k=\r\n=u8RJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8f5c1bf1449cde9c918f51bd033762d247655b49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/rtl":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/shape":"15.0.0-canary.bf86521f4.0","@material/theme":"15.0.0-canary.bf86521f4.0","@material/button":"15.0.0-canary.bf86521f4.0","@material/ripple":"15.0.0-canary.bf86521f4.0","@material/tokens":"15.0.0-canary.bf86521f4.0","@material/elevation":"15.0.0-canary.bf86521f4.0","@material/typography":"15.0.0-canary.bf86521f4.0","@material/feature-targeting":"15.0.0-canary.bf86521f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.bf86521f4.0_1678835681259_0.5635965725205694","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/banner","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.11f3d280e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f99f2a21652cedefb4dce28bbfe74dc5809d0848","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.11f3d280e.0.tgz","fileCount":31,"integrity":"sha512-64ON+vOXUcR5Gi+FCM8x7c0BvtfYtAe8RPiYouNzV3/N5+/lFAR17wZPM+YNekgW9MX1sroJSjQIPHs1rUVGZA==","signatures":[{"sig":"MEUCIQCzydMHR6pTlheggkLgy+xx/PvXtMOUCSHVsFtJ0ve1OQIgDfiRAsuxf2PJoMSANES/3mjufRPVjddls488Mz4gbKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ1wACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzNg/9GutW/RMrU+JMQibqTN4gv9yUue8rY4iS305089pmhUNcG34I\r\nxu1b1/xrPaA0zWhYICSU+flKcdVBTxoL8OXkJnY8raJpEkT3mge+rJYAv0pc\r\nR/7LS2+Nts74jiUXuch+3FZNT80mnIfhITtgy6/LbRQf9BS42CtHuajwl2ZL\r\nSHBuPqPtXesIQ1t51NWrswQYh/610+LEBDFlYRCemvak+eBxAhgYSD9R3Vz6\r\nAN01UwDUEBGVz5VJ96yJvN31s+fsId8EVasb9xSRwnK2cEtctO1MN+9VjAfG\r\nA50xg4hn7bsGwdo8uZRN2lyTWJ8soIwonoZl437ln1dfKU6HnfcZhlDtwoVk\r\nVtHpo5AId5gI/DwBRStDL248ljRnfT8dpipLjQKi39DKoKZQl9fC4dDTYazm\r\n0dzzHi3X/R9AhK3Ha+n4OxiReo2is9XW7CNcdOXdl3IRjPqSMM70BKW9agtV\r\nb0mT8iZEHMx5i9tVXTDhtOPHzr3fJtAcRyE4qC0L/8sUztCG3C6MISZCdpbP\r\ndvr/NaJeUk9R656FGYwiRiH4HABAgFJtFsczks9YxZU5jIH3OOpto5jF9LDG\r\nhQQZ4+K0VbnwqK+JVKQVlQAxhkivLT+J55HD0RqRj055ojwYpx7Bc8VN8qpP\r\njxlph39Z+cigaFCAS4d4PtHOpA2z0mCdyvs=\r\n=C2e4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8e5a0971e8b535be016fdfe963b22dbcf1353e53","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/rtl":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/shape":"15.0.0-canary.11f3d280e.0","@material/theme":"15.0.0-canary.11f3d280e.0","@material/button":"15.0.0-canary.11f3d280e.0","@material/ripple":"15.0.0-canary.11f3d280e.0","@material/tokens":"15.0.0-canary.11f3d280e.0","@material/elevation":"15.0.0-canary.11f3d280e.0","@material/typography":"15.0.0-canary.11f3d280e.0","@material/feature-targeting":"15.0.0-canary.11f3d280e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.11f3d280e.0_1678839152076_0.7495199779051751","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/banner","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b281a409a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e19071925586947088900db267e29a202c4939b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b281a409a.0.tgz","fileCount":31,"integrity":"sha512-BnvxMfQQUIkhn/9pctIH9YxkLbZ9cJnt7XE5LlEro9EVEu800V+I8EQ5IUN6IB5mQKORWGwYkhv5NVOKWwWYMw==","signatures":[{"sig":"MEYCIQCzZ6dB8Xv2Hzwg8hqkZNt6R52sBXoxpd/nBzagn56ingIhAKebVloBrqNskP4OOv5vExCxocAPhoZc9Q6ldmo/hf4S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdByACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmphuw//YBf+uZIg3YGS5D6YwLPjYxfowCIYIgbgt02S0XQH/HpQzRY4\r\nxrTtVXNGA8J3Idh7BaRtMsWO9B1Kjsa8OS3g+EP5gIwVwoP+0+tDMrfcawYB\r\niYDybrcWZMFWSESwXO2b/oYBEhy5RyZ25dl4cFTjU0LENfDh8DDU9gGWtUVe\r\nsfgzSXNCaKqKInxnx29ksP3y607Ch6sRBkvCpmx9mJHYmt3i6YLkBnZd+4zj\r\nrUzKuIvV19l0RLHTgUdtQRl5RoCebJFQmYndbUljLv2D2ePrbxKKypttp3Fs\r\nWSAzJKj4WCsPF/Trf42/YMJJttii2NptsXzuGRcbBh87qMGEClAb/77Fw/sC\r\nex3gFYaC5CIidawa8XtMcBx+ywfz+vtYz/1jG9t/i/i8RZgsNjqSxiZPMwUA\r\nbTbMuCRG7SyxWvYYA++lIX4Rz8az1q3MMckw2667nl8qEzPVDbIBPzXxBn8F\r\nbrnNiqaGSux9pV4bCoFVjjEuDBSeifvUThY9/4lZBM9oty9zEJKrveTpza4r\r\nJ87elo7hKTR1xbBkv2t6sTXfhGiC8Y4LsYdZEH9NAgT9IGI0cvbqvSSIpvth\r\nxfDNrZPkZDaqZTJN+vPYJ+PYchbn2T20AbE+sx+7iNqrLbiFw/vwNOd7bXzK\r\nqK8z93lgl/tut6wjO1nox0agtZCIWJJ9kpI=\r\n=oOJJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b924c47aadd36bf60d7c29e466ab3899ae4085d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/rtl":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/shape":"15.0.0-canary.b281a409a.0","@material/theme":"15.0.0-canary.b281a409a.0","@material/button":"15.0.0-canary.b281a409a.0","@material/ripple":"15.0.0-canary.b281a409a.0","@material/tokens":"15.0.0-canary.b281a409a.0","@material/elevation":"15.0.0-canary.b281a409a.0","@material/typography":"15.0.0-canary.b281a409a.0","@material/feature-targeting":"15.0.0-canary.b281a409a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b281a409a.0_1679413362071_0.9664224367495333","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/banner","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.39e473690.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e06e0b5c2371a1198d782b69aaf92d7e8def3bea","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.39e473690.0.tgz","fileCount":31,"integrity":"sha512-4uydQc8rSu4R7MHf39poXVxg7OcJBlyhGR5/jcmPz8VLSGd5MXO289b0O9GMBGD2YTWVooUASoLXhq1lfhTn7Q==","signatures":[{"sig":"MEUCIDfQkBTqO0kndJEzP6lAp1MBBcFR7wxsUGjkbPtkxu8oAiEAil+ZY3fogJcuG74ttAmy5ZgrMgvKJa64VpqX679e/6Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe7sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqAXw//Y63sHTG4ZDHxnKzyObNKKCqge/UN68WU4tEuvag81BcJKtJv\r\nvULcGJV7NMwur8IfsJ6djuBgR2pk9eKyrloOETTGFPdDbJZMSvAX2X8DnC3I\r\nEQM/pbGAJJFgWrzKGKB8D/DEvdYirD1xooBGGc/3Lm7CcvYTyFiDeyLcdCcO\r\ndLvaBO3fGYrpWv0h0/8sj29eK8RyMuUNDRVDhEEH8kxOh4YaMgFYiMpOtwUC\r\nsPGpYZhfPyrY7RTsmR6Fne+5mw2w7rDu12xAV+6muXfzRmi5br65kacg8fTO\r\nTtdmXxGAF1zkparnmngcTGWngJRmylO/DSl24wYUAYfLXQA1quaJ6sMwEQuc\r\nWkvwLlITDyQoSCoc1xpsEppZ6FMngNCnr2+CwfiW+21C88ZvOARvGYt6Wkt/\r\nbzXKN1tg9h7IRMzyuabY827v1tkv3god6eksQf9iBeCg9AmuV9lIqHkRk9k6\r\nIzQsalPE7m3kym2qrrvqR5Xh/+aDjUn1XR772tYcEawaK3b3QwZuGANQUzw9\r\nnHpvS7d9fpxJiaziww7sS0jR8LIp4IyY/RK5f32SIShgeca1CezLjXRAFPt+\r\nOb5kTBEwAgbh6ireBxyFCjPfIVspjq30uGnQMAeTU3uZ+Ctf7hkt+6G1oOe5\r\nO12HwPgOITDks5TwHdXdfphgdoD3ek4uzMA=\r\n=s3vg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"2d372eedef7c583c60aff8d4cd51f8de971cb93d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/rtl":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/shape":"15.0.0-canary.39e473690.0","@material/theme":"15.0.0-canary.39e473690.0","@material/button":"15.0.0-canary.39e473690.0","@material/ripple":"15.0.0-canary.39e473690.0","@material/tokens":"15.0.0-canary.39e473690.0","@material/elevation":"15.0.0-canary.39e473690.0","@material/typography":"15.0.0-canary.39e473690.0","@material/feature-targeting":"15.0.0-canary.39e473690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.39e473690.0_1679421164709_0.4134980358352436","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/banner","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cedffb44c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e09858d1cf7298071868babb50fa70c1031a4339","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cedffb44c.0.tgz","fileCount":31,"integrity":"sha512-qCzK2YHBZbfsC/ns2quINDbhgMV5iB577M8Z1Jv4LotzfBf1U/V7mV3s89s20eUJgl9XK5ropOlQksyJ8/HGNg==","signatures":[{"sig":"MEQCIBPahEIU5nvOno4D/Ri2wRvHWbatRTBGpeG7IyeYVR0GAiB5GNsGilL8Y6m/ydOOAACEhW2HA7EI3Z6LyDcQGm+w3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfCPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrA/w//W5Xz/fpjtPnEowxa0z1L9pHKu/tiIUEj4/4+sx/hlj1nNy33\r\nIo7VabtFA365k58JTVxJpoYHwPTLLRNfuE2ud7mCemPImdeB79Fg8i9IejF+\r\n2+B4ZXF7a2AF7Z+l+lDDYaxnvxw8C1t4azpcSMIT47Mf3kVRkAfrBl0NJ77H\r\n4Ves6SSI0mmkn1W8sIELiAiyNMHwowhRAwGQw5FwX1sdCg/5k1WEEMurOxog\r\n2QNAbBmHx10BeapxDkV6yHLwhdtJC43Xp8yskaLnHeATeWCdzMpYWQoE63y/\r\nDMSW7msUZdYIRUIi0QGtafODjNT6fPIe0IueNvqN0TaWL94Pox3mmrS8RdVh\r\nOkERcApXx20iqo9b3W1Hx66VdXsYbjAmu946QfIwbQfRI1L49xYMRfG1Pj8H\r\nD+8jEKli8wOorrhLpjIDIHcA4EA/fR2qefPtfpApvwaQg3FKFY2iIyfU5baJ\r\n0CuXJlfBPRBe0cQXH4CvFC3GGulNFShgYz1jVDIiVLXQ7hzMxV2j+qMjPUUr\r\nsmhzccgQKZWMCam/sPXzsks3aoeF0tEm2KkKVzFhCGJEgAylNtZYuT3fswpl\r\n5YH+GN95K1J8kJ4dpyRCSQ9Ev13gUZkBy1SB1dZXT7HWnEozyESeCspA7NQc\r\nn1vTFvAvRIxkaun7mxvG9VaM7RUdlpWjylE=\r\n=tzUr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"37783644942291b0c5d41f7499a79b5f61bfcbfa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/rtl":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/shape":"15.0.0-canary.cedffb44c.0","@material/theme":"15.0.0-canary.cedffb44c.0","@material/button":"15.0.0-canary.cedffb44c.0","@material/ripple":"15.0.0-canary.cedffb44c.0","@material/tokens":"15.0.0-canary.cedffb44c.0","@material/elevation":"15.0.0-canary.cedffb44c.0","@material/typography":"15.0.0-canary.cedffb44c.0","@material/feature-targeting":"15.0.0-canary.cedffb44c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cedffb44c.0_1679421583394_0.8082529175593784","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/banner","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.36a4cba99.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c0c89caab02043bed8b7b5e7f579208c7a189ac8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.36a4cba99.0.tgz","fileCount":31,"integrity":"sha512-e2c51ySHRI7aTjITeUv43IfOi1PTLYcSw8WzwnfF7uZ68uL51IvS8pdhu2NMgJP1XVvmL5f5c5zLssdNVv/h6Q==","signatures":[{"sig":"MEUCIQD50N6AsJ+PHQdSHllhsw8QQ1sh3tr/DgKHqnxDd8R5QgIgfKluvWW4Xu9Ybt25J1xFYpW0crJg7fAbxQdH/m5es/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIykbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmOA//UqL+ynOm1q0Dbs7S9x5h/VoHAYu9cgPlwV4RMLdTEY5zT/H4\r\n9jtkYcscREqkbNSeqv7Hq4eeMPd1txZYIo95NOsYpvFWugKykdpPPaxuXk6+\r\nDeU6Dfpj1U8/6L9K5bu4jo75N/W+wB62ytnf8jAcwWTYAWcU3olfBbM+QXVD\r\nX0TjJUIW+5xTjZCG/Mbdu5MljIm3VUGdU0QsgJub5HVw1ihmURsfV91KnzQt\r\nQm0agEMfzK98gEdx1OLbhVYNMKgLnbi9f2Y+uuLRTuJjhf67xoLrMmBJR5ZT\r\nruRRGXv4l3pJnAqBZu8TiLmeX75tURrPzdTEDW1Gz+4SZTvy33wlaiTwlQaU\r\nMaKEK+rCQqOhJzcfKoVM3ZbNf1Ee5FkQBDWJwR7A/Rvft03P08+0MoIsQ6US\r\n/6GtadGjbUOlmdWSHFJiwJNWDu3vGHKXzEf0RuEzbvFwGB+iOeFzdt9v+QO6\r\nqsueSIOGn2+BgQBlJGyswcedYvsb4p8JVxJM4vI7HO39wmsqs3v7GyoxhToK\r\ntDAQWyWiuYzHDkI+0mq7J76iDngXHadhbGiz7kjPPGsupA/XRvo50sxG2RCD\r\n/8NvEEvPh/7J/K3YJvHYmrVJxgYp9AgJm9VuEowwLmvuK+V/Zir4UpVKRCyL\r\nIvRz488hU3Cl2nozOkI8H4W0psAky9x+lZU=\r\n=zS2e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9895102e50a9e7eda73e0b0039246bc56c79a7bf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/rtl":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/shape":"15.0.0-canary.36a4cba99.0","@material/theme":"15.0.0-canary.36a4cba99.0","@material/button":"15.0.0-canary.36a4cba99.0","@material/ripple":"15.0.0-canary.36a4cba99.0","@material/tokens":"15.0.0-canary.36a4cba99.0","@material/elevation":"15.0.0-canary.36a4cba99.0","@material/typography":"15.0.0-canary.36a4cba99.0","@material/feature-targeting":"15.0.0-canary.36a4cba99.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.36a4cba99.0_1680025882950_0.9628888053665363","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/banner","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ed7e82ded.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d9d46347f17fa63fb9ec9c51443ba6c46ea56f49","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ed7e82ded.0.tgz","fileCount":31,"integrity":"sha512-Iwqvo9IT7CQfgtobmlXYKSHlwkDh/6z1+TdkrSLAQ/bu5aLa4Y3b3gVTUjH7LP0c6F14SHckImkssURNsIAQ6A==","signatures":[{"sig":"MEYCIQDwJ+diAhUn6s+PrgobF0dxPOx6i+hwRX7+sahtRDQdZgIhAPv9JNrUqWurj1jxxb3iTHW0yCLkrRUQtwi4RDfr2EUd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0+yACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHeA//evze4y+sD3xFFmmyx1xzqPYdgXBiKvTNd9DBE3ZcvKcsLIMT\r\nl7p9OJMH5rQNFLC1KzssJvBwGEoBXSmkWggaZ7OMpROmtt2m6SwjqZLNwGv8\r\nZfFmFBXDit4fKUWzpCuZ0syGoG0mkAf+pqBEpJ3I32Nc5apzFCXiRsD5+YH6\r\n2iyBl8/EV0sPfMu53YJGPQnbGgsdGu0E8Emdiw9KnkhxrutA46qJd8tuSa8c\r\nKHDBGqVcznev/s3zAMpgKTQEov2t1CYx82D+JAkb7CGcqO5Rp9XHBHp3ee2D\r\nhwbYUn536PMh1he6EggmS2agqumiI290rB9IN/NAZvllAwoFPAGiAW868hiB\r\nbB3hdlK/kPOELLKaDkiJCACrz5ukndMS2qxsWpwSN1RmTNHdzpbjUhCnyoz+\r\ncRorq0dz5yiWnleL9WtqRkWzuCvfwp6jvHbjO6jxJXiauQwtzN21vrlCVcYy\r\n2xaeLKcpYZereRXj2eutaaISdtPsJhj/3wb5J2B++RQnRNAmBYEd+LbavFW3\r\ng0iQi9EGND94iOdKRkc0mHw0+DUwCZn7bfNkwnSVgXQpqvAnNcdtqrYdJsGe\r\nqt46Vq2GiXS1HeD49LQLuKAkV7ERP44JfK1jIXReTIKlP2q1jieA82UTCJ3h\r\n0nV7mvFwA92qybfnlKGCjQ04shqE+NC141g=\r\n=8dKf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"037c17ed14cf732acefb4bf7cb0a6c61f643b991","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/rtl":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/shape":"15.0.0-canary.ed7e82ded.0","@material/theme":"15.0.0-canary.ed7e82ded.0","@material/button":"15.0.0-canary.ed7e82ded.0","@material/ripple":"15.0.0-canary.ed7e82ded.0","@material/tokens":"15.0.0-canary.ed7e82ded.0","@material/elevation":"15.0.0-canary.ed7e82ded.0","@material/typography":"15.0.0-canary.ed7e82ded.0","@material/feature-targeting":"15.0.0-canary.ed7e82ded.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ed7e82ded.0_1680035762061_0.5148798023011958","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/banner","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.55093ee1e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5c025a1d989ab30c795432a287832c2d1fb4d028","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.55093ee1e.0.tgz","fileCount":31,"integrity":"sha512-T2TMQA3GsyvMkPE6JgW+3WlqsQc1chXW1jReP+4TrFm4PoI9wz4kPOPPtuEo+Dww+Odh3h9GB/RbuTUM86WTug==","signatures":[{"sig":"MEYCIQCc2x+nYLibWtkjuqiMwEoBoOSFonpuMmYvxyD9wGNMrgIhAJoANKVT7dvRTkLpRh1OTmW9lyAG6smkpaNOUYdRknCw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIhlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmps9A/9FIB0Zs1QvsDyqVZ9n8zBI9+StQqGDcdqiz3FopOZCFXMkQ+8\r\n1utsEvvQiRaZKmAgJQyuKa5bqipHEFnaFWB8nRbZ/LZTpZt5MS601as5SEr7\r\no6l9UKbYbabXCHjhXzt6cJtJuTBJJHIDVOK8mVUOEp4XMdaxgt+yNhA6Y4D1\r\nbOpE7IjAHnAqDsGhmlaytoSYNIERPckSi9hMBq3Ln6m+U3sjGNRKzrQtAuZq\r\ngjDkT6JLGB931EviCFlT3d8SUJLblcyAvbUcRJjMVF3Yc7VQ6rVzbeFNEdUd\r\n8i18dKw02r+M4lE2zefU0SMvmdie5QrdNM79Ha6GDkjM9uvH2OD58uUtVwE2\r\nKujVll7BYd80Je8jjUpGZYhuWbZt+KlV4MJeSe1Si4khRTivm9aTyYXnJfbS\r\nW2IPj1rUPM4358NRvKl11zQFMURMhYsk5fKaKdsNABCB7v/BT3dou/ZB1ySr\r\n8Ud6/KVcbwG0ngSJbv/uSJJc9pWX0Lp6+tIEuAV27ati8TEzciMRNGsvjeaX\r\nxotDN8Et57lBK9T8yzN3zRNS7YTlSxcR3fexgVbASfoVD5qeMVbilabn2Eer\r\ntyAocyp63AEG4gImFX6ZyJAWCVxSQUVAGUFztFq5zVNq+xHKJJ3PmUcqJvWG\r\njUXTAZdaYv11s+1pBeVSCXBjW/AwnXHIW1E=\r\n=xIKx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"98de61151738b5091fc2b0e261c18efce05e87b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/rtl":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/shape":"15.0.0-canary.55093ee1e.0","@material/theme":"15.0.0-canary.55093ee1e.0","@material/button":"15.0.0-canary.55093ee1e.0","@material/ripple":"15.0.0-canary.55093ee1e.0","@material/tokens":"15.0.0-canary.55093ee1e.0","@material/elevation":"15.0.0-canary.55093ee1e.0","@material/typography":"15.0.0-canary.55093ee1e.0","@material/feature-targeting":"15.0.0-canary.55093ee1e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.55093ee1e.0_1680115813229_0.4212798016371617","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/banner","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0c53abc81.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"abc848e4a69468f12c37ee2826d4784c39a64204","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0c53abc81.0.tgz","fileCount":31,"integrity":"sha512-/xh+5KPqIRphVjXOgk/3u2bEnAYWoU4zNancnz1vUAKcAzX/wK6b2QBu+V2aGg/I46iKolnQ4NrZ8w5GY/bFWQ==","signatures":[{"sig":"MEYCIQC85cO9D5B5GARWYV1nwrj/BJAW/DpDYVqs0DvXtirYoAIhANPvgIkXKgH9ThRHs0pJVEoBL2XqoBvwd9z/QMTYYhUX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3T4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9LxAAmE4TI8qh4MqYETvIFJ+u8aLSHkyyAr/4VOjXopeaDxLUA/Fq\r\neDhSDDhrr22rQ80t6k2UWUMvUbV/nsvJwdH9rr7MuZsRlG9b1CxvDjHHSW02\r\nS4QfWEO8QuHMbcSZ7fVz+cljpZF4fXqNy4tO1IH1vgWAYCR3J5B6ao7eUmBP\r\n396SeQJRnqqp5P8eNEJhDnjUAqCHma7hVqwaIMlPXAiTC6h6CnQioaXj8Ij+\r\nVJNfRsn6z1sh+KOlWvL558KVA6688/PMp7Ndcn+1ehRSXOhnt8mXzqHYzVxt\r\nuKPXwdzQXUdf0JrYIMs+Ib7Rm+2SZYxgtMRRUrO25/1Mzy3ylPy5M1TcGdlr\r\ng7TMFBBeIHWaEiEK5Hl7lwm9gbjkA31fvTKCw75F0l53wh3BUdXWYLqhqayI\r\nG5otTe7KrgxiZkLJdyG2SBEsPN5GLw8fogRYKLn4vb7Ng9esPCb+S1xby6Qm\r\nVKE95QIw71wsF69MWRwNaDyqpiLmMfBBYu3KJa5n3r4k94+mthH5uXc7w9gf\r\ntyGIj9KNB04wmZtzdKQTw1ml2qo2o1zBpzfeuaIbKsi4Nf/NubmSQuOkOk+s\r\nXyWdp8SSHYxyZW0YNWnFFu31yimL2JTlMRc2DxHQAplSo5J/8gpv71Ih4m5s\r\nkcqGN6ebb4Zsz9o0JvpPdzBJeAxXwubzg1w=\r\n=JyVF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6f7be5b2317c28dc06c5b0bf4a8cd44df591750d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/rtl":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/shape":"15.0.0-canary.0c53abc81.0","@material/theme":"15.0.0-canary.0c53abc81.0","@material/button":"15.0.0-canary.0c53abc81.0","@material/ripple":"15.0.0-canary.0c53abc81.0","@material/tokens":"15.0.0-canary.0c53abc81.0","@material/elevation":"15.0.0-canary.0c53abc81.0","@material/typography":"15.0.0-canary.0c53abc81.0","@material/feature-targeting":"15.0.0-canary.0c53abc81.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0c53abc81.0_1680831736592_0.24384009465337453","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/banner","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.51311e69e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a92905879baa7692174efb4d394c49681113ede","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.51311e69e.0.tgz","fileCount":31,"integrity":"sha512-Ewwdl2OV41GW4tvrYSmE9951YMN+V5gmmPbTSCTgZVAK/6Agtl3E6JYhkZDE5sQbRMK4yEypBb74vqM3hE9l8w==","signatures":[{"sig":"MEQCIHLcrLfJLaCKwoZoJdIScrjA+C/oERgRfr5zPdNOTcRRAiAvG5Vz5sLi5Jih68EiZ6e4EDrq2AD6fUSz8MKx1mkdCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFw+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpc6A/9E3jZTq5USvuG3AImeuGMpBUWgePJFFaLdC6UO+p9Fjt4LFWN\r\nvtyJ9Nj/ObA0hCVspfWOb4rUvYOnw38IPrJRtMAAI2HeiFGYWAJ5zBxRa4T7\r\nlNfVaaKarqF9b1EyzpqM7+4dRbgBaeCB1oK/B2N6EalZZYFH654WdHCROT3a\r\nt2dGr2iImSqntGztSHjOzUY17gBToP4LyThjA0yJzxRBGdKr98VH0xP1zD7E\r\nf6d1p1rPuzuKg7lvyXqoetA2zWZLF+WyvgY/tWvo89OB6Taw0H8pl8tAgRQX\r\nNcYOxi1IK7Lz4O2/trrYR125CAX5kN+h0oHShfIJWIKTCY6AeM66RBLXEu0U\r\nf+YqnBqsbE1DUIOfC+RnGaibqLtrshK1KGw3UKCiYN6abPcGFb7EdfL2DGz/\r\no5wm/y3TQVm9IlZ6QNJOagTCuS7d0Wjk4wGvGXjadLvNPx/h/Af0LXln6MSx\r\nSO5zCG0AV1uiEkC41xsI16QRvGXx+5JuoU8J4HI39IXVF865nKqSoKyPIw08\r\ngVS0kO6Lmepw5eMlVhiLEPdLp4gsDzjudi7TEdtt4n7pZLUif2S7L6lLj2p4\r\n5bs6Kd4/WzPoLFFkYNA57AC8bd3SmYxbj/sKV4yyLWnpfnKNMfV7bEmDBo38\r\nEEqcz5DzAJQIvf1CSoOkk0Ju6F01H5fcmpQ=\r\n=u3Dx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"20cdc4f9c3bc9046fb111c8b65ba3e9609585dce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/rtl":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/shape":"15.0.0-canary.51311e69e.0","@material/theme":"15.0.0-canary.51311e69e.0","@material/button":"15.0.0-canary.51311e69e.0","@material/ripple":"15.0.0-canary.51311e69e.0","@material/tokens":"15.0.0-canary.51311e69e.0","@material/elevation":"15.0.0-canary.51311e69e.0","@material/typography":"15.0.0-canary.51311e69e.0","@material/feature-targeting":"15.0.0-canary.51311e69e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.51311e69e.0_1680890942415_0.39286188937322364","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/banner","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.113b1a38e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"21ad15753c638d05964ef4b46ea45d8a0481c2a7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.113b1a38e.0.tgz","fileCount":31,"integrity":"sha512-wJPLbT2F11LQAEANewpWVwcb5bOlO1ap+ETYr07UBlYHLX2ilJsQ3FJ4z4zsdLI6e09zJQfbGMZO+tO97dozKQ==","signatures":[{"sig":"MEUCIQDa+dh3jUUFFWF/QdBZD95l5NT/jhMa2F1p1lTTpIexAwIgf6UMhLSapbhauF3DMijgML44+lvisXRc6NsRnW4ltgo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIWzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjTQ/+OWTOKRn3iAki/GK1SaptVdospBxLGlAbwpED1sMkEOoG3sC6\r\n1OvnpvOehLgMnkg4cBbnKjOng91OXRtKXO5YvznWvlSTz6hbrUYY85hRlj02\r\nQQmRU5hZfJ/9idmJQu9wEU4F3i7PvUZ4vaqcA4cSgxl/M4vMjEiZhcJL0i2r\r\nnJ6QOmIM93mh/tWaN7WpW8g/CnQvuY0Tc63mg8KDCOg9N7oZnCfW0Rpemgi3\r\n6k1Cx45R88myJn3zE4iJt9eEUMoeKPar3y8X4f5eL8pJDxUf7nf13IG4oWbJ\r\ndCWrkECX3PVJB4Uh8i8pFRKJT49xdqRAgCWcoWJrOTNmR448cFEfO30P5r+5\r\n1rqh7jJypG458oJtT4ZRxs87VpaQ/r0O5oeNhiXDBcbBg2FI5RvQNDNSh98K\r\nkNGxWWcOtZayeilw/5HGVosYPC8F987pJGi43nD8NoxvQsN42KZvP2dCIG4E\r\nld9iZ1T6qT8PntvHQdM6PUM9RFmWLFX4iytA3hiLLMd4Ix//wdY84eMP8QQZ\r\nhxR4f7OjxvgMGdYHMTT0ftnAoN0A4KhU8YdBxwOjLqpuNrmmIp5bLsydtB2Y\r\nfK1SBXUOvamXlp5/5TdCjBdTMJAwrkFlb6kPUGye8zKaPv5x//KVq1DAwsaV\r\nlyJaOUsYsx4gdPKqtiPYrkRwlKoIb9tsULs=\r\n=wpJc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3613349b6481f716239e1a73c710c0d5fe44df72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/rtl":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/shape":"15.0.0-canary.113b1a38e.0","@material/theme":"15.0.0-canary.113b1a38e.0","@material/button":"15.0.0-canary.113b1a38e.0","@material/ripple":"15.0.0-canary.113b1a38e.0","@material/tokens":"15.0.0-canary.113b1a38e.0","@material/elevation":"15.0.0-canary.113b1a38e.0","@material/typography":"15.0.0-canary.113b1a38e.0","@material/feature-targeting":"15.0.0-canary.113b1a38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.113b1a38e.0_1681163698779_0.24818007220620641","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/banner","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ea2191426.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"66e1180bebd296a02c4a20ecaf8b0dffab8cc8e1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ea2191426.0.tgz","fileCount":31,"integrity":"sha512-Kb2nqNusUMD3WUAcjVypfYdBJYcc+Yr1O9CqFRaRiDWv3LOQcJYyLSfT4ksPOQAPglrN571suuMKIOBtPaBGQw==","signatures":[{"sig":"MEUCIQCtqdGEIR0mg+lgNhpVUf0fqL18PZ91onbvVMR9Cm9abgIge4HJKybo5rH92xCbLKTCpj66tscie+CA5oRXzZe7JYE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdeyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpl4BAAoMGHTzaiEuKScFyjlwJDwFGt3LDhAwsnr+3suTTYNvNyKumO\r\nLluVsVkBNp0rKTEk0m8aH9UnwPrbRBKVhG/BOJ4eyt4i4i9FDgHmgF11p9kW\r\nCfXTOgCxu4KW3SDVtGGDAM31hTdPZptHdZIfJGwlnMI/9kJpGp0B2CiM7HT2\r\ncCffdNae8u2YjHeMjgi1FjcAOGbGgUUlJEtdWyXHIh4+a3S9gKm0Zyb5TLjd\r\nVBQjnx7/vXOSQxSHzZuNMGKG6cCQzExtZ3d3epwBh1RW+Ttu7c5Gv/yVDgfI\r\n1PilMYxvGCq5Yt+aMheSBka7tGnDn0/EoknROc2zumBcIQLwjOt1NlKRV4aV\r\n8zH3096XFrTlQ9nHfuR2jn9JEZeNCG8HljxuMPPy44taS8NTvb7HMqEL34WB\r\n+s3naW1d+xoUxpBpHY3X7ZmAfR6PSVHxTo53i3lgUjwcQWItssohCF1uFAG6\r\nbxqq8IoO5YnOqEuV615xoKzSBC/sujolQyLmThLuqIG2ICmhsSOVrGhzl2u4\r\np7BkWABjdjvViPQJe1Qne8P0+wktXf/ikaWr8opcO7SnmmyhA29WDGSAyzgr\r\n5zKx77udzojBsBebA86DpvuVzEL8M8IKFRnzllbIsKz8gcXr6sV/3nJAP6yq\r\nuu0FcQs8teSSjpf69tEB7MXxQkQTtq7vkL4=\r\n=dmZh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8723a8c5fa13530d57b1651464ec28e9ed1d4bb2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/rtl":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/shape":"15.0.0-canary.ea2191426.0","@material/theme":"15.0.0-canary.ea2191426.0","@material/button":"15.0.0-canary.ea2191426.0","@material/ripple":"15.0.0-canary.ea2191426.0","@material/tokens":"15.0.0-canary.ea2191426.0","@material/elevation":"15.0.0-canary.ea2191426.0","@material/typography":"15.0.0-canary.ea2191426.0","@material/feature-targeting":"15.0.0-canary.ea2191426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ea2191426.0_1681250225899_0.38138348619172935","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/banner","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5a5c38538.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f586d46158c257b9d1bf7944aba301c547e74a6b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5a5c38538.0.tgz","fileCount":31,"integrity":"sha512-1zA5lc1QEnIKb9oaUXrF4+JMZaOSYmHHzw7ZZUSIndDvp5f34lR71BfQT3jcJR7KeYqP1jLSYccpItP0W8N/9Q==","signatures":[{"sig":"MEYCIQDxu6vU2sd6o9DJj8Vc4C8iu9DTi+mSqvgYAaspsyrscgIhALUCCJgFF/rzKdR1g1QVhYBmOfx/mbfuLGNzEws83niI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd/BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmphRA//cTaXC+uu652EreFao28dIfYZz5GkC5VmaSJe088LSB9CS2DE\r\nbOlSVwXtrYLjT1splXTCSWnc1A/jX62PjYu98hlb6Vca7WysY8RfoOsG0fJ7\r\nONdtA7bQoutpZWZv/+ucB+UMIjNvMcNMASDqvFuRjpup3oJIcyzUiUSkTb+A\r\nil0jzYarNW1OvTQyG4+2v4c19smalhG7M6UzRPJ8cjtCem+tgAZyt58MwXNu\r\nSaKzANLmH8an8hGCZYNkQNrOAgu/SbxN3axMfqOTyZ1egFrZ2FA6/t7KWJY3\r\nA8WhVWwOUkrhhHBWzM0wIAu4g9naSR6++bzricMi5Icw3pSRYfSjS6xTfAzM\r\n3Bt/SoIcrYZYIYy/REndN6ovYLlxQNBSUdeRo9PiNiV5A9e7iFhecpUu5Ge7\r\nxPvmq1POzq1JnGwyFR/He6gT5tmtTIc+Up7Oiypt1DLhPIOIbiXb0fDDnC5A\r\nIFQJrI/l2KAmSLVZfcDzsVPmFNZ3Mbbhkk4fcKtboUbfYQ8mpFEWkniqIYbZ\r\nxIhzQrxN8b3SoinFhYbECtLC+XvoEOentauGSphXGp3Sb3Ax1QUNG6xIZ5bq\r\nqIvtLO9VeHu9c60NoX/lESsHWY9e8iGapmLKwIKI05y5iDhjvzaT8lHb8TK5\r\nv11ZZVBMDrJjk2os32FpT21/FeVTaBkhOfw=\r\n=XXcI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b05f00c0040fd0d1250297d4fa4236a5b6b00b9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/rtl":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/shape":"15.0.0-canary.5a5c38538.0","@material/theme":"15.0.0-canary.5a5c38538.0","@material/button":"15.0.0-canary.5a5c38538.0","@material/ripple":"15.0.0-canary.5a5c38538.0","@material/tokens":"15.0.0-canary.5a5c38538.0","@material/elevation":"15.0.0-canary.5a5c38538.0","@material/typography":"15.0.0-canary.5a5c38538.0","@material/feature-targeting":"15.0.0-canary.5a5c38538.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5a5c38538.0_1681252289351_0.7920296761873484","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/banner","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e4b5ea7eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8da762f533294a35132073ed58e9ab43bbe97752","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":31,"integrity":"sha512-v7KUDABmZvFEYsd92zp+f7/tztOciKbK5MNiJ+Xavc12Grgu/FgWuh/ENozhiTRJ+ddtVnca2Je6neKHkvpsew==","signatures":[{"sig":"MEYCIQC9jDIbMGUOD8Hcbr7tLhZ/Z0/l74wEIOVmW68c2jxxLAIhAJyOyXv1Okk8SkhkFAM1y5u/0IJzm4ohWAUpBsWsVJ0+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNefJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBFg//QMHa2J8ztBV0zNPq4LmhnKZ82n/XQvUls6qfeq9qwNeRrSTS\r\n+4yqUoqUyF7VRVJI4VrSyzGdMsQz0mFR3JfyK0lZO1BZsmbBgDSbOhQ5RkLj\r\nmqzDOxISH088t/FIdhIv/AHmWJqUopIaxbYU8SUr6qCZTvqSn/LQhd+TipGF\r\nArD9DdiCFsJT7bSZ8/xPSNgapNnBjpnPYRjQtv9ljfei0RtlxQ7qHcoNVfNo\r\nCnv/TItZ+0+0941ZDfO+zIo8T55lidJ4vERNHtFVREf/Bpeo3iqhCs8UsVJE\r\n7Nel5mMWgxLe9WSpBkbpfTQ7HxBfXczwB4ieMtQxFJN8bNBsrGl8dwP4gtoy\r\nGOB+D0txcMZqvvMfIUTr6BkB5SIlhx8AFT6gn3a9RaiDZQs359g1NZ1M/JzA\r\nrAB7Z9PPESsUJSbSPLEiMAY5j8zOzXMTNi20NuscmgtG/Mqp+ZuHmPDqfzKr\r\n22qYUCIj73q/a/VepVtMTR9ueiupcm7KG/yY67ZJo5OhDGPWK6MTbKbOUwuw\r\n73fjYpJxZyx3aBODU/z5mYUP9pNcfPhLNnjPS3SQizUWnrJWpjgJXnSBcqnC\r\njlMnzyzQ51CNMC11M6/EBwuQ6HZwgRSUIvXH0rtaRHmizGIJImvunwXx6gse\r\ncCTl+N0AKnhacX+kTn0riFgFtyFiP/YsvQ8=\r\n=Kmyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cfe1a97277f39a7f96340673857504470245556e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/rtl":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/shape":"15.0.0-canary.e4b5ea7eb.0","@material/theme":"15.0.0-canary.e4b5ea7eb.0","@material/button":"15.0.0-canary.e4b5ea7eb.0","@material/ripple":"15.0.0-canary.e4b5ea7eb.0","@material/tokens":"15.0.0-canary.e4b5ea7eb.0","@material/elevation":"15.0.0-canary.e4b5ea7eb.0","@material/typography":"15.0.0-canary.e4b5ea7eb.0","@material/feature-targeting":"15.0.0-canary.e4b5ea7eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e4b5ea7eb.0_1681254345253_0.05447628786827141","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/banner","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a094dd9c1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c6536ed5d24a565cd451db59f8b3f57d983d79bd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a094dd9c1.0.tgz","fileCount":31,"integrity":"sha512-NMVDjMChgzeDSV/Qppwzw5xAr47lCuXxOQYw7iVLkuD45+pDI/NexDmt054J8fq5o1O4Q9rSlj9EG28CxEGX8w==","signatures":[{"sig":"MEUCIQDiqDQa7toWaET+uexvCq4heWhzyqYi08G0itH2vSCpQAIga4APlNYbwR23nLhGNGK6+tswb0wWPUOHSzbikvaQDYw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOdccACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Sw/+LYwod9qm1e2IfYxJmGTJgYUR+M2Hbys/Nc84Yp9Iv9mpWodN\r\n5MAPvvs4xMHitfkxxn3ga4IZEFHKuxo1VdKhJ/1YNgZ+w3hwU+5iGnKjzU8M\r\nkAsOt+F3S9I2UxCUmIDYIawJGUNhPyqL623tuxYalf5W3Y0GNxbti47HAYPY\r\noys43/0KTlarT9LZDe/jNwulDUrgYJ+X1Zyh6Em+Fh7+nXqGmzvA8KABRSUC\r\nUogYdMT1urdUswNxyqpweVcDQSozNh/NjvgLUbO0/gDuJzNzsRo1RvOLZvhH\r\np5ZHjTWyeBdLhwGo85hHfqEFzlqIu2KX2zLLXStQkvMcgX/4zrYJ3xlvEQFL\r\n3SciGsjuRQLb2jrJ2MNPSeuJ9aWQXTnimeaFtPZkZODToCaRvWlIHOW2hy+I\r\nPBt3swsnc93sy+Nx46M6yLgMH5BVAPk8OhH++gNDiaP5+V6DHzXO/NENCFqR\r\nvfHFZCLJh1IiD74gma76ZRSzMq0ATG7XEGf/H6Gn3WYDRCO6rdKGdff7vGfv\r\nug0ctE/RB34FYbwDOJng2f+kw3kqtDuJqxV0bB9IvH4JAu9fwajtelay/nE8\r\n0LMmMAtROa+J/ZlA1XItzJyOgNCMqYxY+poHWVdOsBgXPoLathKqz4yrcFYL\r\nea/CY3Mdsj+Ko1NuffGQo2fZwv2Ujn+pmHw=\r\n=qdHC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"aa5164e66f4afe6547ceeadc8a793bb4f489ff5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/rtl":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/shape":"15.0.0-canary.a094dd9c1.0","@material/theme":"15.0.0-canary.a094dd9c1.0","@material/button":"15.0.0-canary.a094dd9c1.0","@material/ripple":"15.0.0-canary.a094dd9c1.0","@material/tokens":"15.0.0-canary.a094dd9c1.0","@material/elevation":"15.0.0-canary.a094dd9c1.0","@material/typography":"15.0.0-canary.a094dd9c1.0","@material/feature-targeting":"15.0.0-canary.a094dd9c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a094dd9c1.0_1681512220061_0.5134239641244127","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/banner","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f771b091c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6c3110f9dd7e9304dda2a34d03fc3327afe4ce69","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f771b091c.0.tgz","fileCount":31,"integrity":"sha512-WDlF+D92RTWqzo2QcdauqC4tQ+S5KwQ42RxHsDHYU092OFarAsVp0VQFir4ixkr3eeRJTvikJIAa41iX4l4SvA==","signatures":[{"sig":"MEUCIQCwYoPPcHoKVJ8ypODudCRPsPLktafolgvsyix/SYM8xwIgW6ARBtpZLt8ps7HUe0ElosbPWSS1PnHb2JY8hWVvtXA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWg7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr46w//YHUBFaLLJWloSZoqjRrIkqL/GsTGDOglStvRdVJG3flVwISk\r\nIhvrD3YSnB0lOJrbot43BMWYdVn27J91PgtqQACOXGTJSHHRnL/9JSnDLPPG\r\n/68GS9QZX6aPObeL3lmurmaaWPz+f8qH8zN4VEpx0mQRNcHbqBjTt+K7s1yV\r\neW/ZDoP2bwuwk0ZzNdQDZf7b/NTRe9QRB5Du0ElV+MlNU1E4FWtVwzgbnAM7\r\niP7M5XO09v5imH/RkrJEylFvS+I9ycs8dpmh3ji9fRnf7LyzhO8llEHuX97V\r\ngoLb4jeq+VZJOVseEgkBeR3ti6TfxrVZA9Gw4pHeegcLaZrCUALl3LdAVv6c\r\nNSvIZ2FL3MsMY0P2eF/p2WbL7xgMYsBKoHn13qDLJqKn9xl+HDUpUwXOP5/I\r\n83xEuGgAvzVGAOKdJsObq3y5L0/zF+Fz3yOvMjL+x2YBCz8PMYADCyo/Eq2+\r\n3k/MBK8Xqx2fC1Ff3k54OnsvXCEf3vEkaboasaBzGr2Do0EPxSTvp+/QtZdN\r\n5LyjuwaADY2QZHSPzvI5mNvAST6Ka2ng+VYafbD3BqnxgJoTrgwXJ29P2IhZ\r\nsDkKrie+fPLNt1W8/zEfI/V9+jopfFxNInDnf1B+LXSu2A7Vsj/c50JTwY9N\r\nxquaeSzrFE9huzDeQJ4l82Ip8LF+xm2FtuY=\r\n=LxES\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"de0e292c8ebcab887041fc4a59b3c0172f4d4310","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/rtl":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/shape":"15.0.0-canary.f771b091c.0","@material/theme":"15.0.0-canary.f771b091c.0","@material/button":"15.0.0-canary.f771b091c.0","@material/ripple":"15.0.0-canary.f771b091c.0","@material/tokens":"15.0.0-canary.f771b091c.0","@material/elevation":"15.0.0-canary.f771b091c.0","@material/typography":"15.0.0-canary.f771b091c.0","@material/feature-targeting":"15.0.0-canary.f771b091c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f771b091c.0_1681745979478_0.9077396380351872","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/banner","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.79b1b612b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12ed9ba4984e4995f83df31657cee16d4a816c09","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.79b1b612b.0.tgz","fileCount":31,"integrity":"sha512-QKPPY1v7VzFFrYi58x4d1CDLiqHNs+q9CmQivjbz/FAb8QBVlL9+nCci9LkYMmsR8r5384UANgTin/CeuwCTzQ==","signatures":[{"sig":"MEYCIQCJsZjw00ukIXXzslXHonrl2it/jaInOiJXrMZi5oO6jAIhAPZEUGs/LVAJiqGjyhcNqZkOVJf6tEosvRNHoh/6x+5n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHwuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmowBw//aOb+S202mdqP7VFgKRIyqN/vh+BEXQTRRd8z4wkwjSXbZSGg\r\n0jSKUZCZ3izr4DlY5jkC7DDlNSh6rJ35OqkP4Iek+BJg34Bh8OtThye1+0WD\r\nm515TrHm5aekqGO2yb0TubKqpm6s11Vd4KakYm8mXdkO2o+MbfZrOigc2/z2\r\n/b8/d+VpJO+f+6IqAdomOyOAHGRL6O92+LqQlu6rSXrXJP6uR598FXt7Cqzp\r\n0uxAvWETo7EmPhuJ842DHX4Af4L7nvhaC0EXNbnQtCTxL6sUe2h3PNbk6Crm\r\nq7J4xtrLsh792i0hIRXrlVO9V0oV5gKKEXChhpyJedZ04NagZKVPbi7VOkyR\r\n/i6xwUkM+tZfksfAocGs+OEUnN90yhZbly9W4iqgrdTDFwonigKkZRZfol89\r\nLZYfqGmfZIgENq1hx7ctPl9kqONS3jSwGQFjq/svM3TTELpqP9W04EoAaT7k\r\nRNL6fVRcHeXK/OqcHh6m7lFDeAukUyFgGWzfCTycRLzBMAWJ3jdwytGj66YR\r\n+YZaEzHAoYYu38j+lVRhcuWgcKBSTSLclt9ZHgLBlyhRdPbFDKVQZn7Wqo1S\r\norWTNqRxqjPwv44YYxishYv9UnL1pDK8s0WHlpoug5zhQbcGNCEOCym4lm0Z\r\nARictqfItH4SkOEcWN3An4DoTZSO3S/MoVE=\r\n=3m+m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c8248a1b49ee37b1782b19aaa49b5626c914916a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/rtl":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/shape":"15.0.0-canary.79b1b612b.0","@material/theme":"15.0.0-canary.79b1b612b.0","@material/button":"15.0.0-canary.79b1b612b.0","@material/ripple":"15.0.0-canary.79b1b612b.0","@material/tokens":"15.0.0-canary.79b1b612b.0","@material/elevation":"15.0.0-canary.79b1b612b.0","@material/typography":"15.0.0-canary.79b1b612b.0","@material/feature-targeting":"15.0.0-canary.79b1b612b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.79b1b612b.0_1681947693729_0.8411297094947083","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/banner","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6f50071e5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"49605c827d1664f4b42732f1589818c348372a8b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6f50071e5.0.tgz","fileCount":31,"integrity":"sha512-6U/p/SLlm/L5HOWll/ZusDbQ1vu6uwi8EGgIUxHyBjS8tWjf3wBr4ULUIMmvV5+PYS4uwELbEjk5ZOoNyHmmvw==","signatures":[{"sig":"MEUCIQC87wFuH3NczCIothevmwXw1d6iiEuh7Xd6XhjWRQRIlgIgag0lRUzIdDCZdx7ovf3VU11GNeyaicNe+F/a6e69ReY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX4zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrfJQ//XX7s1c8qH/v6IPlTlZ9H3B7HrXSw5Fjic6g7rgkozvLZqMXt\r\nS6LypMsfSwuz2hZw25mm9HcLRmsxqzNi5KeCRnAP8zoH8D1Ik4enEIOpLyB9\r\ntVHtM0+xILmAm/gJlX4MWSrEJxanqUoRzra6GWHsV3+4n+WzcLA8FLuV/iew\r\nelOWUtscEKHPCW+1GDbdxLwV9yHZMIwoHHDQK6oBilbtMFgvvQkGe/tFnhlk\r\nuZV86nKevLfhq1Td0idyl8fyTB0IHEupk02MHvQTB6Sp6KE3f2iO92oW6hKj\r\nXEeoH8wkiofWKpf9zdoVr0IDb5m4xp6/oxtHxYC7XFitIyC2HpvxoEVBuu+s\r\n0IAE2XMuvvFKRxjtTcHlLlyIeMr8oE2zAkkicyJYPSDe9Ls+3FLwqKGUjzhc\r\njP8tWuMrxCiLFRE8SyJXGrrW/S1Zvfo4CxIOQ/uyNh14Qvg5uOIJGLBg2wPJ\r\nBN7MJrZqv8MzuyMU9f02tLcBbXMILvhc/7RXZ5m5iUWyGFVGQbB0t1v4SiuZ\r\n2Lc9WQQUwd4WXV3DQwKKjgeQi/BFFagVCHbYgMkh4i+0SkflJwOov/nwE2W6\r\nhCNqZwx7S4GRJDkW53pDjeO8bHtFzR4AGVSjmZi6iWls77RhpP6OPrgsz4gE\r\nUqqW/jay75VeX7IrLI3efV+cqm+F67iLAjw=\r\n=7X9f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0a5eb7e7a96b7f207546983c0f79d6fdf23f5228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/rtl":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/shape":"15.0.0-canary.6f50071e5.0","@material/theme":"15.0.0-canary.6f50071e5.0","@material/button":"15.0.0-canary.6f50071e5.0","@material/ripple":"15.0.0-canary.6f50071e5.0","@material/tokens":"15.0.0-canary.6f50071e5.0","@material/elevation":"15.0.0-canary.6f50071e5.0","@material/typography":"15.0.0-canary.6f50071e5.0","@material/feature-targeting":"15.0.0-canary.6f50071e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6f50071e5.0_1682013746792_0.09199463635877447","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/banner","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ef754381c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b016ba7d33224e144b6174dcb6c569124eba1992","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ef754381c.0.tgz","fileCount":31,"integrity":"sha512-PDFbzuCVH1ikQK+Dh9kj59dV3Oj0MHvGkQlePww/B6XsWA4hKqdKaYNrl2+5TdMTjsci480gQXWfWOMuAFqytw==","signatures":[{"sig":"MEUCIQD5AVl+M28ZtAECumdxuzovdAg2Knga1RvViItQliq+tAIgP5DpHE3EwXlglnqNi4GDJsew3/kRyFwK/AWfc8CSyY8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuv4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgDw//cJ8oTOsCkA4UB2JYI8KuWaJ5WRhKwe8U9E+RNATa8LAODUSX\r\nWdR0Jmq4I2AcEpWroaD+OOj+F0zJDgmI/CBiD2MaixLFi7X2UQU9bnl79dql\r\nobi5s670e6Jrfm9sLgGsyxhSPJIHoQviWb1dQ2fieU+lQ3kyGbx7ka0y7kuE\r\nEw/LzkQJ7z9W3epoBCtGs91USti1cRvvMUYfgOI11dYoBjp1v8moCAwbd9lq\r\nBrxjQeF6XsBeLUoipwhK9dxTHm1ai3GC0GPtZp+GU0PzGi2fQzTOTj1dUFJH\r\nncV0cwqSdGRXwT73yQ+YasvtXiSAGabjEY6S3IGEWYBhlj1kmVdrtmCkQOPh\r\n3P/YANm8xN8fv0b2W1zd6LZhKSeoa6JzRtPxRNhZTti5fX7w3hE01+cH3LJ5\r\nBaTYXXk3fYMvJsjWdw9Hj+oGpftNu6FjCvINVBzuUKUz62IoOlIjyA2RRXYw\r\nl/Nu5BbMzjfcPUepF/2J+TkoF42gDZCpDUhwkjAoDUaJ9aWPFAhWNWnrjQOq\r\njIBjH2YjHUXtvh6g4Bov5/9ngtIgmmRbIRcDbBtI5XfPchAuzbtdFIXFtgLr\r\n8st1LkGfvp3eiDRTUXP4HcSw7bdu0FCLp9pGbELBijeD0Zpkkw6I8ZjHscrQ\r\ndMJScXtwVYodGDciABOYY4VD7Ml8y/eB3B0=\r\n=sjGo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"998bb9432e40056ce6ec836100d9a46f72ace249","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/rtl":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/shape":"15.0.0-canary.ef754381c.0","@material/theme":"15.0.0-canary.ef754381c.0","@material/button":"15.0.0-canary.ef754381c.0","@material/ripple":"15.0.0-canary.ef754381c.0","@material/tokens":"15.0.0-canary.ef754381c.0","@material/elevation":"15.0.0-canary.ef754381c.0","@material/typography":"15.0.0-canary.ef754381c.0","@material/feature-targeting":"15.0.0-canary.ef754381c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ef754381c.0_1682369527931_0.05105419964526381","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/banner","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.69ebf61ea.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c2d52af499f57eba2b8656b02a02dc922c370e2a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.69ebf61ea.0.tgz","fileCount":31,"integrity":"sha512-7GxrKGyJiBuy9h8QbSM61OWO4ZR7QT16pq4ChwOesXo9vG2E4KKr73DFfrLdhwSu6mGCFiF++bTpFnyjwvc4Rg==","signatures":[{"sig":"MEUCIQCrzvhde+uxeCGqQQUOSoblzhORvjD1guHuDYLT+O7+swIgamGhW1YUyA0lbo/GYsqE8KsjWmTtehGNb5S780My/+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq9qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkSg//bbkNXXzPUcu+vCAz8JETmgLu/TqlQx6S0SDy7+VEw3NrgIuD\r\n3+OSwQlB4GRFRNevmfEf/tdqGH1O/xKCCtBwqx8HV1ty1LK/HN/JA2mfkfys\r\nPKfj4PybKIyLYekDeIak4Pmf2lDE7r1p1W+qGT6YJuSK0egmqHt68rLKAkOX\r\nkwdhQ/4aqiJaLABpj9Vsk8SJzM7TOuVUuEnRMhY3xyiKYc6kpgb9XWcU6tZ+\r\ntWK9CTb3PsEfO9ncInam2PCpOINBmIsFjQI8BMjQpB5HIBeBK5ctdid7A9zN\r\nGlUzEwR6JiO2Uz2ydO94gdnBxrVfzmVnY88es1hkt2E0RZTBHaB+zXk7uIVg\r\njQYeRt6PL4KumD68cF2XAJoxuFlxX1EYHH9eZePVsQ0vgDKJhmN1GakP/wsv\r\nIjAkHkwSV3yunpZWDZ7LMRI75sBZhGW3MPiApXf2SJUiBAgCTlMoOwPvrYII\r\naYBPOvq4GwLc3rRAOsRBB+/zyL/UpeKbiwDh8wu0eajsR+PxhOpZV5+sli5a\r\nkOwo9r9bXWlhTRMxphuhaSjjpNgFhLhogxciZ4/Gtvf+gxMHisG8g4Y82AIc\r\n3UvdwuhA5SO2IkQc8WRvS12qB3LYtOir7k++FmV7txyrOPUXgWmSon3MVGkS\r\n2K6/N5fniEYFLBurioy/idX50KSJIUKwtS0=\r\n=dVzQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e68ad025642429a51f137e9f3fc853364faf0622","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/rtl":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/shape":"15.0.0-canary.69ebf61ea.0","@material/theme":"15.0.0-canary.69ebf61ea.0","@material/button":"15.0.0-canary.69ebf61ea.0","@material/ripple":"15.0.0-canary.69ebf61ea.0","@material/tokens":"15.0.0-canary.69ebf61ea.0","@material/elevation":"15.0.0-canary.69ebf61ea.0","@material/typography":"15.0.0-canary.69ebf61ea.0","@material/feature-targeting":"15.0.0-canary.69ebf61ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.69ebf61ea.0_1682616170047_0.2651897866976649","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/banner","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b90be86de.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"70467685bdbf06de037be0b51504560141631618","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b90be86de.0.tgz","fileCount":31,"integrity":"sha512-QVnrLyQZ7qgzhOT2/6kJJrvTFjb0qGi/ziZtPbPHxBhiXRZwjMmwUXoZWlyUDyfyGJ8QmqBLAQ94PWLQi+YQsQ==","signatures":[{"sig":"MEUCIQDELZSVfeBoA778z1wwbHRpJjS66KMblMRbducx+/mThgIgOFsJ4eCcyq3xv3+6aa3SvtQAK1EMiXDlL7NEHicf/+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGNbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpHlQ/9Hv7a215F5uM5ES4ovPvccwveenN4iyNMnuwc4vUKE8V64KyY\r\nuJ77DdkIgRKtizkqlrv7Ns/p1jXiUYRxzOYa8cjWRXl0oUIdfXZuYDubCwob\r\n2YU707HntfJ/vmXZFYmgvkA7L4iK/B6/eXDnO8Aub//pP7AA5ymKES1sowPU\r\nF1A/d3GSPG6o1LpEmrFmRftM/iYVAX29/49V1LjaK3b7DlFAhmr/K1nwm/cN\r\nqu5a8KWkSSYgOwxrK5L8JVtaU0iuyz6WVjU7CEnkWidgKZDf+k/CO550vR0X\r\nYIqYEiMX37t0yruLuzg0RvupGkKXHiWcumRFVPl2hKDKYP4ZqHbC6yYY0YeA\r\nVfMwZZu/k/S/ygpToUTTASKDpGu3ySCnENu3Ruh6Y4EnHpD/KnHw6ai8gFlr\r\nTQYk8gAv3+OmV0CkzYqZXpXXkNbyHXDvQj3uNyTZfOGdpzSgpxBOicr1idWs\r\nPASfcPFLYEzcIQBOZ1nhwqxeBfWDv+rFLf3U5dGsGpTPvKZ3emoDJDB8JtQN\r\nb+E9O01ynpFILGnfyLw58rrkxIoyn/36xRJRY/sZgAM6se9cQNVOc/V68c+g\r\nYcoE/C4PlJPAUz+HdS23erZw4NEIRVXgnIQbyQXS4iPTYSDWydRf7Ks0CCry\r\n8ZwN9WzU/rL/tv7Xa8PNsEhRUdXD6/2pX+E=\r\n=dUMr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"903a4c00d6c4501b4eae8ac0007164ef4a97ce0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/rtl":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/shape":"15.0.0-canary.b90be86de.0","@material/theme":"15.0.0-canary.b90be86de.0","@material/button":"15.0.0-canary.b90be86de.0","@material/ripple":"15.0.0-canary.b90be86de.0","@material/tokens":"15.0.0-canary.b90be86de.0","@material/elevation":"15.0.0-canary.b90be86de.0","@material/typography":"15.0.0-canary.b90be86de.0","@material/feature-targeting":"15.0.0-canary.b90be86de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b90be86de.0_1682727770793_0.6711990587545462","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/banner","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.51f9c0c28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c8393a3db600ecfb91950b1b4c035d22b7e6c22e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.51f9c0c28.0.tgz","fileCount":31,"integrity":"sha512-y5Q0MpuiGpIIN9UldCEv2eliYq0pHLTHkqHnjAsImzHRT8vnCqIQeeROwOlrLwBl3u/kpeLhSZzJ1w9OPkZeRQ==","signatures":[{"sig":"MEYCIQCN4aWQAGP6DX0xns31DYCAoYfzBV9u7bgByiNCuqO14wIhAJA9Ow1BpchaudMZyXu4kda2up7kjpUNKR9MlnMCRmev","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGWjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWGw//VLwgG9BcTuAUFZfhm8k827J9c6YFZ4DkzoktwaavOmUjDiY1\r\nWTE7qcsjFBf2Mqs8oQgScivtu45XlPGTOkXmC2ff95yydVx57QP632RyoVl7\r\nHC62iZFZIxO5YG84BEsW6taU35cQoR+isWswahQg+p3B9CtrNXGZFxAvsq95\r\nb0mrXkBvWT6RUf26vQkdZJjZ+l10SvYXED50P8pNF4Msv0bnwagUsKZkPvwy\r\n7RfIChHOzTInOxTGoCbZ07mODlwelmtVFv0yt8YLfn3HrfRoLx2RHjxEfV5M\r\nTxAgUUjd626xoZKv9U2AiZA1P1Nh7vFKcrZ2clRfL5UNDa3crav4refYzLbJ\r\n7TiXCiCa7YjryPSchCe9ywNKD7nB4N+qWO/upd9YEgVkFi/J+2cgOsHcqQB5\r\nuA2LHnuzWIDr1p1lV8L2IeHgxN0fqpjqb0JbgbJrlIF53hyQgTmroJoudSpy\r\nW+rubSQ7N3WOonioImUdZpr473Dul/z88IiypgSfWzKSL40jjsPm1TXcoFCs\r\nN+f+WtB/9BmMWeNvTYI0SuiKim2u0n8BFbZAh5XEm8GTIzStT30uJ24aZo+5\r\n91WPPhtlveb3f9NCwVLO06iveOxMRsYn6swph0ApH96afng2GduXYRW4k655\r\nu3MdxOTUc1mm7s2VZBO6W7F3svZmdOstBYw=\r\n=D4Dy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"87662f1719363ac8e600f73ed8a7795c25d8add6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/rtl":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/shape":"15.0.0-canary.51f9c0c28.0","@material/theme":"15.0.0-canary.51f9c0c28.0","@material/button":"15.0.0-canary.51f9c0c28.0","@material/ripple":"15.0.0-canary.51f9c0c28.0","@material/tokens":"15.0.0-canary.51f9c0c28.0","@material/elevation":"15.0.0-canary.51f9c0c28.0","@material/typography":"15.0.0-canary.51f9c0c28.0","@material/feature-targeting":"15.0.0-canary.51f9c0c28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.51f9c0c28.0_1682728355325_0.445666453578873","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/banner","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4e840d685.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d66268fa3fabecff1987fb23f69428a56e43b74e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4e840d685.0.tgz","fileCount":31,"integrity":"sha512-qrdjF+d5Eah//M2M9ETEsefAwDRP18yhQ1EL3fvdmQ7bNOeRLaEhgfI67BYZ+m9yxjrpzv5QikIpuIGE6PQkzQ==","signatures":[{"sig":"MEUCIBi3X5d74Vy7V6qxPSHm5Cf7e9R6Ys4cLfXXgDBC6ywZAiEAxl3xPo3ihcxnMWk8iEuCubE2ZwLlhCNluQv3gckl0CI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"feb1f9f53257b520aff6dfe5dd1a15e319e73a40","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/rtl":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/shape":"15.0.0-canary.4e840d685.0","@material/theme":"15.0.0-canary.4e840d685.0","@material/button":"15.0.0-canary.4e840d685.0","@material/ripple":"15.0.0-canary.4e840d685.0","@material/tokens":"15.0.0-canary.4e840d685.0","@material/elevation":"15.0.0-canary.4e840d685.0","@material/typography":"15.0.0-canary.4e840d685.0","@material/feature-targeting":"15.0.0-canary.4e840d685.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4e840d685.0_1683041695276_0.7538307279701848","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/banner","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.10b8563e4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"bf951d5b01020ac898c205d51676f1db911e7d5a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.10b8563e4.0.tgz","fileCount":31,"integrity":"sha512-JzfrRzghW4bfdxujoVa4AbhR2YfqYmVIHjZaa143jyb484uLtJDwJIhBX9YHZaalsE2axQp5ZhKqOE468KPOfw==","signatures":[{"sig":"MEQCIFAwhanYpCzU7sWrEFYla8dL/hLu8WVb75RGd1Us5mtsAiAm+iPY1co5qlmNkN+vk1xDUkr/sZEovYNIB5FPKXZyig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUaAEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopHRAAgExV3TpQae0LyT8o9kqAXrBegQNS2J/mkJpEFQmHgzM8gqOh\r\n/vZmelIVOivhXS3wFq1IX8qC3MKnZ6oyyYXFk1GljxD/Pm7VXplUEFv0++HA\r\n90bSYwiTASjLnp9oN/STvUZRQ3ZGIT5P842Yvtgnulz35yLXdcr/kXFP+dCs\r\nMX0KXTgd273XtLJCHI/T4/P6CpfxSTb/nh9Rc/ZpgQcDbx/xPK8X6tHaoxOY\r\nJPj8oT3KJTxsBoT54Yq54niHIPxVyQiXtrsZ3c1FfpkeHepkMU9LG3FAjUD6\r\nvE+/Q8B1Pr9+hNXijU4ZmbOts73vvUmma28bDqvzKIEeMd6veANNH4VakQcD\r\n3xnRH4zt9RuOWc/c6PHrRZ9g0wvn+1kuyTQgIx+XYlvPF4HWYjr7gmQN/B05\r\nVkN/u1/ECW719K8mTUAZ1ORSMGxFMURWNyCKIxpIT54fskzckGEx/iBiLxip\r\nKbN059DPpzE4Kjy9nnizYkrvFHA1Aje641N57nismannFsUFjfMKkOQ1FIp/\r\nA28HoEsd5WsGADJZzFE1qQ02G7+t/cuSd+N5+j7KcfF5epIg00z8WwUGblC0\r\nVzQZhvfh4jvonS+dK/JTUnhtDuvhiQy2aR19XB6VoIOpthmEpjhMwQWzgjnH\r\nlse0IAZ9AoL3NIKZJERRr0pss6hR2ujiXa8=\r\n=T16h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5f71dcbe45f5245c72c0fabae0162af558c5c395","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/rtl":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/shape":"15.0.0-canary.10b8563e4.0","@material/theme":"15.0.0-canary.10b8563e4.0","@material/button":"15.0.0-canary.10b8563e4.0","@material/ripple":"15.0.0-canary.10b8563e4.0","@material/tokens":"15.0.0-canary.10b8563e4.0","@material/elevation":"15.0.0-canary.10b8563e4.0","@material/typography":"15.0.0-canary.10b8563e4.0","@material/feature-targeting":"15.0.0-canary.10b8563e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.10b8563e4.0_1683070979765_0.6524778207858903","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/banner","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.736b7fda4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"63b11dfffa70d681842c8045c1e754b3c0d3c2d4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.736b7fda4.0.tgz","fileCount":31,"integrity":"sha512-LG0o1rYCEASJE4HfgFCQ87s+z2ly7iKWTqrsyBujUB/WnjYwR5M3EaLFDgfwlAIyZTueLRBI3LQ00uxs9f6W1g==","signatures":[{"sig":"MEUCIFnlk+i2vdL8KCEljwS6uY/wVveu1pat8WQmiew6kcKSAiEAmjQgkabx/5Bup0DGDHu3E4+Kh3ExaJH5NdSxxPKRj2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnl4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrlkxAAi3KII6ZRQ4b6kYfy8aXUKaoFxd3qXZCnLdp2eU7s3/T/4TLv\r\nkl0jjz1eqb5j2d2uum+sjEQdW1zrSNhtMY1b0cjmtpYEMpgNCY1u8Lp8SNYX\r\nOHUg/JoPHv5NZ5wlgf5ga0THL1YACxYOye5gqNPkCpve7jHnEJx02yIZEo8Z\r\nVfCLOrR4/wzt1p0t+Eed/Ahefhqu0F8uVvDza5dwF3/ilBLZltgChsGXdBmx\r\nNt6YmclTNmPA7LZ2L20PZEMcDqGBwCnevuFnF4p87/caizEGafNR4LSNjp7W\r\np9+WvwssveGI2YGz/QeLFj0PqvS9s7hOlS2arMJjtaIwMqK0NbHbXneORpy1\r\nLOtnRePuIWrHCs4uxcbvswawLog1ULn2RMTtu80E9pKwVbbOzExHTyRuCmSZ\r\nbEL+GnUOIUfeCK9z42toSIJ7Sw+5E7v4STJLixuXqox1iW8CLwCPROeIz1IL\r\nBxu0HBItNn76dBc7/QZRfeog0uj2Yyajwo0CmOaGTQhLPcaChRgrcITDBPy2\r\nsDJZWyhmV7C26p/RiJruHXV8EXO8MiFVMCMVCpk54FSFIemBLvK6yeLpmoW5\r\nnZ0lGovGTndqBWMcuTrZtsMz1dXlt6FRo5hF/6q/01d761FS2qzmJuL00SAH\r\nXlPFsZ5lzYFc6KpqjLqaN5JtAzuCfP72aVc=\r\n=t9Vf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"b9ef54594aa8f93612aed085460f035d0aba61bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/rtl":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/shape":"15.0.0-canary.736b7fda4.0","@material/theme":"15.0.0-canary.736b7fda4.0","@material/button":"15.0.0-canary.736b7fda4.0","@material/ripple":"15.0.0-canary.736b7fda4.0","@material/tokens":"15.0.0-canary.736b7fda4.0","@material/elevation":"15.0.0-canary.736b7fda4.0","@material/typography":"15.0.0-canary.736b7fda4.0","@material/feature-targeting":"15.0.0-canary.736b7fda4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.736b7fda4.0_1683126647773_0.4524807764133887","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/banner","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0e533c5a1.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ef099b445745b3540280c0dd1ed3317a15612596","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0e533c5a1.0.tgz","fileCount":31,"integrity":"sha512-cZ24bA0d4rHI8Hrdd0H06WTFrPDduOiu9tgs1uZRunV+TogPf0OlmpDqCaeLqO6JgsLumo1t9QPxE6lWwpAM0Q==","signatures":[{"sig":"MEQCIGEpKbQHlNHv/U1Ywwsne6builDiEgsBcvQ05vv4zLiuAiB/p+CA6SlIXlspSywo2u80r1BrmdOLcp9aMkOJHqg2Eg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6b9b4497cc6457c9e92ab3abdaad626c73e610a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/rtl":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/shape":"15.0.0-canary.0e533c5a1.0","@material/theme":"15.0.0-canary.0e533c5a1.0","@material/button":"15.0.0-canary.0e533c5a1.0","@material/ripple":"15.0.0-canary.0e533c5a1.0","@material/tokens":"15.0.0-canary.0e533c5a1.0","@material/elevation":"15.0.0-canary.0e533c5a1.0","@material/typography":"15.0.0-canary.0e533c5a1.0","@material/feature-targeting":"15.0.0-canary.0e533c5a1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0e533c5a1.0_1683305865952_0.9781148894432778","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/banner","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5f01c15a2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2ec846daa4994233772deb694628c92311881296","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5f01c15a2.0.tgz","fileCount":31,"integrity":"sha512-fkf7DReeEsfRiAzATJkE/8M1b+itJ51DMoN1r/otYuLLUlzf8jHfjcFTYQAUthFXZ1y7Tmw9jDAWBDuCY8sphQ==","signatures":[{"sig":"MEUCIQD/fMOIaG45V9T0BsiA7Fg/dS7nzvbROgBiHzIRDumMuwIgB6m0DF9HaQZsBZ7uuu1mIbm2D+o5SKGB0qcuf6Fz3Dg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7bb1c5dfc575b36654ae046d1f4ab3b27e8c8f9d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/rtl":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/shape":"15.0.0-canary.5f01c15a2.0","@material/theme":"15.0.0-canary.5f01c15a2.0","@material/button":"15.0.0-canary.5f01c15a2.0","@material/ripple":"15.0.0-canary.5f01c15a2.0","@material/tokens":"15.0.0-canary.5f01c15a2.0","@material/elevation":"15.0.0-canary.5f01c15a2.0","@material/typography":"15.0.0-canary.5f01c15a2.0","@material/feature-targeting":"15.0.0-canary.5f01c15a2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5f01c15a2.0_1683307647377_0.3225036745563292","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/banner","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3b5b55e31.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"835a25de83b272d355d0bec0ef45b921aaf49340","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3b5b55e31.0.tgz","fileCount":31,"integrity":"sha512-m9zvT8heoKc0sTTJLzx6oWGnEfDkEaQW3UounjmEDwVc/PtiqmZ5qIzdXIseI+sIcFw7poJiyvTHjNrbLbPeiw==","signatures":[{"sig":"MEUCIQCRsFyOuClyB1EsXqlBIx6XxDtTq0EXU8voLrZc+lFnoAIgcSFI/xMUUrXGRQhYLMOpfGkvSGreXHQRbFvHGnokEWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"c262d9ee39655e869886d1584551a096ae56dabc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/rtl":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/shape":"15.0.0-canary.3b5b55e31.0","@material/theme":"15.0.0-canary.3b5b55e31.0","@material/button":"15.0.0-canary.3b5b55e31.0","@material/ripple":"15.0.0-canary.3b5b55e31.0","@material/tokens":"15.0.0-canary.3b5b55e31.0","@material/elevation":"15.0.0-canary.3b5b55e31.0","@material/typography":"15.0.0-canary.3b5b55e31.0","@material/feature-targeting":"15.0.0-canary.3b5b55e31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3b5b55e31.0_1683312029722_0.5948667219474382","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/banner","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d0788120f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb1218fe570229c6a48f49bf8598061ae082ccbb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d0788120f.0.tgz","fileCount":31,"integrity":"sha512-/rrkDjBQ6vd/S6jU5SR6HCwhMfVF18DZ8eV5pGYjPlGiMw2Z5qzu09N/G9iqw2p9ncRDNNSHEHiAzq0AVKl2WQ==","signatures":[{"sig":"MEUCIQD/xkaOvsWsKIeRdcQAKgnqDwHDzTW/vPTz7gPKRcFL3wIgRcei3e8otn4Rr3nErO52OsXpqCCt9AJUGO1RR+ElVzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7eccbee262206623b89c40dadb4e11abe30d5e45","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/rtl":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/shape":"15.0.0-canary.d0788120f.0","@material/theme":"15.0.0-canary.d0788120f.0","@material/button":"15.0.0-canary.d0788120f.0","@material/ripple":"15.0.0-canary.d0788120f.0","@material/tokens":"15.0.0-canary.d0788120f.0","@material/elevation":"15.0.0-canary.d0788120f.0","@material/typography":"15.0.0-canary.d0788120f.0","@material/feature-targeting":"15.0.0-canary.d0788120f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d0788120f.0_1683620666703_0.13463062581553076","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/banner","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f52358dd0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"33a9e2264134438247d5cf0c3e9fc5a6921f8913","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f52358dd0.0.tgz","fileCount":31,"integrity":"sha512-cYmJWpQL5cCZtV0ongCqBLv55jsI+A7kve4hgpNV6YCQtOz9i49cOsMgkQKMKygy0x2oO9T6HkP8T/1ZjTToYg==","signatures":[{"sig":"MEYCIQDLoxsexTEGWdBM5WmF8udDBh4jsg/i4mDpbfMCRJMnqAIhAOIDK4buej6awM+DbjUDM5u/92qqYJZDOPVS2pnD3XVm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789282},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a4baf07a9736a6e1fa40001f7198ae1865d67392","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/rtl":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/shape":"15.0.0-canary.f52358dd0.0","@material/theme":"15.0.0-canary.f52358dd0.0","@material/button":"15.0.0-canary.f52358dd0.0","@material/ripple":"15.0.0-canary.f52358dd0.0","@material/tokens":"15.0.0-canary.f52358dd0.0","@material/elevation":"15.0.0-canary.f52358dd0.0","@material/typography":"15.0.0-canary.f52358dd0.0","@material/feature-targeting":"15.0.0-canary.f52358dd0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f52358dd0.0_1683901900329_0.3829601512066403","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/banner","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.576d3d2c8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"12eda70f0813a2df2794fcdebe44c4fcada549cb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.576d3d2c8.0.tgz","fileCount":31,"integrity":"sha512-/tV7PDwmWMLQbyLjN2kuJvkAK2HyVCrmnd9ftcBoR02HGQ6uHGPiJYsP8Xw/ueBdpix2gM9ujtD6Vqby/Y6vMg==","signatures":[{"sig":"MEQCICZWtgtHfP35rpFiMLDrsuLz5xXl4ALeOlI3NwNHUfiuAiBeZeXPdhnsHCg9jNOB+QyJmH5P/XFc2S0098EeerP6vQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6ace19a21b6654f14cad48fc007198859874c910","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/rtl":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/shape":"15.0.0-canary.576d3d2c8.0","@material/theme":"15.0.0-canary.576d3d2c8.0","@material/button":"15.0.0-canary.576d3d2c8.0","@material/ripple":"15.0.0-canary.576d3d2c8.0","@material/tokens":"15.0.0-canary.576d3d2c8.0","@material/elevation":"15.0.0-canary.576d3d2c8.0","@material/typography":"15.0.0-canary.576d3d2c8.0","@material/feature-targeting":"15.0.0-canary.576d3d2c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.576d3d2c8.0_1684202472474_0.40471725162418437","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/banner","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.19bb36a46.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f3dde3c7379ec6a0fd32c4dafa7bac9216d9a8a1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.19bb36a46.0.tgz","fileCount":31,"integrity":"sha512-cuVjKncfwl0agKWTsANFAENT0fqriNhjng7114SIam8NYgippI9I6S6zPSIbPmK/KApQ6m+41SiUAr0ow0tudQ==","signatures":[{"sig":"MEYCIQCxj5febfNHUHh3fVJ6OJV2D57BLgFVbuAp4q33qSHFnwIhAPb7QUn95o9l/s5qlDv1WzVNaRDWHYviMQ1dp6l1gslh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"75157be315eeaa02f70ed69f97e44a7d40d53e42","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/rtl":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/shape":"15.0.0-canary.19bb36a46.0","@material/theme":"15.0.0-canary.19bb36a46.0","@material/button":"15.0.0-canary.19bb36a46.0","@material/ripple":"15.0.0-canary.19bb36a46.0","@material/tokens":"15.0.0-canary.19bb36a46.0","@material/elevation":"15.0.0-canary.19bb36a46.0","@material/typography":"15.0.0-canary.19bb36a46.0","@material/feature-targeting":"15.0.0-canary.19bb36a46.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.19bb36a46.0_1684266913379_0.3450164840017871","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/banner","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.aa5ac7fe5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"708cb40a5f4370ee6566c73ce74f1f23dfc253df","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":31,"integrity":"sha512-bi3cucLmDAdUBPzRgZFXr7hnyTaLc3JcBIbtG60Vokzu7zWazMxNvq+UT89ez/iUDSyUC6LNqVMdO5eV84r6QA==","signatures":[{"sig":"MEUCIQDKZ2UFXKAA6O4NSnE/rULtQrxOm3dFMEBZPsPYyLwEDQIgH6bKATLdWbbsFGZ6tO8n3NoFsT7g5gkNvNlF4Rb2sjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"83e86542dd6facc8ffe487d31111412ee18b5bde","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/rtl":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/shape":"15.0.0-canary.aa5ac7fe5.0","@material/theme":"15.0.0-canary.aa5ac7fe5.0","@material/button":"15.0.0-canary.aa5ac7fe5.0","@material/ripple":"15.0.0-canary.aa5ac7fe5.0","@material/tokens":"15.0.0-canary.aa5ac7fe5.0","@material/elevation":"15.0.0-canary.aa5ac7fe5.0","@material/typography":"15.0.0-canary.aa5ac7fe5.0","@material/feature-targeting":"15.0.0-canary.aa5ac7fe5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.aa5ac7fe5.0_1684776424392_0.0494590154111727","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/banner","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.90291f2e2.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"56e763d27274f103b91f525968e90f81bd45938a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.90291f2e2.0.tgz","fileCount":31,"integrity":"sha512-mVtGop9rBXRD6UYkMD7y+OJwd3MA73w7BJ/oJIKFij2q2fn/5hZba6vQ6d6YGUGv+iJPP/S/HaiMQuRE5yyoqA==","signatures":[{"sig":"MEUCIQDmX8jYmW50TjG1ZONNxo8CL3GWDuxIBjQt9CVzdyWj5QIgX/XORdkYn2vTNRG6iyNKvh3OJW5vJ2glaMEl4J/vtwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a1c306471717b15ae8f0b481703ed1b46162df25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/rtl":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/shape":"15.0.0-canary.90291f2e2.0","@material/theme":"15.0.0-canary.90291f2e2.0","@material/button":"15.0.0-canary.90291f2e2.0","@material/ripple":"15.0.0-canary.90291f2e2.0","@material/tokens":"15.0.0-canary.90291f2e2.0","@material/elevation":"15.0.0-canary.90291f2e2.0","@material/typography":"15.0.0-canary.90291f2e2.0","@material/feature-targeting":"15.0.0-canary.90291f2e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.90291f2e2.0_1684863847426_0.5294823603252827","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/banner","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.446734f27.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b6a75d3493752bdad529c591da4403312d9b93d8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.446734f27.0.tgz","fileCount":31,"integrity":"sha512-U6QinfolVB+q/Asv8NujPAv2PbdPOmsXo4+aPgwTGC7BnRD8aRTB5d2LLHrvva3/nfveEmap+7qOKEZ0nmlfDQ==","signatures":[{"sig":"MEYCIQD6yWN5lnwASqhyJt9L9uZ8n3Jm1uEVmJAZZAevqEjHyAIhAPIOsqP67N+DfXhTMwm6KXgMIoPBRamhzhXSejP4Al1H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a2536a849aada5f06aa85deaa7be06f44f620023","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/rtl":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/shape":"15.0.0-canary.446734f27.0","@material/theme":"15.0.0-canary.446734f27.0","@material/button":"15.0.0-canary.446734f27.0","@material/ripple":"15.0.0-canary.446734f27.0","@material/tokens":"15.0.0-canary.446734f27.0","@material/elevation":"15.0.0-canary.446734f27.0","@material/typography":"15.0.0-canary.446734f27.0","@material/feature-targeting":"15.0.0-canary.446734f27.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.446734f27.0_1685483364012_0.4826589679921267","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/banner","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.19de312d8.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"da13287426707989987867a35a9a081ade874ea5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.19de312d8.0.tgz","fileCount":31,"integrity":"sha512-bGGB7jbITA5fBEg0MwThA5fl736YbbxCcs7Hdx3qoYfZZjiF9nnPcXGVRn+nKyuP0yrHmy5Cn4kF9s98gz0IVQ==","signatures":[{"sig":"MEUCIQC7Y6u46TMlUwadDeLb0lAtWTl9PRbxRuAzj6LtESA3pwIgL2NxwbsSKYYsb7FgFttIrjOGtU5rbMNSwg2D6+3GFtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"dc3811573a34ccafa5c09bcf14574bfb95373958","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/rtl":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/shape":"15.0.0-canary.19de312d8.0","@material/theme":"15.0.0-canary.19de312d8.0","@material/button":"15.0.0-canary.19de312d8.0","@material/ripple":"15.0.0-canary.19de312d8.0","@material/tokens":"15.0.0-canary.19de312d8.0","@material/elevation":"15.0.0-canary.19de312d8.0","@material/typography":"15.0.0-canary.19de312d8.0","@material/feature-targeting":"15.0.0-canary.19de312d8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.19de312d8.0_1686071980459_0.5031695461915782","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/banner","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6081d829b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"73b6b25d3d11db0776ea7f96283f2cd6a758b734","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6081d829b.0.tgz","fileCount":31,"integrity":"sha512-98wn2/DvkTG9zaNJ2qbt6LjczZ1cNeNWC8PzXaoZ7YBwTJoqIkQBzLRLVHVct8SEJrtG7KgDD9WF0/ctB9cROw==","signatures":[{"sig":"MEQCIHrX88JAKRTXLM72LCdaZpq1wky69dCMQIkasluUxyceAiBksaBzwwEE5zRtOx7BVMpt3fNwJ8+FRltD8EptzOBaKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"033569cc4deafe32dad2bf8cbd1de8789bc85668","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/rtl":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/shape":"15.0.0-canary.6081d829b.0","@material/theme":"15.0.0-canary.6081d829b.0","@material/button":"15.0.0-canary.6081d829b.0","@material/ripple":"15.0.0-canary.6081d829b.0","@material/tokens":"15.0.0-canary.6081d829b.0","@material/elevation":"15.0.0-canary.6081d829b.0","@material/typography":"15.0.0-canary.6081d829b.0","@material/feature-targeting":"15.0.0-canary.6081d829b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6081d829b.0_1686100515124_0.3698393808489546","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/banner","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b26c34a68.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4b926a78d1dfc5e0cb8e70da84e56a662268c8a5","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b26c34a68.0.tgz","fileCount":31,"integrity":"sha512-8PiNrCvwdv8Tog0ChovioGmRBgGzIJpXAkHeOz5pihK3qws2apGgYdndvpH2fB2mWPXbAFbpiwDqJtxmqBySOA==","signatures":[{"sig":"MEUCIFwOFWen0FOKg4CX5Wz4uyqvYsmkmXOevmi4tX3lTMhyAiEA7dRuSlEdE35N6BoWUOeqFDH1FkRLn5a0ll+UJZMDrwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"28919516866e588c52e4e6358c3c4d2523993b74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/rtl":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/shape":"15.0.0-canary.b26c34a68.0","@material/theme":"15.0.0-canary.b26c34a68.0","@material/button":"15.0.0-canary.b26c34a68.0","@material/ripple":"15.0.0-canary.b26c34a68.0","@material/tokens":"15.0.0-canary.b26c34a68.0","@material/elevation":"15.0.0-canary.b26c34a68.0","@material/typography":"15.0.0-canary.b26c34a68.0","@material/feature-targeting":"15.0.0-canary.b26c34a68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b26c34a68.0_1686169177107_0.5661968637061598","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/banner","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4fe911371.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a354a829224e25d7128ebe6f3e0119fa5a1458e4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4fe911371.0.tgz","fileCount":31,"integrity":"sha512-xkt66TN0g3xU/jrXGdD6z/dGeyOo9M2MyLCsPRzyLUVtqJArlR/UOrNqAXlKyl/Mhf+/ZIgViq4BIg0f613SNA==","signatures":[{"sig":"MEQCIBTEmvu5cjEj5fRBkyD9x9/R58TABJwOTJHzeW7EBLkAAiAtyaHL/6EvHuKvg1q+C9+ZImjS53q+euBtAsJrWk24nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"a9de53a24d5e0f79f94310f061cdf2ab718df7f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/rtl":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/shape":"15.0.0-canary.4fe911371.0","@material/theme":"15.0.0-canary.4fe911371.0","@material/button":"15.0.0-canary.4fe911371.0","@material/ripple":"15.0.0-canary.4fe911371.0","@material/tokens":"15.0.0-canary.4fe911371.0","@material/elevation":"15.0.0-canary.4fe911371.0","@material/typography":"15.0.0-canary.4fe911371.0","@material/feature-targeting":"15.0.0-canary.4fe911371.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4fe911371.0_1686179237256_0.25586537877409565","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/banner","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a9ff9866f.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10ddf646c07e9341072c60fe93f2e2df156d8d3e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a9ff9866f.0.tgz","fileCount":31,"integrity":"sha512-Bh0hZZk3rk7JC9halvwrd8Xzm16ZZ+iZmSVSDuePBC3rBGY5kisj+EOk4bwLU3FMe2K4tjvkTB/98DcntmtUvw==","signatures":[{"sig":"MEQCIBeZ5Yv7bQLcj+KPM92cLz5YGneNAfWXW2Tmzld/cLUcAiAG925TYCLLU5I/qQclYJcLpejxKxeVkgsQ3jf42MQ8TQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5bed0ec6cdad0c38b52e8ac98994b2809d9c8f50","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/rtl":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/shape":"15.0.0-canary.a9ff9866f.0","@material/theme":"15.0.0-canary.a9ff9866f.0","@material/button":"15.0.0-canary.a9ff9866f.0","@material/ripple":"15.0.0-canary.a9ff9866f.0","@material/tokens":"15.0.0-canary.a9ff9866f.0","@material/elevation":"15.0.0-canary.a9ff9866f.0","@material/typography":"15.0.0-canary.a9ff9866f.0","@material/feature-targeting":"15.0.0-canary.a9ff9866f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a9ff9866f.0_1686656366728_0.5304893502069308","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/banner","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b994146f6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"ea44f06cc34a4d9f5a8a0c818a14ad1023d1cf75","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b994146f6.0.tgz","fileCount":31,"integrity":"sha512-gJ4/VdP4dJgHP72Kdjy2f/UjHB45J4CuxoGvI0NIQYUjOSsr4kQiQHsjVgyEPZR/5wa7kBhM7/0mJ+zF7Ghv2A==","signatures":[{"sig":"MEQCIA2voFercBbAV6/5uWoJ6yloX/D7t8k8KZ8UHz3LeIWOAiB4hQUblfZUrX+phHV+ifP4rfsADKhkNnkqijs8evFWeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e537228a5d88e4fb9c651aa15b1d56bd81bc63bd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/rtl":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/shape":"15.0.0-canary.b994146f6.0","@material/theme":"15.0.0-canary.b994146f6.0","@material/button":"15.0.0-canary.b994146f6.0","@material/ripple":"15.0.0-canary.b994146f6.0","@material/tokens":"15.0.0-canary.b994146f6.0","@material/elevation":"15.0.0-canary.b994146f6.0","@material/typography":"15.0.0-canary.b994146f6.0","@material/feature-targeting":"15.0.0-canary.b994146f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b994146f6.0_1686776702250_0.7440717821104976","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/banner","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1fb4b1a06.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a9d9498d3b9c89fbe1e6ccf486f819605fa3c5d3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":31,"integrity":"sha512-2I55TzxmFGdHWA0gqhwR4J1iDIwaQBEXtdYMr0pfVQT/0np/eLcgJtgitlDh+m2Mk5RcXVeuO8ACJCZ8p8VR5A==","signatures":[{"sig":"MEYCIQCArvxxTgIqxVPPINwXV5dk4YqOMqXlOmRiJhPfqyhLIwIhAOHYwXbEW9g2DxTjjoDd6stlWpo9SL/dY9K7Z1pagbrR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1d1b86822f3fc9f22a5fdfc1c381d5a4ae983829","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/rtl":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/shape":"15.0.0-canary.1fb4b1a06.0","@material/theme":"15.0.0-canary.1fb4b1a06.0","@material/button":"15.0.0-canary.1fb4b1a06.0","@material/ripple":"15.0.0-canary.1fb4b1a06.0","@material/tokens":"15.0.0-canary.1fb4b1a06.0","@material/elevation":"15.0.0-canary.1fb4b1a06.0","@material/typography":"15.0.0-canary.1fb4b1a06.0","@material/feature-targeting":"15.0.0-canary.1fb4b1a06.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1fb4b1a06.0_1687892312564_0.04468430978976534","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/banner","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c64a2776e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"154509fd4c7fb10afd69fe34ba4c6097e296b00e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c64a2776e.0.tgz","fileCount":31,"integrity":"sha512-yXZyFHVcR3j6KQLjj/2DA/DfkiUztBC6dq9CJBwjDkJDTC9SfUFzSCQxn9IPHeoA8EqyQkbmzYOfOJeYGfo0fg==","signatures":[{"sig":"MEYCIQCmpIz0W+66t/fWWyDVOkxBJ+XA33/WIKRYEJ1QGaLjtwIhAKFEHD/bqj5TVrjgcpjsSQ3Wy17xm2q/q5BxuviSKdol","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"271b0c446646af573f67960820b6b2a86a9bda88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/rtl":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/shape":"15.0.0-canary.c64a2776e.0","@material/theme":"15.0.0-canary.c64a2776e.0","@material/button":"15.0.0-canary.c64a2776e.0","@material/ripple":"15.0.0-canary.c64a2776e.0","@material/tokens":"15.0.0-canary.c64a2776e.0","@material/elevation":"15.0.0-canary.c64a2776e.0","@material/typography":"15.0.0-canary.c64a2776e.0","@material/feature-targeting":"15.0.0-canary.c64a2776e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c64a2776e.0_1687897078573_0.5693638224816717","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/banner","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.b05d9eb7c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"22d62103a4e08e07a131e9040e4219463aa90483","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":31,"integrity":"sha512-FVzjJkH3gFr5ov36Qp+sPkDglswD0DW1njInrVbx7gVdLh7jZ30yG0eZ/WG1CLlKRWIdkaVUuEG5kwbdQqF4hA==","signatures":[{"sig":"MEYCIQDdsaUYUHpzDaPksVUZxfm9iNKet1lO8nUJP8Q3GmI/MwIhAPUuQ9Q0U2XNhvJQo9CiK+mtEvmuZG/9hrU5KIFKse0F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"854245f23fe0f7b3dd1163ecefd940b26718c134","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/rtl":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/shape":"15.0.0-canary.b05d9eb7c.0","@material/theme":"15.0.0-canary.b05d9eb7c.0","@material/button":"15.0.0-canary.b05d9eb7c.0","@material/ripple":"15.0.0-canary.b05d9eb7c.0","@material/tokens":"15.0.0-canary.b05d9eb7c.0","@material/elevation":"15.0.0-canary.b05d9eb7c.0","@material/typography":"15.0.0-canary.b05d9eb7c.0","@material/feature-targeting":"15.0.0-canary.b05d9eb7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.b05d9eb7c.0_1688055900934_0.9600182593858175","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/banner","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2a9697dc5.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7e55a9157f30b727f510bd69164138a77598216a","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2a9697dc5.0.tgz","fileCount":31,"integrity":"sha512-UUOtT2j/AXkMEr+fiEhgZz+cIxliCvSbH2htGJburwj73YRzBctidKM5sYxU9tjYhvTNuuLZzwq7mkK4xv77XQ==","signatures":[{"sig":"MEUCIQD26T1Z/C7zadwxGDt+15QlNTDnDSoeOhISlTuafaXBrwIgLhFALdmUbnP+BxKf+wAkzd5RZd5guEBK5OqPdeQrz1U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"fad1e5223c83a5b7a83a6ef81f7ebdc83a85672a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/rtl":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/shape":"15.0.0-canary.2a9697dc5.0","@material/theme":"15.0.0-canary.2a9697dc5.0","@material/button":"15.0.0-canary.2a9697dc5.0","@material/ripple":"15.0.0-canary.2a9697dc5.0","@material/tokens":"15.0.0-canary.2a9697dc5.0","@material/elevation":"15.0.0-canary.2a9697dc5.0","@material/typography":"15.0.0-canary.2a9697dc5.0","@material/feature-targeting":"15.0.0-canary.2a9697dc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2a9697dc5.0_1688163306394_0.5863968312073782","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/banner","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0c52adeab.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f19387870604dd70e0d2243cb9abf604afc18ac9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0c52adeab.0.tgz","fileCount":31,"integrity":"sha512-Qr1/kDhbhMv5YY6HjlR6Wti1u67z+DUMlObPjWVoC7LJRVli9qkis1+mSyIl60KvArMpcyss2/tI+xrkOSp0xw==","signatures":[{"sig":"MEUCIQDORRYyunoDHX2qfdRIEq84gZ+Bz8d6f9RU8so5ALjZgAIgKoACL1nZQZLXB8KMClC3KAKbO8uKQDtTInEN4u5+4Hk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"972024dd57885ff944ec073de0cd956353bfa7e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/rtl":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/shape":"15.0.0-canary.0c52adeab.0","@material/theme":"15.0.0-canary.0c52adeab.0","@material/button":"15.0.0-canary.0c52adeab.0","@material/ripple":"15.0.0-canary.0c52adeab.0","@material/tokens":"15.0.0-canary.0c52adeab.0","@material/elevation":"15.0.0-canary.0c52adeab.0","@material/typography":"15.0.0-canary.0c52adeab.0","@material/feature-targeting":"15.0.0-canary.0c52adeab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0c52adeab.0_1688574428602_0.2246383982558242","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/banner","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.83355c322.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"fe0b3ebd800975dd9ce868d4b269261a46bdd6c2","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.83355c322.0.tgz","fileCount":31,"integrity":"sha512-oNZcid9Xgc2+OsdBZ4uwPGA229s2mnQMnU6nMW2suG/23q/CPkNNj8nV4WGLP2Svo+8kDh3oH1f+B2G70AGL4w==","signatures":[{"sig":"MEUCIQCoIEVOe3XAD78d0T2Us28Fncck9BneeFQHn7C74bjb8AIgMoRXsOfRoqzmZYnAOxRn2zmcFobEcpg6NtS9p7JSqN0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"173401c2dd65fb3babae5b8e998c0a0032ff819d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/rtl":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/shape":"15.0.0-canary.83355c322.0","@material/theme":"15.0.0-canary.83355c322.0","@material/button":"15.0.0-canary.83355c322.0","@material/ripple":"15.0.0-canary.83355c322.0","@material/tokens":"15.0.0-canary.83355c322.0","@material/elevation":"15.0.0-canary.83355c322.0","@material/typography":"15.0.0-canary.83355c322.0","@material/feature-targeting":"15.0.0-canary.83355c322.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.83355c322.0_1689001618245_0.42618187171141186","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/banner","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.bc9ae6c9c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"5b1053ebc4a07bfb5f92f6b457e87cd15ed6ebf7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":31,"integrity":"sha512-SHeVoidCUFVhXANN6MNWxK9SZoTSgpIP8GZB7kAl52BywLxtV+FirTtLXkg/8RUkxZRyRWl7HvQ0ZFZa7QQAyA==","signatures":[{"sig":"MEUCIBh6pfkAiBGjqcgr0OrXbi7+mYdHnwPPBLdEfP0cVBqDAiEAtmcUQ4nihU99G6Ph0AeniAh4Vo07xQm0hXNDHurk+Bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"9f0b9b80c267d99daa258e635481fecc4cbf0acd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/rtl":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/shape":"15.0.0-canary.bc9ae6c9c.0","@material/theme":"15.0.0-canary.bc9ae6c9c.0","@material/button":"15.0.0-canary.bc9ae6c9c.0","@material/ripple":"15.0.0-canary.bc9ae6c9c.0","@material/tokens":"15.0.0-canary.bc9ae6c9c.0","@material/elevation":"15.0.0-canary.bc9ae6c9c.0","@material/typography":"15.0.0-canary.bc9ae6c9c.0","@material/feature-targeting":"15.0.0-canary.bc9ae6c9c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.bc9ae6c9c.0_1691097767556_0.5197501873687547","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/banner","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.3c44cd956.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eb650247e371316a9b750e2a24fc106b562b1673","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.3c44cd956.0.tgz","fileCount":31,"integrity":"sha512-5pV6G1xApHpxR9oe9kKR+3uQwiYFpez2auklM8mNFGk3284SprmAuvC9L8oth4J5p9dEIiVTL0g/++SZx047wg==","signatures":[{"sig":"MEUCIQDyUap5Ia39DpzadbfRqTwm47Aaf8xt8wYDhRH4XtwbEAIgMkWjtSrCH3TyrWvUSiR3GK35+InigswSBGffJqAxwDM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6e39da189328fcabc7040a629e312efe5f7cea80","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/rtl":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/shape":"15.0.0-canary.3c44cd956.0","@material/theme":"15.0.0-canary.3c44cd956.0","@material/button":"15.0.0-canary.3c44cd956.0","@material/ripple":"15.0.0-canary.3c44cd956.0","@material/tokens":"15.0.0-canary.3c44cd956.0","@material/elevation":"15.0.0-canary.3c44cd956.0","@material/typography":"15.0.0-canary.3c44cd956.0","@material/feature-targeting":"15.0.0-canary.3c44cd956.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.3c44cd956.0_1691430569971_0.47837682447707985","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/banner","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.02702296e.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a324b2abdef65e58bea84dc4913cb44859208f1","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.02702296e.0.tgz","fileCount":31,"integrity":"sha512-g5IHI2hjWw+g1RSVy8uoQV8h++6vZo4S9sisFkAkOgTUemHk2oZM76eR3mBq9AiB0u/fjD9iDSl+uypeHporEA==","signatures":[{"sig":"MEQCIGW072PvhZPRs9MRQidPR5wOZAl0zcPAb60FbIxcgGLsAiBuv7qTiJR5B2SeOQc3cU0LpF12W5IU2C1EtCpHteYXiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"22335673bc742932498b2538321ed9dcfd692879","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/rtl":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/shape":"15.0.0-canary.02702296e.0","@material/theme":"15.0.0-canary.02702296e.0","@material/button":"15.0.0-canary.02702296e.0","@material/ripple":"15.0.0-canary.02702296e.0","@material/tokens":"15.0.0-canary.02702296e.0","@material/elevation":"15.0.0-canary.02702296e.0","@material/typography":"15.0.0-canary.02702296e.0","@material/feature-targeting":"15.0.0-canary.02702296e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.02702296e.0_1692965183576_0.015028179283665732","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/banner","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.872b65832.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b50ca8de66e534aeec3564aa21d7f8434fdf5c99","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.872b65832.0.tgz","fileCount":31,"integrity":"sha512-GCDCE1UzPDjYttaSQrImEZHEd2U0UzHTm5qSh3StU0LavTFGGiN8GleMiIVsJgWvUihChyR6PH9nAWIOBZ8nqg==","signatures":[{"sig":"MEQCICxzJTw2BwbKxQ7bIfSCgxAXNJuprUQyRBoIjsRNtot/AiA/KYIJeYsUu6Zk4iMAewmO85Y0gcroOInWA8gqMm36Ow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"be0901c091f812355b2d192c49bd051d8daf7a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/rtl":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/shape":"15.0.0-canary.872b65832.0","@material/theme":"15.0.0-canary.872b65832.0","@material/button":"15.0.0-canary.872b65832.0","@material/ripple":"15.0.0-canary.872b65832.0","@material/tokens":"15.0.0-canary.872b65832.0","@material/elevation":"15.0.0-canary.872b65832.0","@material/typography":"15.0.0-canary.872b65832.0","@material/feature-targeting":"15.0.0-canary.872b65832.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.872b65832.0_1693397694069_0.7654006360109655","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/banner","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.89b2e4122.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1450a685d778c3a7c7cb40d968b72f9f20a70b84","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.89b2e4122.0.tgz","fileCount":31,"integrity":"sha512-1QXk994fsAwKQc9K1Xt+J+q6b/m4uWRvilSzugYLH4IkLPULXH1VkwxCLQahxc3RdG3tuWJLteMiGuaSZ+Q5Aw==","signatures":[{"sig":"MEUCIBd5fHUQG1B6oaPdxKHIG6AzgqyTQKA18FiaUDu/Ck2PAiEAkHV/UQoc3fNMvArk21qTWRWyD6O372zZKQlnEj/KRIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":789264},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"68bd55db9489546e515443239f477836e16db19b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/rtl":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/shape":"15.0.0-canary.89b2e4122.0","@material/theme":"15.0.0-canary.89b2e4122.0","@material/button":"15.0.0-canary.89b2e4122.0","@material/ripple":"15.0.0-canary.89b2e4122.0","@material/tokens":"15.0.0-canary.89b2e4122.0","@material/elevation":"15.0.0-canary.89b2e4122.0","@material/typography":"15.0.0-canary.89b2e4122.0","@material/feature-targeting":"15.0.0-canary.89b2e4122.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.89b2e4122.0_1693498090234_0.21183706085492293","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/banner","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7a3942e7a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"10e177dba5a08743596d0d34bd566d7b403431de","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7a3942e7a.0.tgz","fileCount":31,"integrity":"sha512-TbMphYg+JX8Wt9c523o3mLv4hN23RRgp6GVSY+UVkyHZuiQlAJTmpExjLYVtta54sP1dv05DdOF7/4cCeqLEfA==","signatures":[{"sig":"MEUCIQC0at5WXfTMA3jsa/7mif+GjHGRew0l9PBl4iHgGlPohAIgCKlAspnmw1mME+AoMSP7wRQsEBQfMvqFXnoOXGicc2c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":790034},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e61dc0a16a5b376c778548e5a6cecb56f5c5704d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/rtl":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/shape":"15.0.0-canary.7a3942e7a.0","@material/theme":"15.0.0-canary.7a3942e7a.0","@material/button":"15.0.0-canary.7a3942e7a.0","@material/ripple":"15.0.0-canary.7a3942e7a.0","@material/tokens":"15.0.0-canary.7a3942e7a.0","@material/elevation":"15.0.0-canary.7a3942e7a.0","@material/typography":"15.0.0-canary.7a3942e7a.0","@material/feature-targeting":"15.0.0-canary.7a3942e7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7a3942e7a.0_1693507260957_0.5458200967109437","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/banner","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.54feb3020.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"eefb2420e17edc7072c711ea6055d48cee6e159d","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.54feb3020.0.tgz","fileCount":31,"integrity":"sha512-x8T41Gr7/HpIUBGN3siWQG75k520xvM176iLUWodfiEZfh20cyAeFT+dhYtQQCyIzC0XuNQOlMpG+A62J4tajw==","signatures":[{"sig":"MEQCICVklVitlOC5NGOQn/aVFMjj/hqJZbidWv9Zsn8Awr1OAiAO5b7lSuMTTb1oF6/QhLHHFKEvBsmgQLotYTMOMPxKvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792260},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"5dc5cb94463af21f898ddd58cc4d9e4fbf803222","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/rtl":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/shape":"15.0.0-canary.54feb3020.0","@material/theme":"15.0.0-canary.54feb3020.0","@material/button":"15.0.0-canary.54feb3020.0","@material/ripple":"15.0.0-canary.54feb3020.0","@material/tokens":"15.0.0-canary.54feb3020.0","@material/elevation":"15.0.0-canary.54feb3020.0","@material/typography":"15.0.0-canary.54feb3020.0","@material/feature-targeting":"15.0.0-canary.54feb3020.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.54feb3020.0_1694466387411_0.47426418553094063","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/banner","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.6cda3ce8d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b2c2512eca52f131ac9558ebf1e818ae7887f62f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":31,"integrity":"sha512-k3+L+xdVzS8aPvLAopmXOG1UTa+UrEjxV5BrEwCDDQOXUtvRKx4twtvrZOlvdqRgOkmWDIq+BYGwA7xaZTI6/Q==","signatures":[{"sig":"MEUCIAQeqzHNc7KbOq1e8SDl7oF4xDohE98dpUIMb8AK4XwgAiEAje1x1vXDG3iB73GP1Sh9X5mGNgC5ibJ543czj8C8Yu8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":790034},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"adb36c6339e7bf37fe1e8ca96526a9673ca602e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/rtl":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/shape":"15.0.0-canary.6cda3ce8d.0","@material/theme":"15.0.0-canary.6cda3ce8d.0","@material/button":"15.0.0-canary.6cda3ce8d.0","@material/ripple":"15.0.0-canary.6cda3ce8d.0","@material/tokens":"15.0.0-canary.6cda3ce8d.0","@material/elevation":"15.0.0-canary.6cda3ce8d.0","@material/typography":"15.0.0-canary.6cda3ce8d.0","@material/feature-targeting":"15.0.0-canary.6cda3ce8d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.6cda3ce8d.0_1694483194341_0.5306959406432494","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/banner","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.205b20b36.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"183dc3c4d9e2e892f0176255531be59f2fe020c8","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.205b20b36.0.tgz","fileCount":31,"integrity":"sha512-0rR6jzATNIH+IXObBKRfDG6u812Hqqs53C+fIiiz2JMIuF8ZpPmg3XfsDCpUiIQ+zmE3au8H/q+zydcDKTPVMA==","signatures":[{"sig":"MEYCIQDLFpHUIjRwlHenkRqXV09D07jZ2eSrP9vWe6mBb+QzfgIhANwDwXwj/yZLUTiMmlCHjG1OUUVGYN+/86lgNA2pfe5N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792260},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"00fdcf619c34c502844acb0f2485e99595aa138d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/rtl":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/shape":"15.0.0-canary.205b20b36.0","@material/theme":"15.0.0-canary.205b20b36.0","@material/button":"15.0.0-canary.205b20b36.0","@material/ripple":"15.0.0-canary.205b20b36.0","@material/tokens":"15.0.0-canary.205b20b36.0","@material/elevation":"15.0.0-canary.205b20b36.0","@material/typography":"15.0.0-canary.205b20b36.0","@material/feature-targeting":"15.0.0-canary.205b20b36.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.205b20b36.0_1694625582572_0.982168271905054","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/banner","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.22bf82024.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"a5e3c9883aff6ecf636a0858ec426c70dfa2cc08","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.22bf82024.0.tgz","fileCount":31,"integrity":"sha512-MV6HSF5sejpLivN/f+hYJl5MK+tel6Evmz3byHqCwjCE+wXbbxsB+M5cjSxzd/sLD0q5iT1XlA6cfO74x5p8HA==","signatures":[{"sig":"MEYCIQDJ+2RvX0grSochue+Q+njZE1dE/1ayHxFYYNUED13oQwIhAILIkg7q99VMriFU/ugvHPOsfxiZ9MXSvINuv+Uct400","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792260},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"eda4fad2a8a727b69db60b828bd92df7a8956143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/rtl":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/shape":"15.0.0-canary.22bf82024.0","@material/theme":"15.0.0-canary.22bf82024.0","@material/button":"15.0.0-canary.22bf82024.0","@material/ripple":"15.0.0-canary.22bf82024.0","@material/tokens":"15.0.0-canary.22bf82024.0","@material/elevation":"15.0.0-canary.22bf82024.0","@material/typography":"15.0.0-canary.22bf82024.0","@material/feature-targeting":"15.0.0-canary.22bf82024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.22bf82024.0_1695028390309_0.9089342007649548","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/banner","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a246a4439.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e9dfb1063b9746b5420579c7a1cc736c589aba9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a246a4439.0.tgz","fileCount":31,"integrity":"sha512-PBLgH7JEbEpTkLy33oyWXUhIFmSsdOrR6Gn6qIgQRo1qrnk5RSBGW2gEq4Z6793vjxM107gKudDb23E4Fcu4vg==","signatures":[{"sig":"MEYCIQCi3An11wLNQ4fhk/qm6NJLJjkbxl1WONoi0uD+nIq3bAIhAP3go4Mdt0VTKtfsi1Lc3dpajg3FMyCwAm9/Thknq2Zz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792340},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"40201df8b7e53b61aead4acdfa34b48fb1d155b8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/rtl":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/shape":"15.0.0-canary.a246a4439.0","@material/theme":"15.0.0-canary.a246a4439.0","@material/button":"15.0.0-canary.a246a4439.0","@material/ripple":"15.0.0-canary.a246a4439.0","@material/tokens":"15.0.0-canary.a246a4439.0","@material/elevation":"15.0.0-canary.a246a4439.0","@material/typography":"15.0.0-canary.a246a4439.0","@material/feature-targeting":"15.0.0-canary.a246a4439.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a246a4439.0_1695059245593_0.6597805829696339","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/banner","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d153db62b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71ad140ea552177a06c689220118a6a4f5c0752e","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d153db62b.0.tgz","fileCount":31,"integrity":"sha512-ifLcx/4418oHGaAeRG+otbWVxCwNgLSf+VoAhV75fkin4xHDJAPaBv0G7KRE1jfoecZ0yW8IgvykMrRrXNH02w==","signatures":[{"sig":"MEYCIQCxiCyS8p6fCZ4TJCtcoE6VPMmDm1lxyP1AvKhV+kaNHgIhAJA4s1oR+Xd9vCoM23Kas1ncGdSvKeP6X8S6X1LTf1Cm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792340},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4ca05c144c691cd06cd5926fe0bc54818e462202","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/rtl":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/shape":"15.0.0-canary.d153db62b.0","@material/theme":"15.0.0-canary.d153db62b.0","@material/button":"15.0.0-canary.d153db62b.0","@material/ripple":"15.0.0-canary.d153db62b.0","@material/tokens":"15.0.0-canary.d153db62b.0","@material/elevation":"15.0.0-canary.d153db62b.0","@material/typography":"15.0.0-canary.d153db62b.0","@material/feature-targeting":"15.0.0-canary.d153db62b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d153db62b.0_1695150984077_0.3510251710088468","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/banner","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2528c1c3b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3f49f8917707e7aa1ee5297a1a97048b9ec52c63","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2528c1c3b.0.tgz","fileCount":31,"integrity":"sha512-LyoXc7ZbIb84lDz+Pq+FDQZ6dCf255dGfQh6Ysb2FqQ7/4k01X7J+w2YSH4v4XuHHGg3oustW5bUaYxfa5q8Dw==","signatures":[{"sig":"MEUCIQDsgnj+gGNLtzfZgULIdliK5C0MZIsFeGRlTk0LSPOBEgIgI8XrrS8uc/Uu9ylsSPMK9MIY660D1bPSEutAQWeKCEg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792360},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"98b5b57bd5356f48610a254e8c4acff388d5fb7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/rtl":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/shape":"15.0.0-canary.2528c1c3b.0","@material/theme":"15.0.0-canary.2528c1c3b.0","@material/button":"15.0.0-canary.2528c1c3b.0","@material/ripple":"15.0.0-canary.2528c1c3b.0","@material/tokens":"15.0.0-canary.2528c1c3b.0","@material/elevation":"15.0.0-canary.2528c1c3b.0","@material/typography":"15.0.0-canary.2528c1c3b.0","@material/feature-targeting":"15.0.0-canary.2528c1c3b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2528c1c3b.0_1695233280861_0.42784631089729497","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/banner","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.1728a6dcf.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e8000b692caedc9c45d9b77bdc331186948e7744","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.1728a6dcf.0.tgz","fileCount":31,"integrity":"sha512-eIZVNurhQ/Mo+USWwFFNVO2d4XpFjQlsVAanveuJejIdrPZNAsuQCnWH06CIlrEhUpOn16OznLfkyN31gftQXA==","signatures":[{"sig":"MEQCIGjOIU8NWrAqsvK+UCF0nPxK8dpOC43Qzn+D9b2g1dVRAiAaSCFB28yAnb+QF1Fz2N955MF90h5vOr9SI3cHW8DA+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792360},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"3828aedf4f344a948780a69956ca4f069cef3daa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/rtl":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/shape":"15.0.0-canary.1728a6dcf.0","@material/theme":"15.0.0-canary.1728a6dcf.0","@material/button":"15.0.0-canary.1728a6dcf.0","@material/ripple":"15.0.0-canary.1728a6dcf.0","@material/tokens":"15.0.0-canary.1728a6dcf.0","@material/elevation":"15.0.0-canary.1728a6dcf.0","@material/typography":"15.0.0-canary.1728a6dcf.0","@material/feature-targeting":"15.0.0-canary.1728a6dcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.1728a6dcf.0_1695691464684_0.5751454146224146","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/banner","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.ebb636f3d.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"479e1dd53fee25b14219cabbc1ecd31213c65ed9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.ebb636f3d.0.tgz","fileCount":31,"integrity":"sha512-26+TbF51rzA9gYBQ+3dlU3Kiy+1MReeaf+DeLjLO1FHO/X9rxRokaRZekkOnFFnL0KCAejC4smuK3tg+4K77Hw==","signatures":[{"sig":"MEUCIQDABvlQtGSZOCVwrSWIKgft+UcKn323DuNiq2f3VwJPSQIgDhYQnQ8E7bJA6TMUKrzuqDe3F7sMy8q8LiCDCXw3AYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792360},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"6f62607a00dd885ebbe422b247dc4acc1ded22cb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/rtl":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/shape":"15.0.0-canary.ebb636f3d.0","@material/theme":"15.0.0-canary.ebb636f3d.0","@material/button":"15.0.0-canary.ebb636f3d.0","@material/ripple":"15.0.0-canary.ebb636f3d.0","@material/tokens":"15.0.0-canary.ebb636f3d.0","@material/elevation":"15.0.0-canary.ebb636f3d.0","@material/typography":"15.0.0-canary.ebb636f3d.0","@material/feature-targeting":"15.0.0-canary.ebb636f3d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.ebb636f3d.0_1696016732908_0.27580392016194466","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/banner","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c0d21ecc9.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"32961eea6c2e6785c4f8373e2cf48b9ae1e701cf","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":31,"integrity":"sha512-N9v4bww48NAwmj9ZyfNdEJZY8j0KC0482AqoUYFGfiM1CHG75lgXsJbRyjeYbTDH0P5tHYd1iyfuU3F9xql1Ww==","signatures":[{"sig":"MEYCIQDuVSZUA1gUo+C3+j0BykvMOHI+5Uf5OJK1hYHVU2gFKgIhAINtRt921wQd2fzOZ0vBFNhZjR9jWErioKtLCvVAzXWA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":792360},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0a932ea790a12d359ce4ec7c5c4c7aec7edf565d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/rtl":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/shape":"15.0.0-canary.c0d21ecc9.0","@material/theme":"15.0.0-canary.c0d21ecc9.0","@material/button":"15.0.0-canary.c0d21ecc9.0","@material/ripple":"15.0.0-canary.c0d21ecc9.0","@material/tokens":"15.0.0-canary.c0d21ecc9.0","@material/elevation":"15.0.0-canary.c0d21ecc9.0","@material/typography":"15.0.0-canary.c0d21ecc9.0","@material/feature-targeting":"15.0.0-canary.c0d21ecc9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c0d21ecc9.0_1696880277947_0.2809284320118517","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/banner","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.127a44b28.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"3d36a30045c873a9013c0685ccff0a3d40982f33","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.127a44b28.0.tgz","fileCount":31,"integrity":"sha512-E4d60Tz6EcaFuQb8hmgxdzbK0dZzWG62sqjrkHHX5SYnLjny7CLX5I5uO4AgHWv+2Gmphesm8deHx4KlMLytJw==","signatures":[{"sig":"MEYCIQCaULRMbxaZACsxZPZpHTGHFhfWMFH8hJAhZ5UlXuCkOwIhAOAqLQEAbWHLj2fAClEWppy2ymYRKfDHlwsoystcNHbm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":794601},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"88d1fc2c5354e751ea3ab567d26bb1886ee152d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/rtl":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/shape":"15.0.0-canary.127a44b28.0","@material/theme":"15.0.0-canary.127a44b28.0","@material/button":"15.0.0-canary.127a44b28.0","@material/ripple":"15.0.0-canary.127a44b28.0","@material/tokens":"15.0.0-canary.127a44b28.0","@material/elevation":"15.0.0-canary.127a44b28.0","@material/typography":"15.0.0-canary.127a44b28.0","@material/feature-targeting":"15.0.0-canary.127a44b28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.127a44b28.0_1697140908330_0.40938278040332166","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/banner","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.0ad128337.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"24ea7b935f6baf5e4e142a7a62c00adeb4950ea7","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.0ad128337.0.tgz","fileCount":31,"integrity":"sha512-0ZZmB55GPY2lPr2U0UifTFr4n1EhUHzpWRmOByO72+Dq0FG8JQokkYvP+mgz9uEc3yMPFE0XnRjNQc7mbtcFmg==","signatures":[{"sig":"MEQCIGf2AqHFg5wi3EYC+hMb1kRrQ0/luELWXUXFOiSzINqUAiAcoy0cD667jvRXwf0zdMYgpXlHBxhFlvfazmNXAeyAeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":794601},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"bb76f531b61a52aae34c7a1efa45824fd32e49f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/rtl":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/shape":"15.0.0-canary.0ad128337.0","@material/theme":"15.0.0-canary.0ad128337.0","@material/button":"15.0.0-canary.0ad128337.0","@material/ripple":"15.0.0-canary.0ad128337.0","@material/tokens":"15.0.0-canary.0ad128337.0","@material/elevation":"15.0.0-canary.0ad128337.0","@material/typography":"15.0.0-canary.0ad128337.0","@material/feature-targeting":"15.0.0-canary.0ad128337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.0ad128337.0_1697741604827_0.4286476998066393","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/banner","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.9cec94097.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d3b957dc5e817eebe37fc6664b2c451975f7efba","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.9cec94097.0.tgz","fileCount":31,"integrity":"sha512-BLbD1Dc7LasiaZH+EL1vcGyTHeoAl90Tn7LRJtuNwliWzazhDFW5dDJz8t7MCdTaUwtx3B3yNyCKZrjBmalFXg==","signatures":[{"sig":"MEUCIQDn45Lmb+7xtjNYYGMy9Cxrk23F0NftFxchAbZwIiVL6QIgSU5l1hwPkas4NP9Xn+qCPs29K6DS3i431LqPTm/VCXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":794601},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1a8019402daf97efb72456551503dfb3fa31466b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/rtl":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/shape":"15.0.0-canary.9cec94097.0","@material/theme":"15.0.0-canary.9cec94097.0","@material/button":"15.0.0-canary.9cec94097.0","@material/ripple":"15.0.0-canary.9cec94097.0","@material/tokens":"15.0.0-canary.9cec94097.0","@material/elevation":"15.0.0-canary.9cec94097.0","@material/typography":"15.0.0-canary.9cec94097.0","@material/feature-targeting":"15.0.0-canary.9cec94097.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.9cec94097.0_1697757036959_0.7617683896508722","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/banner","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c51a0bbcc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"aefaf6419c9742305638baa45181359685501371","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":31,"integrity":"sha512-gVbsCbRNqL+Yhi3BsYB761gQWEnbjd72z39LYOlWCSVSoc8yXi8e1TU0VTqHO8T+fkJrPRiDrVav8TEewEod0w==","signatures":[{"sig":"MEUCIQDs8tT9sjJnRLQ9lAL29IoxVa5RgESVwadGlFjT1Q+hBgIga3WJSJ523ZV0j4wthnG8ddZBBLVdtmI5WXFYzimS8Yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":794601},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e65c7fe6dcc6d6069f00d4d2f8c55e61710d046b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/rtl":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/shape":"15.0.0-canary.c51a0bbcc.0","@material/theme":"15.0.0-canary.c51a0bbcc.0","@material/button":"15.0.0-canary.c51a0bbcc.0","@material/ripple":"15.0.0-canary.c51a0bbcc.0","@material/tokens":"15.0.0-canary.c51a0bbcc.0","@material/elevation":"15.0.0-canary.c51a0bbcc.0","@material/typography":"15.0.0-canary.c51a0bbcc.0","@material/feature-targeting":"15.0.0-canary.c51a0bbcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c51a0bbcc.0_1700081948998_0.45693766249610746","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/banner","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.d76666ad4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"0e4ab0118d8ac4052bba8b56be5094c927bd2378","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.d76666ad4.0.tgz","fileCount":31,"integrity":"sha512-lAP5iO1ha4glqUR8vGZwBeWh9K7UaJoklcV2LVkLkvi0430RxK/u0P1V2lElkoi2wtshdfoA4OqNvljkNKXhFg==","signatures":[{"sig":"MEUCIQCphWY7x6H7sLmcDOw/Z/tuIP7IKHnXE8B/UGNMcAMvAwIgI+C7pepbZ6ETif0ifmWNNdZNEcFpgsjkw76NvT8TYdo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":794601},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"8fc3640e389fda0098b42091a9a1ab8653fc6470","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/rtl":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/shape":"15.0.0-canary.d76666ad4.0","@material/theme":"15.0.0-canary.d76666ad4.0","@material/button":"15.0.0-canary.d76666ad4.0","@material/ripple":"15.0.0-canary.d76666ad4.0","@material/tokens":"15.0.0-canary.d76666ad4.0","@material/elevation":"15.0.0-canary.d76666ad4.0","@material/typography":"15.0.0-canary.d76666ad4.0","@material/feature-targeting":"15.0.0-canary.d76666ad4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.d76666ad4.0_1701123213906_0.7823685838052474","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/banner","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.8656bf0e0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b8800c377e08a04d5c8b8944623fef6a97196d68","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.8656bf0e0.0.tgz","fileCount":31,"integrity":"sha512-lFzvAioiKzitnPBemJ8q8bKRr5vd9YElJ/JXszmuAP0KugvM3EE3781hBuF1QF5jhNmO1Z41pfqpmYu63E4OYA==","signatures":[{"sig":"MEUCIQCAanwJsWaE4kYvlrNdzEkNO9JZQ7FiNSnoD54lawxtNQIgUHi3rJcmR7WJwNxOzdwirvxn0jBIVbxbMOar6JEsibk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":794601},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"36cab37e468233da3044a10c1df388f634163cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/rtl":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/shape":"15.0.0-canary.8656bf0e0.0","@material/theme":"15.0.0-canary.8656bf0e0.0","@material/button":"15.0.0-canary.8656bf0e0.0","@material/ripple":"15.0.0-canary.8656bf0e0.0","@material/tokens":"15.0.0-canary.8656bf0e0.0","@material/elevation":"15.0.0-canary.8656bf0e0.0","@material/typography":"15.0.0-canary.8656bf0e0.0","@material/feature-targeting":"15.0.0-canary.8656bf0e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.8656bf0e0.0_1702415950636_0.006254544798614203","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/banner","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.7f224ddd4.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"2cf24525e3dd1104f8c311d63c71f2e6200de1fb","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.7f224ddd4.0.tgz","fileCount":31,"integrity":"sha512-g9wBUZzYBizyBcBQXTIafnRUUPi7efU9gPJfzeGgkynXiccP/vh5XMmH+PBxl5v+4MlP/d4cZ2NUYoAN7UTqSA==","signatures":[{"sig":"MEUCIQCiPwxnrQFCv30hQW6xFTbmU4x70kARj21wRXLqtlaxdAIgHgW/rcPJL0lTPb5oruHAFApshcGA4nVTPu7TxEAK+CM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":794601},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ff8ff3ce455054f1532d1ae0983f40634a524886","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/rtl":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/shape":"15.0.0-canary.7f224ddd4.0","@material/theme":"15.0.0-canary.7f224ddd4.0","@material/button":"15.0.0-canary.7f224ddd4.0","@material/ripple":"15.0.0-canary.7f224ddd4.0","@material/tokens":"15.0.0-canary.7f224ddd4.0","@material/elevation":"15.0.0-canary.7f224ddd4.0","@material/typography":"15.0.0-canary.7f224ddd4.0","@material/feature-targeting":"15.0.0-canary.7f224ddd4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.7f224ddd4.0_1703743778430_0.023420299285499047","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/banner","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.a0b8a90c0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"d8fbb8b19520380dd7f54b75a52fec7203ea8acd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":31,"integrity":"sha512-HvaT0QVdt4O7X/RY1pDkErcfOchs0HeEgip3dAr4Sic2QvMo1V64rEx3HPuwSkLF1WvuW+jQh3s/+JMrP4z4lw==","signatures":[{"sig":"MEUCIAsZUpThADI4OWpz9ZyxMjSLqJCyFiBt/apeStTecunHAiEAgqV4kpxTTsG0wDCgvdCrzXDsSU8DzF10FN36v/JTr8Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":795479},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"85d5965379b080c9f852ecbbd95031e363636dfd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/rtl":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/shape":"15.0.0-canary.a0b8a90c0.0","@material/theme":"15.0.0-canary.a0b8a90c0.0","@material/button":"15.0.0-canary.a0b8a90c0.0","@material/ripple":"15.0.0-canary.a0b8a90c0.0","@material/tokens":"15.0.0-canary.a0b8a90c0.0","@material/elevation":"15.0.0-canary.a0b8a90c0.0","@material/typography":"15.0.0-canary.a0b8a90c0.0","@material/feature-targeting":"15.0.0-canary.a0b8a90c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.a0b8a90c0.0_1707333601540_0.33299160703606256","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/banner","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.e50b478eb.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"86e75392d2b3416fb26fedfe0066e0e748afaa49","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.e50b478eb.0.tgz","fileCount":31,"integrity":"sha512-X+HykpwdCpUR36R+o2uzts5N2ayVzuiDJ1ho+eq4l3D6c2pC0iXkuddWh/jqRCLLjvV1y4G2vweDOJNLSLU/aA==","signatures":[{"sig":"MEQCIAOwDC3nUqdrffzGWq9EbauTtMPt6kCXsT10IJA/4KHOAiB6x4CDZDU/I5Cvo4atzMTfyq4QguRuiNqSDFOLa88GYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"4691455eaee76f99b18be70913c9fefb7cf3c2ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/rtl":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/shape":"15.0.0-canary.e50b478eb.0","@material/theme":"15.0.0-canary.e50b478eb.0","@material/button":"15.0.0-canary.e50b478eb.0","@material/ripple":"15.0.0-canary.e50b478eb.0","@material/tokens":"15.0.0-canary.e50b478eb.0","@material/elevation":"15.0.0-canary.e50b478eb.0","@material/typography":"15.0.0-canary.e50b478eb.0","@material/feature-targeting":"15.0.0-canary.e50b478eb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.e50b478eb.0_1707415713699_0.6494221680222194","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/banner","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.c43b3438b.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"df352213efe0b9f09ff4aed62882319b7340117f","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.c43b3438b.0.tgz","fileCount":31,"integrity":"sha512-00D+sgshBJfwQiHE/or0EOU9xGSgttES/ciOIsJYmNlvNDGCr7Qg4VMX4Iss5bUTPmYFXNPevNoFMGorvpNDog==","signatures":[{"sig":"MEYCIQCv6TgwKlOh5GQQ5eqbaLJopYcceIgK5K+IWuHCr15V/wIhAM2C6cYV8D+cyW8RL1m3D1PqTaCLdhH8PyFV2lNbeIys","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"e69adcf897de97b302f026f07bbc2571b1a488ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/rtl":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/shape":"15.0.0-canary.c43b3438b.0","@material/theme":"15.0.0-canary.c43b3438b.0","@material/button":"15.0.0-canary.c43b3438b.0","@material/ripple":"15.0.0-canary.c43b3438b.0","@material/tokens":"15.0.0-canary.c43b3438b.0","@material/elevation":"15.0.0-canary.c43b3438b.0","@material/typography":"15.0.0-canary.c43b3438b.0","@material/feature-targeting":"15.0.0-canary.c43b3438b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.c43b3438b.0_1708719484566_0.8366533437114871","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/banner","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.819498d8c.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"adc9659904862049478e089043cb83463169e929","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.819498d8c.0.tgz","fileCount":31,"integrity":"sha512-VbB5mp1f0IyueXXmPBCpVW+joVDxjEZvlpCIly23KJyBL4Ffa9BdPC5++r4yiYOk0eTUFevADq5p2Qph+TaIbA==","signatures":[{"sig":"MEYCIQDRT0Vwoo+2d31jFtFdouM6zCHQkMe6KX2mzp3+pS/XawIhANxosAtHWcHL8Pza5I2qjJFU1Zd+3DEdHDI5nnaUD0+2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"886876a8252aacefe1942b13ba9251af9204bcdd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/rtl":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/shape":"15.0.0-canary.819498d8c.0","@material/theme":"15.0.0-canary.819498d8c.0","@material/button":"15.0.0-canary.819498d8c.0","@material/ripple":"15.0.0-canary.819498d8c.0","@material/tokens":"15.0.0-canary.819498d8c.0","@material/elevation":"15.0.0-canary.819498d8c.0","@material/typography":"15.0.0-canary.819498d8c.0","@material/feature-targeting":"15.0.0-canary.819498d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.819498d8c.0_1710515735667_0.6090083879664487","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/banner","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.453a6248a.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"129477093e57f7244c21549c2765d04604a50f5b","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.453a6248a.0.tgz","fileCount":31,"integrity":"sha512-pjyV9rvNQJ/w6EnWOX3ZyvfJd4XWhSQXV4BkDZWoqc5JGNLV/Kx3cyjcVDbfTspnni7TGfQen8lkQlbF5dC2/Q==","signatures":[{"sig":"MEUCIQDwiK0vwxPB+GNRv3k+i5rz08Np7bO2o8KMcrzkHnbJQgIgWDSkmIhTp/OhLCln9Gi3dry09gFvIwFBsF9Pz8KOkMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1eea6443d63f2bc64fe8f6f86664b54266c41244","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/rtl":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/shape":"15.0.0-canary.453a6248a.0","@material/theme":"15.0.0-canary.453a6248a.0","@material/button":"15.0.0-canary.453a6248a.0","@material/ripple":"15.0.0-canary.453a6248a.0","@material/tokens":"15.0.0-canary.453a6248a.0","@material/elevation":"15.0.0-canary.453a6248a.0","@material/typography":"15.0.0-canary.453a6248a.0","@material/feature-targeting":"15.0.0-canary.453a6248a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.453a6248a.0_1711386846882_0.4324145316564516","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/banner","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.68edc03c6.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e524b489f8725ecc59dd67c099c896ce7f337f87","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.68edc03c6.0.tgz","fileCount":31,"integrity":"sha512-ZVnNpjl1qLPGa29n+Wg/QsYI7OVCiGCGCJ18pvMFr6/q02QxdR+TS4ohJDWgG+FhWUr2Lxj+QA+Nz2xvDwC8kw==","signatures":[{"sig":"MEUCIDSq9o53OcbREK8hhDF05ONW6wVwMuCoaohRmECYHuvTAiEAuSTE5HeAgabA3z7AOqnF+4v+CQkXJpxA5f4YGYxTK6s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"04046ad51f4d581f93e797ec929d219422dd0235","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/rtl":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/shape":"15.0.0-canary.68edc03c6.0","@material/theme":"15.0.0-canary.68edc03c6.0","@material/button":"15.0.0-canary.68edc03c6.0","@material/ripple":"15.0.0-canary.68edc03c6.0","@material/tokens":"15.0.0-canary.68edc03c6.0","@material/elevation":"15.0.0-canary.68edc03c6.0","@material/typography":"15.0.0-canary.68edc03c6.0","@material/feature-targeting":"15.0.0-canary.68edc03c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.68edc03c6.0_1712603213323_0.4773571377257122","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/banner","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.5bebc0064.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"db0779e263d2c8bb0a8c8da881755bc3b73f99c9","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.5bebc0064.0.tgz","fileCount":31,"integrity":"sha512-EesJMJLpV9ZvaLcS4WPpMxs41K2XdbaAsNR9U42JhaBSYWdb9JPy5IzN5xFowexkTRLLnvUFKYawqWTm046XnA==","signatures":[{"sig":"MEYCIQCTmcWuZTXjzXJ932lojqvBpCpjboxpOHbTl612ezDyPAIhAJnG5gxEBixkQEPVOe+arR3aPEKisqA8dn8EYARjAkbo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"ff39e65972de013a29dd14429e111139bc616366","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/rtl":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/shape":"15.0.0-canary.5bebc0064.0","@material/theme":"15.0.0-canary.5bebc0064.0","@material/button":"15.0.0-canary.5bebc0064.0","@material/ripple":"15.0.0-canary.5bebc0064.0","@material/tokens":"15.0.0-canary.5bebc0064.0","@material/elevation":"15.0.0-canary.5bebc0064.0","@material/typography":"15.0.0-canary.5bebc0064.0","@material/feature-targeting":"15.0.0-canary.5bebc0064.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.5bebc0064.0_1712871709223_0.532873660387837","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/banner","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.311f29a60.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"77fbb422e82703325839fe06ad5473b88a312cd4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.311f29a60.0.tgz","fileCount":31,"integrity":"sha512-hH8pvQxsiEdQxajD1wjQF3FaC2EuzJP3XYAeHQ/zTFgTQenQ6z8J4X8lLkxOjFo4KpdlLvGprWTzXu40ysIblg==","signatures":[{"sig":"MEQCIBxbhuWKltM1gd1I9aB5gx2j0RSQPUNFzyRYgiHHSLoYAiAqiqe/VoQw/hFTaE4rE6fqhlskiNx3nG2+HnL0W+JOPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"7bc0264e163e842f0f96c1dbf7a468c022db1497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/rtl":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/shape":"15.0.0-canary.311f29a60.0","@material/theme":"15.0.0-canary.311f29a60.0","@material/button":"15.0.0-canary.311f29a60.0","@material/ripple":"15.0.0-canary.311f29a60.0","@material/tokens":"15.0.0-canary.311f29a60.0","@material/elevation":"15.0.0-canary.311f29a60.0","@material/typography":"15.0.0-canary.311f29a60.0","@material/feature-targeting":"15.0.0-canary.311f29a60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.311f29a60.0_1713895247114_0.5352946931686209","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/banner","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.65c10a622.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"43c0d13a39544a72174fc377511f1a0e9eaa8da4","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.65c10a622.0.tgz","fileCount":31,"integrity":"sha512-0AAt9m0dE4GO4t6eQdDgLlUC2wYBqdf+MOb53Sa6p5VBxoCWqGWNkii39gbl0YnYuIZIAwL56JGdgrotamewbw==","signatures":[{"sig":"MEUCIQC0KxcmKljqaAw9s3pJojgYebW0rn6ekPcztb6Xr0moxwIgI4YiszspR96YpFmkjIrx1O0RPj8i/km710YE/EcxmeA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"1f3126503c812250084b65b6edbb26f25ef4a174","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/rtl":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/shape":"15.0.0-canary.65c10a622.0","@material/theme":"15.0.0-canary.65c10a622.0","@material/button":"15.0.0-canary.65c10a622.0","@material/ripple":"15.0.0-canary.65c10a622.0","@material/tokens":"15.0.0-canary.65c10a622.0","@material/elevation":"15.0.0-canary.65c10a622.0","@material/typography":"15.0.0-canary.65c10a622.0","@material/feature-targeting":"15.0.0-canary.65c10a622.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.65c10a622.0_1714070966474_0.23329747953040325","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/banner","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.4b35cb7d0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"532db197b1a6ad26a811f6d68d5ff41e70e5b754","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":31,"integrity":"sha512-YUz+8065k6gUfKCktLdOVAKqH5Qk4jvRGsY6QZ2QBGKGdrPBb+qY8YiXWdmFnJUOJfqDiH8XruDc1BsUvJEjfw==","signatures":[{"sig":"MEUCIFfQ9/JRQGLpBSXY6BGkgXMu3mQ+VnkLRQk3yztQcXGJAiEAjhaSV3uk6sChgPcxwzYllQAmSqOyZp3QfwNmxpys1Ik=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"cba29aaa21c1bc2b1f1a02e5ddfa4a5110d9ef63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/rtl":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/shape":"15.0.0-canary.4b35cb7d0.0","@material/theme":"15.0.0-canary.4b35cb7d0.0","@material/button":"15.0.0-canary.4b35cb7d0.0","@material/ripple":"15.0.0-canary.4b35cb7d0.0","@material/tokens":"15.0.0-canary.4b35cb7d0.0","@material/elevation":"15.0.0-canary.4b35cb7d0.0","@material/typography":"15.0.0-canary.4b35cb7d0.0","@material/feature-targeting":"15.0.0-canary.4b35cb7d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.4b35cb7d0.0_1714651410917_0.07958215047269812","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/banner","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.f80ac92b0.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"629b3999aa35b9cf9725f148895237da44dff9dd","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.f80ac92b0.0.tgz","fileCount":31,"integrity":"sha512-UYINGLs5gvBsjLelv6fUr3U2KmaNglfpVPA1wUhWTLov7Cg7R3vslzR7sHTyHGhJYvXU6zp9wEEbf3tTxozWWQ==","signatures":[{"sig":"MEUCIQDXJv2sgYZ5DWwAYP7iGVTE7kNB3Ng5XJptbUUD5+Q/RwIgSTFWtMbLDoFUIzhyD0e7jz0cJlDgYktdtBCHdPLHhsM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"514a3afe9efc5bcebf1ace1e335357184ee1a9e0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/rtl":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/shape":"15.0.0-canary.f80ac92b0.0","@material/theme":"15.0.0-canary.f80ac92b0.0","@material/button":"15.0.0-canary.f80ac92b0.0","@material/ripple":"15.0.0-canary.f80ac92b0.0","@material/tokens":"15.0.0-canary.f80ac92b0.0","@material/elevation":"15.0.0-canary.f80ac92b0.0","@material/typography":"15.0.0-canary.f80ac92b0.0","@material/feature-targeting":"15.0.0-canary.f80ac92b0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.f80ac92b0.0_1714652020583_0.32300531239618535","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/banner","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.2f5b899bc.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"512186a8f81244fbee4de2621d1f180a3e018a96","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.2f5b899bc.0.tgz","fileCount":31,"integrity":"sha512-+tQ9ug6iRlw0NDvxPaOk3D5VvSh0d7/zDXsXNgO64tedxI57XX5zbaa1zB5owXT/9D8se9fgntJiryR0gg/5RQ==","signatures":[{"sig":"MEUCIQD4JFinJUhDZFk0yPSVTuBD2dbNW2CEQM62Vc+mTNmn8QIgEZrkvLgq//El7EEsbZtw7HQNikxSiqMmS33M3BSGFDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"751553ca74ad43074c963487257a8862de87844b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/rtl":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/shape":"15.0.0-canary.2f5b899bc.0","@material/theme":"15.0.0-canary.2f5b899bc.0","@material/button":"15.0.0-canary.2f5b899bc.0","@material/ripple":"15.0.0-canary.2f5b899bc.0","@material/tokens":"15.0.0-canary.2f5b899bc.0","@material/elevation":"15.0.0-canary.2f5b899bc.0","@material/typography":"15.0.0-canary.2f5b899bc.0","@material/feature-targeting":"15.0.0-canary.2f5b899bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.2f5b899bc.0_1716213424814_0.4646443550216468","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/banner","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","banner"],"license":"MIT","_id":"@material/banner@15.0.0-canary.cfec83c74.0","maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"16b38ad391e639c35be8fff6a82c2c0866ee6ac3","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.cfec83c74.0.tgz","fileCount":31,"integrity":"sha512-XGhQoxn0FXdzFWTD6ThqhWMpYyODT+fQ1kDzf5Yw1MXJLi4hJYx4Mjbz7ClHLd61+5zWf84Q1AzlB+wwo4X5yA==","signatures":[{"sig":"MEQCIBF+Lh0EC/m8hUPmkPcZWTkOScKEd77e/808PPBjeEQiAiBhwQPtAuicy531HfZt4nHtEjredeniPURz5j0Ygr0Tdg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":796262},"main":"dist/mdc.banner.js","module":"index.js","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","gitHead":"0ec8b129344ebbe45f00b6ad892b682b054ea892","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components Web banner component.","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/rtl":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/shape":"15.0.0-canary.cfec83c74.0","@material/theme":"15.0.0-canary.cfec83c74.0","@material/button":"15.0.0-canary.cfec83c74.0","@material/ripple":"15.0.0-canary.cfec83c74.0","@material/tokens":"15.0.0-canary.cfec83c74.0","@material/elevation":"15.0.0-canary.cfec83c74.0","@material/typography":"15.0.0-canary.cfec83c74.0","@material/feature-targeting":"15.0.0-canary.cfec83c74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/banner_15.0.0-canary.cfec83c74.0_1716231439684_0.03159543114525021","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/banner","description":"The Material Components Web banner component.","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","banner"],"main":"dist/mdc.banner.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-banner"},"dependencies":{"@material/base":"15.0.0-canary.423edc3dc.0","@material/button":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/elevation":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/ripple":"15.0.0-canary.423edc3dc.0","@material/rtl":"15.0.0-canary.423edc3dc.0","@material/shape":"15.0.0-canary.423edc3dc.0","@material/theme":"15.0.0-canary.423edc3dc.0","@material/tokens":"15.0.0-canary.423edc3dc.0","@material/typography":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Banner\n\nA banner displays a prominent message and related optional actions.\n\n![Banner example](images/banner.png)\n\n**Contents**\n\n* [Using banners](#using-banners)\n* [Banners](#banners)\n* [API](#api)\n* [Usage within web frameworks](#usage-within-web-frameworks)\n\n## Using banners\n\nA banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.\n\nBanners should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.\n\n### Installing banners\n\n```\nnpm install @material/banner\n```\n\n### Styles\n\n```scss\n@use \"@material/banner/styles\";\n```\n\n### JavaScript instantiation\n\n```js\nimport {MDCBanner} from '@material/banner';\nconst banner = new MDCBanner(document.querySelector('.mdc-banner'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Banners\n\n### Banner example\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n### Variants\n\n#### Centered\n\nBy default, banners are positioned as leading.\n\nThey can optionally be displayed centered by adding the `mdc-banner--centered` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, you can call the `position-centered` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner.position-centered;\n}\n```\n\n#### Fixed banner\n\nWhen used below top app bars, banners should remain fixed at the top of the screen. This can be done by adding the `mdc-banner__fixed` wrapper element around the content element:\n\n```html\n
\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n
\n```\n\n#### Banner with graphic\n\nImages can help communicate a banner’s message.\n\n```html\n
\n
\n
\n
error_outline
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n
\n
\n
\n```\n\n#### Banner with two actions\n\nBanners may have one or two low-emphasis text buttons.\n\n```html\n
\n
\n
\n
\n There was a problem processing a transaction on your credit card.\n
\n
\n
\n \n \n
\n
\n
\n```\n\n\n#### Mobile stacked\n\nOn mobile view, banners with long text should have their action(s) be positioned _below_ the text instead of alongside it. This can be accomplished by adding the `mdc-banner--mobile-stacked` modifier class to the root element:\n\n```html\n
\n ...\n
\n```\n\nAlternatively, banner can be in stacked layout regardless of mobile-breakpoint, with the `layout-stacked` mixin from Sass:\n\n```scss\n.my-banner {\n @include banner-theme.layout-stacked;\n}\n```\n\n## API\n\n### Sass mixins\n\nAccess to theme mixins require importing the banner's theme style module.\n\n```scss\n@use \"@material/banner\";\n```\n\nMixin | Description\n--- | ---\n`fill-color($color)` | Sets the fill color of the banner.\n`text-color($color)` | Sets the color of the banners's text.\n`divider-color($color)` | Sets the color of the banner's divider.\n`min-width($min-width, $mobile-breakpoint)` | Sets the `min-width` of the banner content on tablet/desktop devices. On mobile, the width is automatically set to 100%.\n`max-width($max-width)` | Sets the `max-width` of the banner content.\n`position-centered()` | Sets the banner content to centered instead of leading.\n`z-index($z-index)` | Sets the z-index of the banner.\n\n### `MDCBanner` events\n\nEvent name | `event.detail` | Description\n--- | --- | ---\n`MDCBanner:closing` | `MDCBannerCloseEventDetail` | Indicates when the banner begins its closing animation.\n`MDCBanner:closed` | `MDCBannerCloseEventDetail` | Indicates when the banner finishes its closing animation.\n`MDCBanner:opening` | `{}` | Indicates when the banner begins its opening animation.\n`MDCBanner:opened` | `{}` | Indicates when the banner finishes its opening animation.\n\n### `MDCBanner` properties and methods\n\nProperty | Value Type | Description\n--- | --- | ---\n`isOpen` | `boolean` (read-only) | Returns whether the banner is open.\n\nMethod Signature | Description\n--- | ---\n`open() => void` | Opens the banner.\n`close(reason: CloseReason) => void` | Closes the banner, with the specified action indicating why it was closed.\n`getText() => string` | Gets the text of the banner.\n`setText(text: string) => void` | Sets the text of the banner.\n`getPrimaryActionText() => string` | Gets the banner's primary action text.\n`setPrimaryActionText(actionButtonText: string) => void` | Sets the banner's primary action text.\n`getSecondaryActionText() => string \\| null` | Gets the banner's secondary action text. Returns null if the banner has no secondary action.\n`setSecondaryActionText(actionButtonText: string) => void` | Sets the banner's secondary action text.\n`layout() => void` | Recalculates layout. With height being calculated dynamically recommended to call on window `resize` events.\n\n### Usage within frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a banner 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\nSee [MDCBannerAdapter](./adapter.ts) and [MDCBannerFoundation](./foundation.ts) for up-to-date code documentation of banner foundation APIs.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/banner@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-6X3AruPWae+As7+rV2oxuakD/0J5+gL2YOQb/vjKF16Tvu37QjtMRvxjdQLwX34K/qScCQScHzrB/vmTva83sw==","shasum":"5a7d3ecb474c2e26cae2e07eb1835d0deb37a250","tarball":"https://registry.npmjs.org/@material/banner/-/banner-15.0.0-canary.423edc3dc.0.tgz","fileCount":31,"unpackedSize":796262,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdXb0Th8wNtWCaXfXI4flkXVz6nh0IKIBsLPnzyHOSCAIgfKIJwZDnCV5SV4DUr74Pde50sTzuIVRSEdfQOu4zRSs="}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/banner_15.0.0-canary.423edc3dc.0_1719425538752_0.5036886225335899"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-03T17:51:48.582Z","modified":"2024-06-26T18:12:19.472Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:51:48.901Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:54:58.303Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:37.751Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:56:00.154Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:27.860Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:37.495Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:16.606Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:50:00.766Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:11.561Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:21:08.049Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:24.354Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:39.704Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:51:05.234Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:50.250Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:32.517Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:24.756Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:22:06.805Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:45.015Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:45.438Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:54.411Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:03:04.852Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:15.398Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:15.279Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:18.441Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:20.229Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:50.927Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:44.561Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:28.644Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:30:09.352Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:51:38.675Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:18:47.119Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:52:09.702Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:16.105Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:31:09.522Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:31.187Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:35.886Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:23.975Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:33:02.680Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:56.529Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:43:09.378Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:25:04.562Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:22:07.969Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:34:10.652Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:49.930Z","8.0.0-canary.546277d32.0":"2020-08-20T16:45:15.579Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:01:12.365Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:35.842Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:18.324Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:45.592Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:33.655Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:50.710Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:54.516Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:56.387Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:28.695Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:55.869Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:54.010Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:30.017Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:27.049Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:17.195Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:57:04.966Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:57:40.361Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:58:22.684Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:57.059Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:17:06.554Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:45.628Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:50:58.289Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:43.778Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:32.056Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:19.409Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:51.452Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:34.840Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:53:01.565Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:57.329Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:27:01.574Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:22.216Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:38.405Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:58.462Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:44:16.820Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:25.659Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:29.809Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:32.193Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:37:11.555Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:34.600Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:52.902Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:55:29.705Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:21.209Z","8.0.0-canary.d71622574.0":"2020-10-09T16:33:02.812Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:55:13.566Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:52.564Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:59.122Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:56.503Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:51.967Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:36.508Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:41.422Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:52.104Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:33:04.778Z","8.0.0-canary.596e98424.0":"2020-10-28T16:05:09.513Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:13:37.783Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:29.336Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:14:09.172Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:29.683Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:26.167Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:59.877Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:32.324Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:14.038Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:00:49.322Z","8.0.0":"2020-11-02T23:00:57.038Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:40.492Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:28.712Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:29.706Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:10:36.188Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:22.663Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:47:07.086Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:38.793Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:48.919Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:17:14.309Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:46:07.219Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:22:05.410Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:18.711Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:47:03.572Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:34.024Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:21.907Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:28:43.299Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:25.320Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:45:17.893Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:36:04.863Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:26.753Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:38.365Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:31.685Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:40.283Z","9.0.0-canary.a41527604.0":"2020-11-19T20:02:21.464Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:57:16.800Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:54.028Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:10:12.527Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:16:48.231Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:32:18.354Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:38.153Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:38.991Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:34.281Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:53.234Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:58:13.990Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:41.677Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:51.850Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:48.310Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:47.412Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:46.576Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:31:03.622Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:57.978Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T16:00:08.677Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:02:39.081Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:34.946Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:13.843Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:12.226Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:43:17.936Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:47.985Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:55.132Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:39.923Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:36.748Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:37.129Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:47:19.968Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:06:44.817Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:12:17.556Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:51:24.730Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:08:56.648Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:47:26.861Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:29:45.540Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:48.621Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:34.386Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:03:02.899Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:51.458Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:08:45.878Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:43:15.311Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:28.516Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:47.239Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:43.743Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:49:11.839Z","9.0.0":"2020-12-29T19:47:16.154Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:23.441Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:13:06.943Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:47:44.374Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:33.996Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:54.037Z","10.0.0-canary.365c69360.0":"2021-01-05T17:49:40.720Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:58.946Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:35.598Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:51:12.782Z","10.0.0-canary.968735356.0":"2021-01-06T15:52:15.968Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:26.969Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:27:52.648Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:30.566Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:21:05.937Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:56.545Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:55.000Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:30.344Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:25:32.477Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:13:43.282Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:56:36.569Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:26.862Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:30.742Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:22.207Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:50.114Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:55:10.485Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:46.122Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:09:25.535Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:56:22.234Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:54.580Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:06:09.267Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:41.678Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:22.730Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:47.947Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:37:13.348Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:25:26.838Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:11:33.264Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:46:13.937Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:28.394Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:48.045Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:26.812Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:05:34.707Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:28:36.746Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:21:35.605Z","10.0.0-canary.994873795.0":"2021-01-27T14:52:29.710Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:42.417Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:33:55.750Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:05:11.554Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:58.035Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:16:02.268Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:47.953Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:50:45.234Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:30.982Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:46.346Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:23.818Z","10.0.0-canary.05f249666.0":"2021-02-04T17:51:39.908Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:44:39.840Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:36:14.644Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:55.058Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:59.815Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:19:01.678Z","10.0.0":"2021-02-05T16:20:24.356Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:43:29.264Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:58.327Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:06:19.149Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:05:11.889Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:36:06.247Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:49.979Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:01:58.409Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:38.298Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:54:03.218Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:26.278Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:08:16.102Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:43:10.547Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:32:15.614Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:00:47.517Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:18.893Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:13:08.703Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:35.380Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:11:21.557Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:22.323Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:26.558Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:46:09.607Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:22.430Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:57.119Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:39:38.928Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:24:48.384Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:44:08.459Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:51.090Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:38:19.317Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:24.148Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:59.494Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:47:12.736Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:59.508Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:50.909Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:47:07.741Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:55.480Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:15:32.200Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:34:33.223Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:35:49.385Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:36:27.037Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:56.782Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:57.585Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:36.717Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:51.592Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:24.851Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:09:22.513Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:40:18.305Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:34.306Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:22.593Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:33:26.671Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:25.391Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:23.116Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:22.857Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:21.500Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:48.027Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:58.371Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:41:10.584Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:22.047Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:28:44.746Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:53:39.638Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:58:41.498Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:26:18.943Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:51:05.659Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:04:17.192Z","11.0.0-canary.81911b707.0":"2021-03-11T18:24:32.924Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:38:04.081Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:02:41.966Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:10:16.879Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:34:35.153Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:41:46.356Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:45:31.376Z","11.0.0-canary.73a227194.0":"2021-03-12T00:25:22.323Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:20.747Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:36:15.459Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:21:21.407Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:49:06.221Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:13:39.812Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:40:52.171Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:42:35.327Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:56.185Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:38.115Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:21.516Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:18:32.315Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:21.623Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:19:09.462Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:39:47.582Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:52:37.903Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:51.393Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:13:53.516Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:35:09.465Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:45:24.797Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:06:18.391Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:52.196Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:09:05.313Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:04:05.186Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:34.644Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:05:48.231Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:30:50.370Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:17:47.717Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:33:59.430Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:58:44.942Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:39.863Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:49.252Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:48.418Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:47.251Z","11.0.0-canary.24609b822.0":"2021-03-31T20:58:07.381Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:29.404Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:02:03.818Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:19.555Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:25:13.553Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:21.302Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:01:40.590Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:17.264Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:58.197Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:56.648Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:55.627Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:37:00.073Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:44.935Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:36:34.018Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:17.685Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:37.930Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:37.730Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:41.516Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:32.508Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:04:04.844Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:05:13.335Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:34.077Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:47:14.700Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:22.083Z","11.0.0":"2021-04-15T22:59:25.236Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:46:11.723Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:48:05.157Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:21.387Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:57.671Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:47.100Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:20.905Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:57.926Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:30.846Z","12.0.0-canary.cad489689.0":"2021-04-22T16:50:43.680Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:40.526Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:20.458Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:44:15.040Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:38.349Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:11:02.117Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:21:00.297Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:44.124Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:38.473Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:59.931Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:47:21.265Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:35.605Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:14:13.017Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:49:02.920Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:49.223Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:59.563Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:24.519Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:44:14.705Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:19:13.222Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:25:02.175Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:14.049Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:57.527Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:29.455Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:46.351Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:55.401Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:57.580Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:47:04.806Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:57.074Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:26.474Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:27.185Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:37.293Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:39.048Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:57.444Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:31:49.083Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:35:07.069Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:48.076Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:59:15.166Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:20.098Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:49.565Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:23:04.039Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:17:35.046Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:30.153Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:23.763Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:42:15.861Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:27.623Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:31:22.792Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:54.302Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:41.349Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:45:12.367Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:44:30.943Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:20:05.522Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:24:43.809Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:18.107Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:58:02.683Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:10:08.785Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:26:04.709Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:55.410Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:54.470Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:18:44.059Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:45.602Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:21:15.326Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:34.599Z","12.0.0-canary.33a954852.0":"2021-05-13T15:09:09.264Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:22.033Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:18.892Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:15:01.650Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:53.328Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:55:08.210Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:22.371Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:37.630Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:58:02.949Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:21.594Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:54.670Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:07:06.261Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:40.167Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:42.590Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:06:08.900Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:50.383Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:41.610Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:32.012Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:27.615Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:31.234Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:25.133Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:54.804Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:40.047Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:30.517Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:42:05.125Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:07:41.533Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:37.078Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:37:06.125Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:56.954Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:07:02.979Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:35.426Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:33.947Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:22.673Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:23:15.560Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:24.480Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:49.797Z","12.0.0-canary.271fff902.0":"2021-06-15T22:52:16.755Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:53:13.782Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:36.777Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:41.376Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:28.532Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:46.638Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:56.565Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:48.735Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:21.034Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:17.287Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:49.801Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:39.574Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:16:10.617Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:47.484Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:42:09.378Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:39.987Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:52.470Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:25.634Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:19.441Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:10:56.757Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:05:02.618Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:25.470Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:43.926Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:40.946Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:50:40.049Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:48.686Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:36.873Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:55:10.731Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:59.871Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:46.605Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:49:36.603Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:28.075Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:23:12.309Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:34.754Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:26.634Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:59:16.937Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:21.331Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:15.814Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:26.146Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:18.388Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:10:23.239Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:58:05.908Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:47.861Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:49.151Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:37:16.438Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:51:09.728Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:39.566Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:35.466Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:33.085Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:26.382Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:57:02.175Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:01:09.266Z","12.0.0":"2021-07-27T19:51:19.204Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:52:55.254Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:30.606Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:17.730Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:21.642Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:37.804Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:25.487Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:37.413Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:38.877Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:12.185Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:01:03.982Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:49.757Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:38.512Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:24.807Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:51:13.464Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:16:08.983Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:50.988Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:38.282Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:58.139Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:52.927Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:42:09.098Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:57.763Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:30:04.431Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:56:41.997Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:39.647Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:50.096Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:26.812Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:23:09.861Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:32.469Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:34.815Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:27.035Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:33.539Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:59.378Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:50:10.587Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:32.848Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:58.804Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:38.903Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:34.709Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:28:01.053Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:30:06.154Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:28.789Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:29:09.992Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:51.292Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:30.082Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:35.556Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:55:05.141Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:48.261Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:35.500Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:22.157Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:34.254Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:38.676Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:40.281Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:48.587Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:36.356Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:39:13.528Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:46:12.451Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:48:04.137Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:53.660Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:33:25.034Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:46.373Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:29.485Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:46.782Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:35:03.234Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:45.285Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:37:16.056Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:54.565Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:57.721Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:57.779Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:35.371Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:23.249Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:05:20.880Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:48.858Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:50.712Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:51.315Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:41.660Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:19:01.993Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:53.088Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:23.653Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:58.891Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:35.501Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:41.914Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:13:10.154Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:59:02.150Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:31.415Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:43:06.712Z","13.0.0":"2021-09-24T19:46:53.526Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:37.298Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:12:03.312Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:23.019Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:44:13.033Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:55.530Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:20.782Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:34.071Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:58.604Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:23:20.103Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:41.603Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:58.799Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:55.822Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:30.031Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:53.664Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:43.105Z","14.0.0-canary.a986df922.0":"2021-10-29T21:36:02.923Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:07:03.822Z","14.0.0-canary.468392606.0":"2021-11-11T19:41:21.083Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:49.741Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:48.698Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:32.319Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:37.466Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:28.614Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:56.339Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:51.780Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:21.345Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:23.145Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:18:30.853Z","14.0.0-canary.554c71829.0":"2021-11-16T16:21:05.576Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:51.190Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:59.612Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:24.155Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:57.732Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:44.605Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:06:11.126Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:51.820Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:46.340Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:55.716Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:52:08.120Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:33.099Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:55.560Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:46:04.461Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:08:09.687Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:56.718Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:50.835Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:56.138Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:33.113Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:31.081Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:11:22.028Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:34:03.398Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:32.153Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:45.617Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:54.525Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:56:00.259Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:32.906Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:51:18.118Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:44:04.938Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:54.434Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:54:19.898Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:19:03.749Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:56:05.182Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:56.826Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:33:40.878Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:44.705Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:50.069Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:58.896Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:51:27.287Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:24:32.588Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:43.919Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:48:25.186Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:55:21.393Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:58.306Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:08:14.995Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:31:00.260Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:30.120Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:35.343Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:21.713Z","14.0.0-canary.868793776.0":"2022-02-22T19:37:41.426Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:19.067Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:23.964Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:34.278Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:02:01.783Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:30.167Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:55.461Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:51.042Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:51:13.555Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:44.668Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:19:01.235Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:38.083Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:25.198Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:53:19.718Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:45:15.129Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:55.672Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:42.633Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:41:10.860Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:44.608Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:36:08.689Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:27.345Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:34:08.452Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:26.651Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:23.361Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:42.100Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:56.539Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:57.374Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:32.469Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:03:08.088Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:42.104Z","14.0.0":"2022-04-28T16:57:13.853Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:58:15.123Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:55.033Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:45.216Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:57:14.009Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:32.833Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:26:19.742Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:34.601Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:50.760Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:30.456Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:28:13.138Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:41.772Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:02:13.049Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:54.206Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:04:00.045Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:23:03.235Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:59:04.175Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:26.208Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:38.631Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:56.635Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:31:04.895Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:34.130Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:45.258Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:15.133Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:34.178Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:56:15.004Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:47.636Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:21.190Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:13.088Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:56.075Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:39.379Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:50.573Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:29.293Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:23.753Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:25.505Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:30:09.069Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:36:10.528Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:34.785Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:22.955Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:37.192Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:26.434Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:27.371Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:24.804Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:29.598Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:48:04.977Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:20.011Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:59.681Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:23:03.935Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:26.281Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:21.036Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:30.450Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:57.672Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:47:00.543Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:48.223Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:42:06.916Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:22:08.626Z","15.0.0-canary.10196647d.0":"2022-08-03T21:55:03.594Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:44:09.731Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:22:11.400Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:47:09.319Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:32.509Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:07:03.863Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:46:56.707Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:14.755Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:31.577Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:21:07.432Z","15.0.0-canary.4299717da.0":"2022-09-07T16:17:01.503Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:12.825Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:05:09.595Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:04:14.746Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:26.416Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:56:05.518Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:53.639Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:44.546Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:18.252Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:49.804Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:59.089Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:09:36.794Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:44.568Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:51.732Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:46:04.475Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:25.104Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:58:40.169Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:16.656Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:56.894Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:27.250Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:57:00.747Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:30.568Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:59.808Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:16.514Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:19:33.613Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:49.668Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:57.374Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:16:04.595Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:52:04.919Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:38:43.751Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:56:44.451Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:06:53.617Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:08:53.218Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:39:18.766Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:50:12.935Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:03:28.755Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T16:59:41.206Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:22:20.865Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:42:47.351Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:52:18.972Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:15:02.069Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:52:37.826Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:19:14.026Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:57:23.983Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:23:44.098Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:58:08.789Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:41:31.796Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:43:25.558Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:24:28.756Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:43:52.445Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:14:28.193Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:18:12.382Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:38:14.481Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:12:57.799Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:57:48.164Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:06:51.435Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:20:12.767Z","15.0.0-canary.fc539db34.0":"2022-10-24T19:00:13.436Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:46:06.820Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:31:43.080Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:16:27.867Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:33:33.608Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:50:36.721Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:57:31.838Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:37:56.299Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:11:50.230Z","15.0.0-canary.909b48215.0":"2022-11-03T04:09:01.593Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:20:17.781Z","15.0.0-canary.da95e2a05.0":"2022-11-04T17:00:11.706Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:58:11.121Z","15.0.0-canary.215506426.0":"2022-11-05T01:07:06.193Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:05:10.693Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:25:38.740Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:14:28.103Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:28:59.516Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:57:37.857Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:19:06.406Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:36:38.318Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:54:21.636Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:03:59.436Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:07:14.562Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:36:58.068Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:37:46.810Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:12:56.436Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:46:20.810Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T15:59:42.074Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:28:09.608Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:29:34.289Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:03:17.467Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:31:21.996Z","15.0.0-canary.b01136063.0":"2022-11-16T00:17:02.712Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:14:27.513Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:16:45.510Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:18:58.108Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:57:09.725Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:01:36.482Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:06:34.541Z","15.0.0-canary.40b18d043.0":"2022-11-16T22:59:58.415Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:10:07.685Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:01:20.798Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:02:46.205Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:56:34.955Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:05:51.215Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:22:17.354Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:17:30.399Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:02:13.178Z","15.0.0-canary.d58410453.0":"2022-11-18T19:26:16.435Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:46:20.436Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:55:10.372Z","15.0.0-canary.96f472604.0":"2022-11-21T12:53:57.909Z","15.0.0-canary.18b8f31e1.0":"2022-11-21T16:03:39.325Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:55:15.331Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:01:56.971Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:32:08.210Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:17:44.552Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:40:38.259Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:58:04.308Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:17:07.864Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:14:56.441Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:48:33.188Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:12:55.499Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:35:26.121Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:50:29.832Z","15.0.0-canary.65c411674.0":"2022-11-29T17:39:59.912Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:15:29.551Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:09:00.468Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:30:33.553Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:55:38.887Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:25:32.540Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:03:18.222Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:02:17.155Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:08:09.454Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:27:55.303Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:43:58.996Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:27:12.153Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:53:07.490Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:04:21.998Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:42:35.308Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:45:45.984Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:32:04.337Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:53.166Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:03:34.040Z","15.0.0-canary.817002c29.0":"2022-12-13T21:55:24.082Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:30:14.980Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:20:39.837Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:46:09.608Z","15.0.0-canary.34767110.0":"2022-12-14T17:19:25.552Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:26:55.694Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:09:54.978Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:28:32.165Z","15.0.0-canary.604264203.0":"2022-12-21T21:42:04.574Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:26:53.785Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:13:31.809Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:06:28.956Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:05:17.586Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:52:57.817Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:03:37.158Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:42:18.557Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:07:16.407Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:48:59.578Z","15.0.0-canary.af490a848.0":"2023-01-03T15:59:12.800Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:40:07.169Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:14:30.165Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:33:59.864Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:19:08.031Z","15.0.0-canary.c492898c2.0":"2023-01-04T17:38:57.969Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:37:02.847Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:04:10.033Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:10:39.392Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:23:26.008Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:17:21.592Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:44:48.383Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:25:22.833Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:29:29.510Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:12:52.741Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:19:53.313Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:19:36.559Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:14:09.819Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:55:33.842Z","15.0.0-canary.202823f54.0":"2023-01-11T21:37:04.061Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:57:05.209Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:37:47.365Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:25:58.933Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:51:00.347Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:40:32.362Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:31:08.836Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:36:26.260Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:28:14.764Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:44:49.684Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:31:24.462Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:45:31.559Z","15.0.0-canary.15b221540.0":"2023-02-01T17:53:58.851Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T18:59:48.684Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:35:34.894Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:39:41.535Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:10:14.145Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:15:48.135Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:25:37.680Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:10:54.311Z","15.0.0-canary.de38de758.0":"2023-02-09T15:43:47.018Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:04:21.108Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:51:05.066Z","15.0.0-canary.066d9439b.0":"2023-02-15T19:59:14.582Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:35:28.813Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:21:24.317Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:42:45.088Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:37:06.209Z","15.0.0-canary.f32339937.0":"2023-03-06T15:16:58.687Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:28:44.958Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:43:07.257Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:44:10.085Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:27:36.469Z","15.0.0-canary.274610c77.0":"2023-03-09T15:00:04.072Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:53:53.941Z","15.0.0-canary.da22ca960.0":"2023-03-09T20:19:37.570Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:46:13.447Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:48:32.063Z","15.0.0-canary.de5224633.0":"2023-03-09T23:56:58.900Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:09:08.903Z","15.0.0-canary.23073a303.0":"2023-03-10T14:16:16.640Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:48:39.982Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:49:14.831Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:26:11.652Z","15.0.0-canary.82554d770.0":"2023-03-11T01:38:26.758Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:40:13.448Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:45:27.962Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:48:51.995Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:04:11.495Z","15.0.0-canary.112715df5.0":"2023-03-13T18:40:31.991Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:32:51.900Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:40:21.983Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:44:41.376Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:53:56.140Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:17:40.095Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:48:36.206Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:18:09.619Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:21:24.203Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:25:17.427Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:28:03.457Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:28:40.722Z","15.0.0-canary.87809c710.0":"2023-03-14T18:44:41.330Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:49:00.731Z","15.0.0-canary.419b23cc6.0":"2023-03-14T19:00:02.699Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:14:41.491Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:12:32.311Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:42:42.324Z","15.0.0-canary.39e473690.0":"2023-03-21T17:52:44.949Z","15.0.0-canary.cedffb44c.0":"2023-03-21T17:59:43.620Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:51:23.267Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:36:02.273Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:50:13.495Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:42:16.780Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:09:02.674Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:54:58.981Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:57:06.157Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:31:29.696Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:05:45.502Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:43:40.330Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:39:39.745Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:41:34.025Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:02:27.070Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:52:08.182Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:22:50.238Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:22:51.067Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:32:35.616Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:34:55.620Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:43:00.004Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:10:47.998Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:57:46.152Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:27:27.612Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:40:29.990Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:24:26.986Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:31:40.553Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:01:12.689Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:55:13.618Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:27:04.654Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:44:07.634Z","15.0.0-canary.446734f27.0":"2023-05-30T21:49:24.233Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:19:40.690Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:15:15.432Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:19:37.393Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:07:17.558Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:39:26.998Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:05:02.563Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:58:32.880Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:17:58.820Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:25:01.172Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:15:06.676Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:27:08.918Z","15.0.0-canary.83355c322.0":"2023-07-10T15:06:58.570Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:22:47.781Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:49:30.268Z","15.0.0-canary.02702296e.0":"2023-08-25T12:06:23.859Z","15.0.0-canary.872b65832.0":"2023-08-30T12:14:54.316Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:08:10.659Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:41:01.140Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:06:27.798Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:46:34.702Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:19:42.866Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:13:10.761Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:47:25.828Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:16:24.415Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:08:01.138Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:24:24.937Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:45:33.233Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:37:58.298Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:01:48.545Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:53:25.090Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:10:37.438Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:59:09.253Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:34.214Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:19:10.899Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:38.637Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:20:01.840Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:08:34.046Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:18:04.852Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:15:35.988Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:14:07.119Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:06:53.592Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:41:49.422Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:00:47.340Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:26.725Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:31.222Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:13:40.791Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:57:05.013Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:57:19.917Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:19.064Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-banner"},"keywords":["material components","material design","banner"],"license":"MIT","homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"readme":"","readmeFilename":""}